@layer site {
  /* Bar Mitzvah Theme — dark navy, gold accent */
  :root {
    --color-bg: #000e28;
    --color-bg-secondary: #0d182f;
    --color-card: #1e2940;
    --color-surface: #061636;
    --color-primary: #d4b06a;
    --color-primary-dark: #b99356;
    --color-text: #ffffff;
    --color-text-secondary: #b8c4d9;
    --color-button: #d4b06a;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-primary-tint: rgba(212, 176, 106, 0.14);
    --color-bg-glow: rgba(30, 90, 200, 0.22);
    --color-danger: #f87171;
    --color-danger-tint: rgba(248, 113, 113, 0.16);
    --nav-bg: rgba(0, 14, 40, 0.96);
    --hero-count-bg: rgba(0, 14, 40, 0.8);
    --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);
  }
}