/* SCEN design tokens, v2 (Autofest language, SCEN gold). Role names, not hue names. */
@layer tokens {
  :root {
    /* surfaces: warm near-black, never pure */
    --sys-bg: #0c0b0a;
    --sys-surface: #141312;
    --sys-surface-2: #1a1917;
    --sys-surface-3: #232120;
    --sys-light: #e8e3db;
    --sys-light-2: #ddd8cf;
    --sys-on-bg: #f0ece6;
    --sys-on-surface: #f0ece6;
    --sys-on-light: #1a1816;
    --sys-outline: rgba(240, 236, 230, 0.08);
    --sys-outline-strong: rgba(240, 236, 230, 0.16);

    /* text ladder */
    --sys-fg: #f0ece6;
    --sys-fg-2: #a8a298;
    --sys-fg-3: #8d867d;
    --sys-fg-4: #5a544e;

    /* the one accent: SCEN gold from the logo */
    --sys-accent: #d4a537;
    --sys-accent-hover: #e6bb4f;
    --sys-on-accent: #14110a;
    --sys-accent-soft: rgba(212, 165, 55, 0.12);
    --sys-accent-mist: rgba(212, 165, 55, 0.06);

    /* status */
    --sys-status-announced: #f0ece6;
    --sys-status-open: #7ab8ff;
    --sys-status-soldout: #f5b400;
    --sys-status-postponed: #f5b400;
    --sys-status-cancelled: #ff5c5c;
    --sys-status-completed: #3ddc84;
    --sys-error: #ff5c5c;
    --sys-success: #3ddc84;

    /* type */
    --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
    --font-head: "Space Grotesk", system-ui, sans-serif;
    --font-body: "DM Sans", system-ui, sans-serif;
    --font-mono: "Space Grotesk", system-ui, sans-serif;
    --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
    --text-sm: clamp(0.82rem, 0.77rem + 0.25vw, 0.92rem);
    --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
    --text-md: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    --text-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
    --text-xl: clamp(1.7rem, 1.3rem + 1.5vw, 2.5rem);
    --text-2xl: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem);
    --text-3xl: clamp(3rem, 1.8rem + 4.2vw, 5.8rem);
    --text-hero: clamp(4.6rem, 2rem + 9vw, 11rem);
    --leading-tight: 0.92;
    --leading-snug: 1.15;
    --leading-body: 1.6;
    --tracking-caps: 0.14em;

    /* spacing, fluid */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --space-6: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    --space-7: clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem);
    --space-8: clamp(3.5rem, 2.25rem + 3.5vw, 5.5rem);
    --space-9: clamp(5rem, 3rem + 5vw, 8rem);
    --space-10: clamp(6rem, 4rem + 6vw, 10rem);
    --section-y: var(--space-8);
    --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
    --container: 90rem;
    --container-narrow: 48rem;

    /* shape */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* elevation */
    --elev-1: 0 1px 0 var(--sys-outline), 0 10px 30px rgba(0, 0, 0, 0.35);
    --elev-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.5);
    --elev-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 40px 90px rgba(0, 0, 0, 0.6);
    --glow-accent: 0 8px 24px rgba(212, 165, 55, 0.25);

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.19, 1, 0.22, 1);
    --dur-fast: 200ms;
    --dur-base: 400ms;
    --dur-slow: 700ms;
    --stagger: 70ms;

    --focus-ring: 0 0 0 3px var(--sys-bg), 0 0 0 6px var(--sys-accent);

    /* chrome */
    --ticker-h: 2.5rem;
    --header-h: 4.25rem;
    --chrome-h: calc(var(--ticker-h) + var(--header-h));
    --dock-h: calc(3.75rem + env(safe-area-inset-bottom));
  }
  @media (min-width: 48em) {
    :root { --section-y: var(--space-9); --header-h: 4.75rem; }
  }
}