@layer site {
  /* Bat Mitzvah Theme — light lilac, purple accent */
  :root {
    --color-bg: #f8f4f7;
    --color-bg-secondary: #f3edf4;
    --color-card: #f1e8f2;
    --color-surface: #ffffff;
    --color-primary: #8e44ad;
    --color-primary-dark: #7d3c98;
    --color-text: #34263b;
    --color-text-secondary: #6f6475;
    --color-button: #8e44ad;
    --color-border: #e5d8e8;
    --color-primary-tint: rgba(142, 68, 173, 0.1);
    --color-bg-glow: rgba(142, 68, 173, 0.1);
    --color-danger: #b91c1c;
    --color-danger-tint: rgba(185, 28, 28, 0.1);
    --nav-bg: rgba(248, 244, 247, 0.96);
    --hero-count-bg: rgba(248, 244, 247, 0.85);
    --hero-panel-gradient: linear-gradient(
      90deg,
      var(--color-hero-bg, var(--color-bg)) 0%,
      var(--color-hero-bg, var(--color-bg)) 30%,
      color-mix(in srgb, var(--color-hero-bg, var(--color-bg)) 88%, transparent)
        46%,
      transparent 64%
    );
    --hero-panel-gradient-mobile: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-hero-bg, var(--color-bg)) 90%, transparent)
        85%,
      var(--color-hero-bg, var(--color-bg)) 100%
    );
    /* Bridge to system tokens */
    --c-radius: var(--radius-lg);
    --c-nav-h: 80px;
    --font-family: var(--font-sans);
  }
}