/* ============================================================
   DESIGN TOKENS — Jakarta Beat Society
   Palette + type: poster refresh (Aug 2026), sourced from the
   2026 festival key visual. This file is the SINGLE control point
   for both — every component/page CSS reads colors and fonts only
   through the custom properties below, so a repaint is a one-file
   edit. Do not hardcode brand hex values or font-family names
   anywhere else.
   ============================================================ */
:root {
  /* ---- Color: base surfaces (dark theme, unchanged) ---- */
  --color-ink: #17100D;          /* deep ink / near-black base */
  --color-paper: #F1E7D2;        /* off-white text / light surface */

  /* ---- Color: poster accent palette (matched to key visual) ---- */
  --color-flame: #EA4319;        /* poster orange-red — primary, "BEAT" wordmark */
  --color-flame-deep: #B23310;
  --color-brass: #D9A538;        /* poster golden yellow, softened from the poster's #F5B700 -
                                     full-bleed screen sections at full saturation read as glare,
                                     not gold, in a way a small printed poster doesn't. Same hue,
                                     but desaturated (not just dimmed) for a muted/matte gold
                                     instead of an electric one. */
  --color-brass-deep: #7A5A00;
  --color-indigo: #1A2F5C;       /* poster blue, darkened — secondary dark surface */
  --color-green: #1E9E49;        /* poster green — cloud/blob shape + secondary accent */
  --color-green-deep: #146633;
  --color-sky: #1F62D6;          /* poster blue, full brightness — info-box tertiary accent */
  --color-sky-deep: #1B4F9E;
  --color-pink: #F754A8;         /* poster pink — "FREE EVENT" ribbon highlight */
  --color-pink-deep: #A82F6C;

  --color-muted-on-ink: #B7A88F;
  --color-muted-on-paper: #6E5D46;
  --color-muted-on-indigo: #A9BEDD;
  /* --color-brass and --color-sky are both too bright for the paper/indigo
     muted tones above (verified against WCAG AA 4.5:1) — dedicated pairs: */
  --color-muted-on-yellow: #4A3300;
  --color-muted-on-sky: #fff;

  /* Functional aliases used across components/pages CSS */
  --color-bg: var(--color-ink);
  --color-text: var(--color-paper);
  --color-primary: var(--color-flame);
  --color-primary-deep: var(--color-flame-deep);
  --color-accent: var(--color-brass);
  --color-accent-deep: var(--color-brass-deep);
  --color-secondary: var(--color-green);
  --color-secondary-deep: var(--color-green-deep);
  --color-tertiary: var(--color-sky);
  --color-tertiary-deep: var(--color-sky-deep);
  --color-highlight: var(--color-pink);
  --color-highlight-deep: var(--color-pink-deep);
  --color-surface-light: var(--color-paper);
  --color-surface-indigo: var(--color-indigo);

  /* ---- Type families ----
     Self-hosted, two families — @font-face lives in base/typography.css:
       --font-display: Ranchers (headline/sub-headline), single weight
         400 and already visually bold/blocky, so headings are set to
         font-weight:400 in typography.css to avoid a synthesized fake
         bold. File: /public/fonts/ranchers/ranchers-400.woff2.
       --font-body: Arimo (body copy), weights 400/700 + italic.
         Files: /public/fonts/arimo/arimo-{400,400-italic,700}.woff2. */
  --font-display: 'Ranchers', 'Arial Narrow', sans-serif;
  --font-body: 'Arimo', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* ---- Type scale (fluid, mobile-first) ---- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: clamp(1.15rem, 2.6vw, 1.55rem);
  --text-xl: clamp(1.4rem, 3.2vw, 1.9rem);
  --text-2xl: clamp(1.8rem, 4vw, 2.6rem);
  --text-3xl: clamp(2.1rem, 5vw, 3.6rem);
  --text-4xl: clamp(2.2rem, 5.5vw, 4rem);

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: clamp(4rem, 9vw, 7.5rem);

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 64px;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.25,.8,.25,1);
  --duration-fast: .2s;
  --duration-base: .3s;

  /* ---- Z-index scale ---- */
  --z-nav: 1000;
  --z-mobile-menu: 999;

  /* ---- Breakpoints (reference only — custom properties can't be
     used inside @media conditions; keep every @media rule in
     components/ and pages/ in sync with these three, per the brief):
       sm: 640px   md: 768px   lg: 1024px  */
}

@media (min-width: 768px) {
  :root { --nav-h: 80px; }
}