/* ==========================================================================
   TOKENS — Oktoberfest at the Ranch
   Direction: Ranch Americana x Oktoberfest
   Single source of truth. Change values here, never in main.css.
   ========================================================================== */

:root {

  /* --- COLOR ------------------------------------------------------------
     Three carried over from the existing brand (ink / gold / ember),
     three added from the setting: kraft paper, Alpine County sagebrush,
     and the bonfire-hours night.
     --------------------------------------------------------------------- */

  --ink:        #1E1C1D;   /* brand near-black — body type on light grounds */
  --gold:       #E8BD00;   /* brand gold — beer, lantern light. Primary accent */
  --ember:      #E17E2A;   /* brand burnt orange — fire. Secondary accent */
  --kraft:      #E3D3B0;   /* warm kraft paper — the daylight ground */
  --sage:       #6B7A5A;   /* dry sagebrush — rules, labels, quiet UI */
  --night:      #17120F;   /* deep warm brown-black — the bonfire ground */

  /* Tints & shades, derived. Do not introduce new raw hex below this line. */
  --kraft-deep: #D4C097;   /* kraft, one step down — cards, insets */
  --night-soft: #241D18;   /* night, one step up — cards on dark */
  --ink-60:     rgba(30, 28, 29, 0.60);
  --kraft-70:   rgba(227, 211, 176, 0.70);
  --hairline:   rgba(107, 122, 90, 0.35);   /* sage at low alpha */
  --hairline-n: rgba(227, 211, 176, 0.22);  /* kraft at low alpha, for night */

  /* Semantic roles — sections switch these, components consume them.
     This is what makes the day-to-night scroll arc work. */
  --ground:     var(--kraft);
  --surface:    var(--kraft-deep);
  --type:       var(--ink);
  --type-quiet: var(--ink-60);
  --rule:       var(--hairline);
  --accent:     var(--ember);


  /* --- TYPE -------------------------------------------------------------
     Three roles. Bison is the character and is rationed deliberately —
     display sizes only, never body copy.
     --------------------------------------------------------------------- */

  --font-display: 'Bison', 'Oswald', Impact, sans-serif;
  --font-body:    'Questrial', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-util:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Scale — 1.25 major third, clamped for fluid response.
     Display steps run larger and tighter; Bison is condensed and can take it. */
  --t-hero:   clamp(4rem, 13vw, 11rem);
  --t-d1:     clamp(2.75rem, 7vw, 5.5rem);
  --t-d2:     clamp(2rem, 4.5vw, 3.25rem);
  --t-d3:     clamp(1.5rem, 3vw, 2rem);
  --t-lead:   clamp(1.125rem, 1.6vw, 1.375rem);
  --t-body:   1.0625rem;
  --t-small:  0.9375rem;
  --t-micro:  0.75rem;

  --lh-tight: 0.88;   /* display lockups */
  --lh-snug:  1.15;   /* headings */
  --lh-body:  1.6;    /* running copy */

  --tr-display: 0.01em;
  --tr-util:    0.16em;   /* utility caps — labels, times, eyebrows */


  /* --- SPACE ------------------------------------------------------------
     8pt system. Every margin, padding and gap resolves to one of these.
     --------------------------------------------------------------------- */

  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  --section-y: clamp(var(--s-8), 10vw, var(--s-10));


  /* --- LAYOUT ----------------------------------------------------------- */

  --measure:    68ch;    /* max line length for running copy */
  --width-page: 1200px;
  --width-text: 780px;
  --gutter:     clamp(var(--s-5), 5vw, var(--s-8));

  --radius:     2px;     /* near-square. Ranch signage, not app UI */
  --radius-pill: 999px;  /* fully rounded — buttons */
  --border:     1px solid var(--rule);


  /* --- MOTION -----------------------------------------------------------
     Softened: gentle ease-out with a little more dwell time. */

  --ease:      cubic-bezier(0.33, 1, 0.68, 1);   /* easeOutCubic — soft settle */
  --ease-soft: cubic-bezier(0.40, 0, 0.20, 1);   /* gentle both-ways — menus */
  --dur-fast:  220ms;
  --dur:       420ms;
  --dur-slow:  760ms;
}


/* --- SECTION GROUNDS ----------------------------------------------------
   The signature device. The page walks from kraft daylight through golden
   hour to bonfire night, tracking the event's own 1pm-to-late arc.
   Apply one of these to a <section> and everything inside inherits.
   ----------------------------------------------------------------------- */

.ground-day {
  --ground: var(--kraft);
  --surface: var(--kraft-deep);
  --type: var(--ink);
  --type-quiet: var(--ink-60);
  --rule: var(--hairline);
  --accent: var(--ember);
}

.ground-golden {
  --ground: var(--ember);
  --surface: var(--gold);
  --type: var(--ink);
  --type-quiet: rgba(30, 28, 29, 0.72);
  --rule: rgba(30, 28, 29, 0.28);
  --accent: var(--ink);
}

.ground-night {
  --ground: var(--night);
  --surface: var(--night-soft);
  --type: var(--kraft);
  --type-quiet: var(--kraft-70);
  --rule: var(--hairline-n);
  --accent: var(--gold);
}

.ground-day,
.ground-golden,
.ground-night {
  background: var(--ground);
  color: var(--type);
}


/* --- ACCESSIBILITY FLOOR ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}