/* ============================================================
   SHARP DESIGN & BUILD — DESIGN TOKENS
   The single source of cohesion. Change a value here, it ripples
   through every section. Palette: slate & gray marble (NOT black),
   white-marble breaths, terracotta regrips.
   ============================================================ */
:root {
  /* — Brand base: neutral charcoal (the dominant canvas) —
     Neutralized Jun 19: prior tokens still carried a faint cool lean (B > R by
     ~2). These are flattened to a TRUE neutral charcoal with a whisper of warmth
     (R ≥ G ≥ B, ~1pt) at the same luminance — reads as warm-neutral stone, NOT
     blue, NOT green, NOT clinical-gray. */
  --ink-900: #191918;   /* deepest charcoal — primary dark canvas */
  --ink-850: #1d1d1c;   /* subtle internal shift within a dark run */
  --ink-800: #232322;   /* raised dark surfaces / cards */
  --ink-700: #2d2d2b;   /* dark seams, borders on dark */
  --slate-600: #454442;
  --slate-500: #5e5d5a;
  --slate-400: #868682; /* muted text on dark */
  --slate-300: #afaeaa;

  /* — Marble breath: warm off-white / stone — */
  --marble-50: #f5f2ec; /* primary light "breath" surface */
  --marble-100: #ece7dd;
  --cream: #f0e9dd;      /* FAQ cream */
  --stone-200: #ddd6ca;  /* light borders */
  --stone-500: #8c8678;  /* muted text on light */
  --stone-700: #44403a;  /* body text on light */

  /* — Terracotta: the regrip / action accent (warm rust, NOT red) — */
  --terracotta: #c0613d;
  --terracotta-deep: #a44e2f; /* hover / active */
  --terracotta-soft: #d98e6e; /* tints */
  --terracotta-tint: rgba(192, 97, 61, 0.12);

  /* — Semantic text — */
  --text-on-dark: #ece9e3;
  --text-on-dark-muted: var(--slate-400);
  --text-on-light: var(--stone-700);
  --text-on-light-muted: var(--stone-500);

  /* — Type — */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display-alt-bodoni: 'Bodoni Moda', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display-alt-instrument: 'Instrument Serif', 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans: var(--font-body);

  /* fluid type scale — clamp(min, fluid, max) */
  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.875rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.22vw, 1.08rem);  /* body */
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
  --step-4:  clamp(2.5rem, 1.85rem + 3.1vw, 4.4rem);
  --step-5:  clamp(3.1rem, 2rem + 5.4vw, 6.25rem);       /* display (section closers: contact) */
  /* The single LARGEST rung on the page — the one "really big one" (DUMP §14).
     Used ONLY by the hero title and the breath line so the page has ONE loudest
     size, not three competing bespoke clamps (was hero 8.05 / breath 11 / step-5). */
  --step-display: clamp(4.7rem, 8vw, 8.05rem);

  /* Eyebrow/label tracking — collapsed to TWO deliberate rungs (R3 holistic §14:
     the eyebrow ran at ~12 scattered values site-wide; same intent, different
     tracking per section = the "things that should be consistent aren't" tell).
     Every *__eyebrow / .eyebrow points at one of these two; large display
     headings keep their own intentional negative tracking. */
  --tracking-label: 0.2em;        /* standard uppercase eyebrows / labels */
  --tracking-label-wide: 0.3em;   /* the rare emphatic / wide-set eyebrow */
  --leading-display: 0.98;
  --leading-body: 1.62;

  /* — Space (fluid rhythm) — */
  --space-2xs: clamp(0.35rem, 0.3rem + 0.2vw, 0.5rem);
  --space-xs:  clamp(0.5rem, 0.42rem + 0.3vw, 0.75rem);
  --space-s:   clamp(0.85rem, 0.7rem + 0.5vw, 1.15rem);
  --space-m:   clamp(1.25rem, 1rem + 1vw, 1.85rem);
  --space-l:   clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --space-xl:  clamp(3rem, 2rem + 4vw, 5.5rem);
  /* — Section vertical rhythm: a 3-rung shared scale (DUMP §17 "feels proper").
     Mirrors the type philosophy — deliberate exceptions, not 14 bespoke clamps. */
  --section-pad:        clamp(3.25rem, 2rem   + 4.4vw, 5.25rem); /* DEFAULT — tightened so sections read in ~1 screen (David 06.21) */
  --section-pad-tight:  clamp(2.5rem,  1.8rem + 3vw,   3.6rem);  /* dense/connective bands */
  --section-pad-breath: clamp(4.5rem,  3rem   + 6.5vw, 7rem);    /* the true exhale sections ONLY */
  --section-pad-y: var(--section-pad);                          /* repointed dead token */
  --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);   /* page side padding */
  --measure: 64ch;     /* readable line length */
  --maxw: 1280px;
  --maxw-wide: 1560px;

  /* — Motion — */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 0.35s;
  --dur: 0.6s;
  --dur-slow: 1s;

  /* — Misc — */
  --radius: 2px;        /* "Sharp" — crisp, minimal radius */
  /* One sanctioned card radius. Brand is named "Sharp" — cards stay crisp.
     Replaces the prior drift of 8/6/4/10px hardcoded per-card radii (R3 holistic
     §AI-tells: five soft radii against a 2px identity = the quiet "default card"
     tell). The --seam-radius:26px below remains the ONLY large-radius exception. */
  --radius-card: 3px;
  /* Depth-seam sheet look (the ONE allowed exception to --radius:2px) — the
     rounded top + soft lift that makes a light section read as stacked drafting
     paper sliding over the ink section beneath it (DUMP §16 depth/aliveness). */
  --seam-radius: 26px;
  --seam-shadow: 0 -22px 56px -30px rgba(0, 0, 0, 0.55);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --hairline-dark: rgba(0, 0, 0, 0.12);
  --nav-h: 4.75rem;
}