/* ==========================================================================
   Yujverse — Design Tokens (single source of truth)
   Palette is taken verbatim from the brand guide (YUJ SLIDES.pdf).
   RULE: components reference these variables — never hardcode hex values.
   ========================================================================== */

:root {
  /* ---- Brand palette (exact brand-guide hexes) ---- */
  --clay:        #d8a684;  /* warm tan — primary warm neutral */
  --teal-deep:   #609182;  /* deep teal-green — secondary accent */
  --brick:       #741f12;  /* deep maroon — the wordmark colour */
  --mint:        #67bea2;  /* bright teal — the infinity mark */
  --gold:        #ffd9a1;  /* light gold — the hand mark */
  --cream:       #f7e4cd;  /* core cream */
  --sand:        #dbb295;  /* sand */
  --terracotta:  #c98c63;  /* terracotta / brown section bg */
  --bindi:       #c0392b;  /* the red focus dot */

  /* ---- Extended tints/shades (derived, used sparingly) ---- */
  --cream-bg:    #faf2e4;  /* page background — a touch lighter than --cream */
  --cream-warm:  #f3e3cb;  /* alt section background */
  --brick-deep:  #5a160c;  /* hover / pressed on brick */
  --teal-ink:    #4a7264;  /* darker teal for text on light */
  --gold-soft:   #ffe9c6;

  /* ---- Semantic roles ---- */
  --bg:          var(--cream-bg);
  --surface:     #ffffff;
  --surface-2:   #fffaf2;     /* warm white card alt */
  --ink:         #2b1d17;     /* primary text — warm near-black */
  --ink-soft:    #5d4a3f;     /* secondary text */
  --ink-mute:    #8a7565;     /* tertiary text / captions */
  --line:        #e7d8c2;     /* hairline borders */
  --line-soft:   #f0e6d6;

  --primary:     var(--brick);
  --primary-hover: var(--brick-deep);
  --accent:      var(--teal-deep);
  --accent-2:    var(--mint);
  --focus:       var(--bindi);

  /* ---- Dark surfaces (hero / featured bands) ---- */
  --dark:        #20120c;     /* deep warm brown-black */
  --dark-2:      #2d1a10;
  --on-dark:     #f7e4cd;     /* cream text on dark */
  --on-dark-mute:#cdb49a;

  /* ---- Typography ---- */
  --font-display: 'Aubrey', 'Sahitya', Georgia, 'Times New Roman', serif;
  --font-serif:   'Sahitya', Georgia, 'Times New Roman', serif;
  --font-accent:  'Shadeerah Demo', 'Lato', system-ui, sans-serif;
  --font-body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-display:  clamp(2.6rem, 1.6rem + 4.4vw, 5rem);
  --fs-h1:       clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h2:       clamp(1.7rem, 1.3rem + 1.7vw, 2.6rem);
  --fs-h3:       clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --fs-lead:     clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-body:     1rem;        /* 16px base */
  --fs-sm:       0.875rem;
  --fs-xs:       0.75rem;
  --fs-eyebrow:  0.8rem;

  --lh-tight:    1.12;
  --lh-snug:     1.3;
  --lh-body:     1.65;
  --measure:     60ch;        /* ideal reading width */

  /* ---- Spacing scale (8pt-ish) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;  --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;
  --space-9: 6rem;    --space-10: 8rem;
  --container:   1200px;
  --container-narrow: 820px;
  --section-y:   clamp(3.5rem, 2rem + 6vw, 7rem);  /* vertical section rhythm */
  --gutter:      clamp(1.1rem, 0.6rem + 1.6vw, 2rem);

  /* ---- Radius ---- */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  30px;
  --radius-full: 9999px;

  /* ---- Shadows (warm-tinted, soft) ---- */
  --shadow-xs: 0 1px 2px rgba(70,40,20,.05);
  --shadow-sm: 0 2px 8px -2px rgba(70,40,20,.10);
  --shadow-md: 0 12px 30px -12px rgba(70,40,20,.18);
  --shadow-lg: 0 28px 60px -20px rgba(70,40,20,.26);
  --shadow-glow: 0 0 0 1px rgba(116,31,18,.06), 0 18px 40px -18px rgba(116,31,18,.22);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --dur-fast:   .18s;
  --dur:        .35s;
  --dur-slow:   .6s;

  /* ---- Layering ---- */
  --z-nav: 1000;
  --z-drawer: 1100;
  --z-toast: 1200;

  --nav-h: 76px;
}