/* ============================================================
   RTS BRAND TOKENS — single source of truth.
   A rebrand should only ever need to touch this file.

   Light theme, classic RTS palette: white ground, brand yellow
   #FFF100 + brown #6B4F34, light grey section zones, dark ink
   panels for IG-poster accent moments.

   Contrast rules (WCAG vs white / #141414):
   - yellow on white: 1.2:1  → FILL/HIGHLIGHT ONLY, never text/stroke on --bg
   - brown  on white: 7.5:1  → text-safe emphasis (AAA)
   - ink on yellow:  15.7:1  → yellow buttons carry ink text
   - yellow on ink:  15.7:1  → dark panels may use yellow text/accents
   ============================================================ */

:root {
  /* ---- Brand primitives (the only hardcoded brand values) ---- */
  --rts-yellow: #FFF100;
  --rts-brown:  #6B4F34;
  --rts-ink:    #141414;
  --rts-paper:  #FFFFFF;

  /* ---- Semantic colors (everything below derives from above) ---- */
  --bg:           var(--rts-paper);
  --zone:         color-mix(in srgb, var(--rts-ink) 5%, var(--rts-paper));   /* light grey section bands */
  --surface:      color-mix(in srgb, var(--rts-ink) 3%, var(--rts-paper));
  --surface-2:    color-mix(in srgb, var(--rts-ink) 8%, var(--rts-paper));
  --ink:          var(--rts-ink);
  --ink-dim:      color-mix(in srgb, var(--rts-ink) 60%, var(--rts-paper));
  --ink-faint:    color-mix(in srgb, var(--rts-ink) 36%, var(--rts-paper));
  --line:         color-mix(in srgb, var(--rts-ink) 13%, var(--rts-paper));
  --line-strong:  color-mix(in srgb, var(--rts-ink) 30%, var(--rts-paper));

  /* Yellow — fill/highlight only on light backgrounds (1.2:1 as text) */
  --accent:       var(--rts-yellow);
  --on-accent:    var(--rts-ink);
  /* Brown — the text-safe accent; also a fill with white text */
  --accent-deep:      var(--rts-brown);
  --on-accent-deep:   var(--rts-paper);

  /* Dark panels (stats band, footer) — the IG-poster heritage moments */
  --dark:          var(--rts-ink);
  --on-dark:       var(--rts-paper);
  --on-dark-dim:   color-mix(in srgb, var(--rts-paper) 62%, var(--rts-ink));
  --on-dark-accent: var(--rts-yellow); /* yellow text IS safe on ink (15.7:1) */
  --dark-line:     color-mix(in srgb, var(--rts-paper) 16%, var(--rts-ink));

  /* ---- Typography ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Fluid display scale — poster type on desktop, still loud on 375px */
  --text-hero:  clamp(2.9rem, 11.5vw, 8.5rem);
  --text-h1:    clamp(2.4rem, 7.5vw, 5.5rem);
  --text-h2:    clamp(1.8rem, 5vw, 3.4rem);
  --text-h3:    clamp(1.2rem, 3vw, 1.6rem);
  --text-body:  clamp(1rem, 1.1vw, 1.125rem);
  --text-small: 0.875rem;
  --text-tiny:  0.75rem;

  --track-display: -0.03em;
  --track-label:    0.18em;

  /* ---- Space / shape ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --container: 72rem;

  /* ---- Motion ---- */
  --ease-out-hard: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 360ms;
  --dur-slow: 700ms;
}