/* ============================================================
   THIRST WEBSITE — Design Tokens
   Source: brand/tokens.css
   Single source of truth for every visual decision.
   ============================================================ */
:root {
  /* ---- COLORS ---- */
  --red:         #FF0000;
  --black:       #000000;
  --near-black:  #0A0A0A;
  --dark-grey:   #1A1A1A;
  --mid-grey:    #808080;
  --light-grey:  #E5E5E5;
  --white:       #F5F0EB;
  --pure-white:  #FFFFFF;

  /* ---- TYPOGRAPHY — Font Families ---- */
  --font-cond:   'SuisseIntlCond', 'Bebas Neue', 'Helvetica Neue', sans-serif;
  --font-body:   'SuisseIntl', 'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --font-mono:   'SuisseIntlMono', 'Space Mono', 'Courier New', monospace;
  --font-neue:   'SuisseNeue', 'IBM Plex Sans', sans-serif;
  --font-serif:  'Georgia', 'Times New Roman', serif;

  /* ---- TYPOGRAPHY — Size Scale (fluid) ---- */
  --text-hero:       clamp(72px, 15vw, 220px);
  --text-display:    clamp(56px, 10vw, 120px);
  --text-h1:         clamp(48px, 7vw, 96px);
  --text-h2:         clamp(40px, 6vw, 64px);
  --text-h3:         clamp(28px, 4vw, 48px);
  --text-h4:         clamp(20px, 2.5vw, 32px);
  --text-body-lg:    clamp(18px, 1.8vw, 24px);
  --text-body:       clamp(16px, 1.4vw, 20px);
  --text-caption:    clamp(13px, 1.1vw, 16px);
  --text-micro:      12px;
  --text-nano:       8px;

  /* ---- TYPOGRAPHY — Tracking ---- */
  --tracking-tight:     -0.04em;
  --tracking-snug:      -0.02em;
  --tracking-normal:     0;
  --tracking-wide:       0.06em;
  --tracking-wider:      0.12em;
  --tracking-widest:     0.3em;

  /* ---- TYPOGRAPHY — Line Heights ---- */
  --leading-none:    0.82;
  --leading-tight:   0.95;
  --leading-snug:    1.05;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  /* ---- SPACING ---- */
  --space-xs:     8px;
  --space-sm:     16px;
  --space-md:     24px;
  --space-lg:     48px;
  --space-xl:     72px;
  --space-2xl:    120px;
  --space-3xl:    200px;

  /* ---- LAYOUT ---- */
  --max-width:       1200px;
  --max-width-text:  800px;
  --section-pad-y:   140px;
  --section-pad-x:   80px;

  /* ---- TRANSITIONS ---- */
  --ease-smooth:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-dramatic: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   0.3s;
  --duration-normal: 0.6s;
  --duration-slow:   1.2s;

  /* ---- FILM GRAIN ---- */
  --grain-opacity-local:  0.03;
  --grain-opacity-global: 0.04;
  --grain-blend:          screen;

  /* ---- Z-INDEX SCALE ---- */
  --z-grain:     1;
  --z-content:   2;
  --z-nav:       1000;
  --z-overlay:   9999;
}