/* Hallmark · tokens · theme: custom (tuned) · vibe: "austere, precise, quiet daylight, one warm sun"
 * paper: oklch(97.2% 0.002 265) · accent: oklch(76% 0.15 70) (sun) + oklch(56% 0.19 256) (focus only)
 * display + body: system SF Pro stack · axes: light / system-native / warm (neutral UI, amber sun)
 *
 * Every colour, font, space, size, radius, easing and duration used by
 * styles.css and solar.js lives here. Pages reference tokens by name only.
 * Loaded with its own <link> before styles.css (parallel fetch, no @import chain).
 */

:root {
  color-scheme: light dark;

  /* ---- Colour · light (default) ------------------------------------ */
  --color-paper:         oklch(97.2% 0.002 265);  /* page ground, ~#f5f6f7 */
  --color-surface:       oklch(99.6% 0.001 265);  /* grouped list material */
  --color-surface-hover: oklch(96.2% 0.003 265);
  --color-surface-press: oklch(93.4% 0.004 265);
  --color-ink:           oklch(21.8% 0.005 265);  /* names, labels. 16:1 on paper */
  --color-ink-2:         oklch(51% 0.009 265);    /* secondary text. 5.3:1 on paper */
  --color-ink-3:         oklch(62% 0.007 265);    /* chevrons, glyph tertiary. 3.6:1 on surface */
  --color-rule:          oklch(90% 0.004 265);    /* inset separators, doc rules */
  --color-orbit:         oklch(85% 0.004 265);    /* orrery hairlines */
  --color-planet:        oklch(46% 0.008 265);    /* orrery bodies */
  --color-sun:           oklch(76% 0.15 70);      /* the one warm note */
  --color-focus:         oklch(56% 0.19 256);     /* :focus-visible ring only */
  --color-selection:     oklch(88% 0.06 256);

  /* ---- Type ---------------------------------------------------------- */
  /* Austere tone: the system face IS the design. On Apple platforms this
     resolves to SF Pro Display / Text with optical sizing; elsewhere to
     the platform's native UI sans. No webfont, no network, no CLS. */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI Variable Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --weight-body: 400;
  --weight-strong: 600;
  --weight-display: 700;

  --text-sm:    0.875rem;   /* 14px  legal links, meta */
  --text-base:  1.0625rem;  /* 17px  body, list rows */
  --text-md:    1.3125rem;  /* 21px  doc subheads */
  --text-xl:    clamp(2.25rem, 3vw + 1.4rem, 3.5rem);   /* doc titles, 404 title */
  --text-display: clamp(2.75rem, 3.2vw + 2.5rem, 5.5rem); /* the name */
  --text-numeral: clamp(5rem, 12vw + 1rem, 9rem);        /* 404 numeral, <= 12ch single token */

  --leading-display: 1.04;
  --leading-body: 1.47;
  --tracking-display: -0.028em;
  --tracking-title: -0.022em;
  --tracking-body: -0.01em;

  /* ---- Space · 4pt scale -------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --gutter: clamp(1rem, 4.5vw, 4rem);
  --page-max: 67.5rem;     /* 1080px */
  --list-max: 26rem;
  --doc-max: 43.25rem;     /* ~692px reading column */
  --row-height: 3.25rem;   /* 52px, above the 44px touch floor */
  --touch-min: 2.75rem;    /* 44px minimum hit target for text links */
  --icon-size: 1.25rem;

  /* ---- Shape --------------------------------------------------------- */
  --radius-group: 1.125rem;
  --radius-focus: 0.375rem;
  --radius-pill: 999px;
  --rule-hairline: 1px;

  /* ---- Motion -------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* long-tail deceleration */
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-fade: 600ms;
  --dur-reveal-short: 700ms;
  --dur-reveal: 800ms;
  --dur-reveal-long: 900ms;
  --dur-reduced: 150ms;

  /* ---- Layers -------------------------------------------------------- */
  --z-base: 1;
  --z-raised: 10;
}

/* ---- Colour · dark (follows the OS, like the platform it quotes) ------- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:         oklch(14.5% 0.004 265);
    --color-surface:       oklch(21.5% 0.005 265);  /* elevation = lighter */
    --color-surface-hover: oklch(25% 0.006 265);
    --color-surface-press: oklch(29% 0.007 265);
    --color-ink:           oklch(96.5% 0.003 265);
    --color-ink-2:         oklch(72% 0.008 265);
    --color-ink-3:         oklch(58% 0.007 265);
    --color-rule:          oklch(32% 0.006 265);
    --color-orbit:         oklch(34% 0.006 265);
    --color-planet:        oklch(78% 0.006 265);
    --color-sun:           oklch(78% 0.14 70);
    --color-focus:         oklch(70% 0.16 256);
    --color-selection:     oklch(40% 0.09 256);
    --weight-body: 400;
  }
}