/* Keystone design tokens v0.4. Neutral, Apple-like: near-black on white, grey bands,
   one blue accent, system fonts. Source of truth for every Keystone page.
   Spec: docs/reference/design-system.md. Issue #24. */
:root{
  color-scheme:light dark;

  /* Colour. Every text colour meets WCAG AA (>=4.5:1) on paper, band and surface in both modes. */
  --ks-paper:light-dark(#ffffff,#000000);
  --ks-band:light-dark(#f5f5f7,#161617);
  --ks-surface:light-dark(#ffffff,#1d1d1f);
  --ks-sunken:light-dark(#f0f0f2,#2a2a2d);
  --ks-rule:light-dark(#e3e3e6,#2f2f33);
  --ks-rule-strong:light-dark(#c7c7cc,#48484d);
  --ks-ink:light-dark(#1d1d1f,#f5f5f7);
  --ks-muted:light-dark(#5e5e63,#a1a1a6);
  --ks-primary:light-dark(#1d1d1f,#f5f5f7);       /* primary pill */
  --ks-on-primary:light-dark(#ffffff,#1d1d1f);
  --ks-accent:light-dark(#0066cc,#2997ff);        /* links, emphasis, the keystone */
  --ks-accent-soft:light-dark(#e8f1fb,#0d2238);
  --ks-tick:light-dark(#16702f,#3fb950);          /* checked, approved, reviewed */
  --ks-tick-soft:light-dark(#e6f4ea,#10291a);
  --ks-flag:light-dark(#b93815,#ff8a5c);          /* a person needs to act */
  --ks-flag-soft:light-dark(#fbeae4,#331a10);
  --ks-night:#000000;                              /* the closing section, in both modes */
  --ks-on-night:#f5f5f7;
  --ks-on-night-muted:#a1a1a6;
  --ks-accent-night:#2997ff;

  /* Type: the device's own UI font (SF Pro on Apple devices). No web fonts. */
  --ks-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ks-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ks-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ks-serif:Georgia,serif;                        /* only for mock Claude replies */
  --ks-text-xs:12px;
  --ks-text-sm:14px;
  --ks-text-md:17px;
  --ks-text-lg:19px;
  --ks-text-xl:clamp(19px,2.1vw,24px);
  --ks-display-sm:clamp(22px,2.6vw,28px);
  --ks-display-md:clamp(34px,5.2vw,56px);
  --ks-display-lg:clamp(44px,8vw,96px);
  --ks-track-display:-.025em;
  --ks-track-label:0;

  /* Space: 4px base, 8px rhythm. */
  --ks-1:4px;--ks-2:8px;--ks-3:12px;--ks-4:16px;--ks-5:24px;--ks-6:32px;--ks-7:48px;--ks-8:64px;--ks-9:104px;

  /* Shape: soft tiles, pill actions. Only the product gets a shadow. */
  --ks-radius-sm:8px;
  --ks-radius-md:14px;
  --ks-radius-lg:24px;
  --ks-radius-pill:999px;
  --ks-shadow-1:0 1px 2px light-dark(#0000000d,#00000080);
  --ks-shadow-2:0 2px 6px light-dark(#0000000a,#00000060),0 28px 64px -28px light-dark(#00000040,#000000);

  /* Motion: things settle into place; nothing bounces, loops or glows. */
  --ks-ease:cubic-bezier(.2,.8,.2,1);
  --ks-settle:cubic-bezier(.3,1.25,.5,1);
  --ks-fast:160ms;
  --ks-base:320ms;
  --ks-slow:700ms;

  --ks-measure:60ch;
  --ks-page:1080px;
  --ks-page-wide:1240px;

  /* Aliases for older pages and the product tour. */
  --ks-line:var(--ks-rule);
  --ks-line-strong:var(--ks-rule-strong);
  --ks-verify:var(--ks-tick);
  --ks-verify-soft:var(--ks-tick-soft);
  --ks-caution:var(--ks-flag);
  --ks-caution-soft:var(--ks-flag-soft);
  --ks-shadow-sheet:var(--ks-shadow-2);
}
@media (prefers-reduced-motion:reduce){:root{--ks-fast:0ms;--ks-base:0ms;--ks-slow:0ms}}