/* ==========================================================================
   KM MERCANTILE CO — Design Tokens (single source of truth)
   Warm-tinted OKLCH palette · 4pt spacing · fluid type scale
   ========================================================================== */

:root {
  /* --- Color: crisp premium base, cool-neutral ink, confident accents ------
     Light base à la Branded Bills; navy + brick-red accents à la Kimes Ranch.
     Warmth comes from the PHOTOGRAPHY, so neutrals stay clean (barely tinted). */
  --ink:          oklch(0.23 0.010 255);  /* charcoal near-black — body type   */
  --ink-strong:   oklch(0.18 0.012 255);  /* headings                          */
  --muted:        oklch(0.46 0.012 255);  /* secondary text                    */
  --faint:        oklch(0.58 0.010 255);  /* captions, meta                    */

  --canvas:       oklch(0.976 0.004 250); /* page ground — clean off-white     */
  --cream:        oklch(0.992 0.002 250); /* raised surface / cards            */
  --sand:         oklch(0.945 0.006 250); /* subtle alt band                   */
  --hairline:     oklch(0.905 0.006 255); /* borders, rules                    */

  --ink-deep:     oklch(0.185 0.014 258); /* dark cinematic sections / footer  */
  --ink-deeper:   oklch(0.145 0.014 258);
  --noir:         oklch(0.135 0.003 95);   /* #080807 warm near-black (bymonolog) */
  --noir-2:       oklch(0.175 0.003 95);
  --on-noir:      oklch(0.92 0.004 95);     /* #E8E8E3 */
  --on-noir-mut:  oklch(0.62 0.004 95);

  --navy:         oklch(0.360 0.078 254); /* secondary accent — navy           */
  --navy-deep:    oklch(0.300 0.070 254);
  --red:          oklch(0.520 0.170 27);  /* PRIMARY pop accent — brick red    */
  --red-deep:     oklch(0.455 0.160 27);

  /* On-color foregrounds */
  --on-dark:      oklch(0.975 0.004 250);
  --on-red:       oklch(0.985 0.006 60);

  /* --- Typography: bymonolog-faithful — refined neo-grotesque + mono labels
     Khteka→Switzer (workhorse), Animo→Cabinet Grotesk (display), Suisse Mono→Spline Sans Mono. */
  --font-display: "Cabinet Grotesk", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Switzer", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-impact:  "Anton", "Cabinet Grotesk", sans-serif;  /* huge poster-condensed moments */

  /* Fluid modular scale (~1.25 on marketing headings) */
  --fs-label:   0.7rem;                                   /* mono micro-labels */
  --fs-sm:      0.875rem;
  --fs-body:    1.0625rem;                                /* 17px base body    */
  --fs-lg:      clamp(1.20rem, 1.05rem + 0.7vw, 1.45rem);
  --fs-h3:      clamp(1.45rem, 1.20rem + 1.1vw, 1.95rem);
  --fs-h2:      clamp(2.05rem, 1.55rem + 2.3vw, 3.30rem);
  --fs-h1:      clamp(2.60rem, 1.70rem + 4.3vw, 5.25rem);
  --fs-display: clamp(3.10rem, 1.60rem + 6.8vw, 7.50rem); /* hero headline     */

  --lh-tight:   1.02;
  --lh-snug:    1.08;
  --lh-body:    1.6;
  --tracking-label: 0.18em;   /* tracked-out mono labels */
  --tracking-tight: -0.025em; /* large display           */

  /* --- Spacing: 4pt scale, semantic names ---------------------------------- */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: clamp(96px, 7vw, 160px);   /* section rhythm on large screens */

  /* --- Radius: restrained, crisp (heritage, not bubbly) -------------------- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* --- Layout -------------------------------------------------------------- */
  --measure:    68ch;                     /* prose line length cap            */
  --container:  1220px;
  --gutter:     clamp(20px, 5vw, 64px);
  --header-h:   68px;

  /* --- Motion: exponential ease-out, no bounce ----------------------------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   520ms;

  /* --- Elevation: soft, warm-tinted (no generic gray drop shadow) ---------- */
  --shadow-sm: 0 1px 2px oklch(0.30 0.03 60 / 0.06),
               0 2px 6px oklch(0.30 0.03 60 / 0.05);
  --shadow-md: 0 4px 14px oklch(0.30 0.04 55 / 0.10),
               0 1px 3px oklch(0.30 0.04 55 / 0.06);
  --shadow-lg: 0 18px 48px oklch(0.28 0.05 52 / 0.16);
}