/* Obsidia starter tokens: colour (OKLCH) + fluid type and space, 360 → 1440 px.
   Desktop ends land on the design manual's scales (space 8·16·24·40·64·96·160,
   type 14·18·22·28·40·64·104). Change --brand-h / --accent-h per client, then run
   scripts/audit.js on the page. Numbers are explained in ../SKILL.md. */
:root {
  color-scheme: light dark;
  --brand-h: 65;   /* hue the neutrals lean toward (warm 50-80, cool 250-265) */
  --accent-h: 32;  /* one accent; check the gamut table in SKILL.md before raising chroma */

  /* neutrals: near-white L .97 C ≈ .008, ink L ≈ .20 (award-site medians) */
  --n-0:   oklch(.985 .004 var(--brand-h));
  --n-50:  oklch(.970 .008 var(--brand-h));
  --n-100: oklch(.940 .010 var(--brand-h));
  --n-200: oklch(.900 .012 var(--brand-h));
  --n-300: oklch(.830 .014 var(--brand-h));
  --n-400: oklch(.710 .016 var(--brand-h));
  --n-500: oklch(.555 .018 var(--brand-h));
  --n-600: oklch(.445 .018 var(--brand-h));
  --n-700: oklch(.370 .016 var(--brand-h));
  --n-800: oklch(.275 .014 var(--brand-h));
  --n-900: oklch(.200 .012 var(--brand-h));
  --n-950: oklch(.145 .006 var(--brand-h));

  /* accent ramp: solid fill at .56-.66, link text at ≤ .50 on light */
  --a-100: oklch(.940 .030 var(--accent-h));
  --a-300: oklch(.820 .090 var(--accent-h));
  --a-500: oklch(.660 .180 var(--accent-h));
  --a-600: oklch(.560 .165 var(--accent-h));
  --a-700: oklch(.500 .140 var(--accent-h));
  --a-900: oklch(.370 .100 var(--accent-h));

  /* semantic (light | dark) */
  --bg:         light-dark(var(--n-50),  var(--n-950));
  --surface:    light-dark(var(--n-100), oklch(.20 .008 var(--brand-h)));
  --ink:        light-dark(var(--n-900), oklch(.95 .006 var(--brand-h)));
  --ink-muted:  light-dark(var(--n-600), oklch(.80 .012 var(--brand-h)));  /* dark mode needs L ≈ .80 (APCA) */
  --line:       light-dark(var(--n-200), oklch(.30 .012 var(--brand-h)));  /* decorative only */
  --line-ctl:   light-dark(oklch(.62 .016 var(--brand-h)), oklch(.52 .016 var(--brand-h))); /* ≥ 3:1 */
  --accent:     light-dark(var(--a-600), oklch(.77 .12 var(--accent-h)));
  --accent-ink: light-dark(oklch(.99 .004 var(--accent-h)), var(--n-950));
  --link:       light-dark(var(--a-700), oklch(.82 .09 var(--accent-h)));
  --focus:      var(--accent);
  --tint:       color-mix(in oklch, var(--accent) 10%, var(--bg));

  /* type: desktop 14·18·22·28·40·64·104, mobile ends from award-site medians */
  --t-xs:  clamp(0.8125rem, 0.7917rem + 0.0926vw, 0.875rem);   /* 13 → 14 */
  --t-base:clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);      /* 16 → 18  body */
  --t-md:  clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem); /* 18 → 22 */
  --t-lg:  clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);  /* 22 → 28 */
  --t-xl:  clamp(1.75rem, 1.5rem + 1.1111vw, 2.5rem);    /* 28 → 40 */
  --t-2xl: clamp(2.25rem, 1.6667rem + 2.5926vw, 4rem);     /* 36 → 64 */
  --t-3xl: clamp(2.75rem, 1.5rem + 5.5556vw, 6.5rem);    /* 44 → 104 display */
  --lh-body: 1.55; --lh-tight: 1.25; --lh-display: .95;
  --track-display: -.025em; --track-caps: .08em;
  --measure: 62ch;

  /* space: desktop 8·16·24·40·64·96·160 */
  --s1: .5rem;                                       /*  8 */
  --s2: clamp(0.75rem, 0.6667rem + 0.3704vw, 1rem);         /* 12 → 16 */
  --s3: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);         /* 16 → 24 */
  --s4: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);     /* 24 → 40 */
  --s5: clamp(2.5rem, 2rem + 2.2222vw, 4rem);          /* 40 → 64 */
  --s6: clamp(3.5rem, 2.6667rem + 3.7037vw, 6rem);        /* 56 → 96 */
  --s7: clamp(4.5rem, 2.6667rem + 8.1481vw, 10rem);      /* 72 → 160 */
  --gutter: clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);   /* 16 → 40 */
  --section-y: var(--s7);
  --wrap: 90rem;
  --radius: .5rem;
}

html { background: var(--bg); color: var(--ink); font-size: 100%; }
body { font-size: var(--t-base); line-height: var(--lh-body); }
h1, h2, .display { line-height: var(--lh-display); letter-spacing: var(--track-display); text-wrap: balance; }
p { max-inline-size: var(--measure); text-wrap: pretty; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.section { padding-block: var(--section-y); padding-inline: var(--gutter); }
.wrap { max-inline-size: var(--wrap); margin-inline: auto; }
.stack > * + * { margin-block-start: var(--flow, var(--s3)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }