/* ----------------------------------------------------------------------------
   TVLDays · Design tokens
   Source of truth. Referenced everywhere else.
   Mirrors Part 6 of wireframe-copy-deck.md — keep in sync.
   ---------------------------------------------------------------------------- */

:root {
  /* -------------------------------------------------------------------------
     COLORS — Brand accents (shared across all themes)
     ------------------------------------------------------------------------- */
  --marquee:       #82204A;
  --marquee-deep:  #5C1434;
  --marquee-light: #B94A74;
  --marquee-glow:  #D36890;

  --amber:         #D39734;
  --amber-warm:    #E8BF77;
  --amber-deep:    #A87D3D;

  --cue:           #8F99FB;
  --cue-ui:        #6172E8;   /* darker cue — use on light grounds */

  --espresso:      #2A231D;

  /* -------------------------------------------------------------------------
     COLORS — Grounds (light/bone family — the site's base)
     ------------------------------------------------------------------------- */
  --bg:            #EFEBE3;   /* bone · page ground */
  --bg-lift:       #F5F2EB;   /* bone-lift · section tonal bump */
  --bg-deep:       #E1DCCE;   /* cream-deep · deepest warm ground */
  --bg-nav:        #E8E3D6;   /* nav bar */
  --border:        #D5CDBA;   /* dividers, input borders */
  --border-soft:   #E1DCCE;

  /* -------------------------------------------------------------------------
     COLORS — Text on light ground
     ------------------------------------------------------------------------- */
  --text:          #2A231D;
  --text-soft:     #5A4E42;
  --text-wash:     #8A7E72;
  --text-dim:      #B3A796;

  /* -------------------------------------------------------------------------
     COLORS — Charcoal theme (dark product vignettes only, never page ground)
     ------------------------------------------------------------------------- */
  --vig-bg:        #131315;
  --vig-bg-lift:   #1C1C1F;
  --vig-bg-2:      #232328;
  --vig-bg-deep:   #0B0B0D;
  --vig-border:    #2B2B30;
  --vig-text:      #F5EFE2;
  --vig-text-soft: #b5a89a;

  /* -------------------------------------------------------------------------
     COLORS — Semantic (status pips, tags, alerts)
     ------------------------------------------------------------------------- */
  --sem-show:       #3E8E3E;   /* green · show day */
  --sem-travel:     #3A5FAE;   /* blue · travel day */
  --sem-off:        #8A7E72;   /* grey · off day */
  --sem-rehearsal:  #82204A;   /* marquee · rehearsal */
  --sem-production: #A87D3D;   /* amber-deep · production */
  --sem-press:      #8A4D8A;   /* press */
  --sem-alert:      #B84A22;
  --ok:             #6FB86F;

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  --font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
  --font-serif:   'Fraunces', 'Playfair Display', Georgia, serif;   /* italic 400 only */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display — hero headlines always use -6deg skew via a utility class */
  --fs-display-xl: clamp(56px, 10vw, 112px);
  --fs-display-l:  clamp(40px, 7vw, 72px);
  --fs-display-m:  clamp(32px, 4.5vw, 48px);

  /* Accent (Fraunces italic) */
  --fs-kicker-l: 28px;
  --fs-kicker-m: 20px;

  /* Body */
  --fs-body-l: clamp(18px, 1.4vw, 20px);
  --fs-body-m: 16px;
  --fs-body-s: 15px;

  /* Label */
  --fs-label: 13px;
  --ls-label: 0.08em;

  /* Line heights */
  --lh-display: 1.0;
  --lh-body:    1.6;
  --lh-tight:   1.2;

  /* Letter spacing */
  --ls-display-xl: -0.03em;
  --ls-display-l:  -0.025em;
  --ls-display-m:  -0.02em;
  --ls-display:    -0.02em;

  /* -------------------------------------------------------------------------
     SPACING SCALE
     ------------------------------------------------------------------------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 120px;   /* section padding · default */
  --s-11: 160px;   /* section padding · generous (CTA closer) */

  /* -------------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------------- */
  --max-content: 1200px;
  --gutter:      24px;
  --gutter-mobile: 20px;

  --nav-h:       72px;
  --nav-h-sticky: 56px;

  /* Radii */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* -------------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --t-fast:   150ms;
  --t-normal: 300ms;
  --t-slow:   600ms;
  --t-scroll: 1200ms;

  --stagger-tight:  80ms;
  --stagger-normal: 120ms;
  --stagger-loose:  200ms;

  /* -------------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(42, 35, 29, 0.06);
  --shadow-md:  0 4px 16px rgba(42, 35, 29, 0.08);
  --shadow-lg:  0 16px 48px rgba(42, 35, 29, 0.12);
  --shadow-xl:  0 32px 64px rgba(42, 35, 29, 0.16);
}

/* Respect user's motion preference — disables decorative animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:   0ms;
    --t-normal: 0ms;
    --t-slow:   0ms;
    --t-scroll: 0ms;
  }
}