/* ============================================================
   BookedSolid — design-tokens.css  (PROPOSED, adapt then adopt)
   Dark-first theme. Locked brand palette: gold #C9933A, green #34C759, white.
   Everything here is a *usage* token — no new brand colors, only
   accessible derivations + a neutral ramp + one type & spacing scale.
   Adopt incrementally (see doc 13), screenshot-proof each step.
   ============================================================ */
:root{
  /* -- Font families (the ONLY two; delete stray Inter/SF Pro/system-ui) -- */
  --font-display: 'Space Grotesk','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-sans:    'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* -- Type scale (responsive via clamp: mobile→desktop; ~8 steps, nothing <12px) -- */
  --fs-display: clamp(2.375rem, 1.6rem + 3.2vw, 3.5rem);   /* 38 → 56 */
  --fs-h2:      clamp(1.875rem, 1.4rem + 2vw, 2.5rem);     /* 30 → 40 */
  --fs-h3:      clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem);    /* 24 → 28 */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 → 20 */
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
  --fs-small:   0.9375rem;                                 /* 15 */
  --fs-caption: 0.8125rem;                                 /* 13 (floor) */
  --fs-eyebrow: 0.75rem;                                   /* 12, ALL-CAPS only */

  --lh-tight: 1.08;  --lh-heading: 1.15;  --lh-body: 1.55;  --lh-article: 1.65;
  --tracking-display: -0.022em;  --tracking-h2: -0.02em;  --tracking-eyebrow: 0.08em;

  /* -- Spacing (8pt grid — use ONLY these) -- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --section-y: clamp(4rem, 3rem + 5vw, 6rem);   /* 64 → 96 section vertical padding */
  --container: 1200px;  --gutter: 24px;  --measure: 42rem; /* ~672px reading column */

  /* -- Brand (locked) -- */
  --gold: #C9933A;      --green: #34C759;
  --gold-glow: rgba(201,147,58,0.15);

  /* -- Accessible usage derivations (for LIGHT backgrounds only) -- */
  --gold-ink: #8B6914;      /* gold text on white = 5.09:1 AA ✓ */
  --green-ink: #1E7E34;     /* green text / white-on-green on light ✓ */
  --on-accent: #0A0A0B;     /* text ON gold/green fills = near-black, NEVER white */

  /* -- Theme surfaces (dark-first) -- */
  --bg: #0A0A0B;            /* app background */
  --surface-1: #141416;     /* raised dark surface */
  --surface-2: #1C1C1E;     /* card on dark */
  --surface-light: #F5F5F7; /* the ONE light-section surface (replace the 6 near-whites) */
  --white: #FFFFFF;

  /* -- Neutral text ramp (pick ONE system — Apple grays; delete Tailwind grays) -- */
  --text: #FFFFFF;                       /* primary on dark */
  --text-muted: rgba(255,255,255,0.62);  /* secondary on dark */
  --ink-900: #1D1D1F;   /* primary text on LIGHT sections */
  --ink-600: #48484A;   /* body on light */
  --ink-500: #6E6E73;   /* secondary on light (5.07:1 ✓) */
  --line: rgba(255,255,255,0.08);        /* hairline on dark */
  --line-light: #E5E5EA;                 /* hairline on light */

  /* -- Radii / shadow / motion -- */
  --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.20);
  --shadow-2: 0 8px 24px rgba(0,0,0,.28);
  --ease-out: cubic-bezier(0.0,0,0.2,1);
  --ease-in:  cubic-bezier(0.4,0,1,1);
  --dur: 250ms;
}

/* ---- Base element bindings (illustrative — map onto existing selectors) ---- */
h1,.h1{font-family:var(--font-display);font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--tracking-display);font-weight:700}
h2,.h2{font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--tracking-h2);font-weight:700}
h3,.h3{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:600}
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);background:var(--bg);color:var(--text)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;font-weight:600}

/* Buttons: gold/green fills carry NEAR-BLACK text, never white */
.btn-primary{background:var(--gold);color:var(--on-accent);border-radius:var(--radius-sm);
  padding:14px 24px;font-weight:700;font-size:var(--fs-body);min-height:48px;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.btn-primary:hover{box-shadow:var(--shadow-2)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}