@layer site {
  /* Classic Theme — warm beige, gold accent */
  :root {
    --color-bg: #f8f6f3;
    --color-bg-secondary: #f2efeb;
    --color-card: #f5f2ee;
    --color-surface: #ffffff;
    --color-primary: #b99667;
    --color-primary-dark: #a88452;
    --color-text: #2e2925;
    --color-text-secondary: #6d655d;
    --color-button: #222222;
    --color-border: #e7e0d8;
    --color-primary-tint: rgba(185, 150, 103, 0.12);
    --color-bg-glow: rgba(185, 150, 103, 0.1);
    --color-danger: #b91c1c;
    --color-danger-tint: rgba(185, 28, 28, 0.12);
    --nav-bg: rgba(248, 246, 243, 0.96);
    --hero-count-bg: rgba(248, 246, 243, 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);
  }
}