/* Keystone design tokens v0.8. Gemini-inspired type and layout, light, one blue accent.
   Source of truth for every Keystone page. Spec: docs/reference/design-system.md. Issue #35. */
@font-face{font-family:"Google Sans Flex";src:url(fonts/google-sans-flex-latin-wght-normal.woff2) format("woff2");font-weight:100 1000;font-display:swap}

:root{
  color-scheme:light;

  /* Colour: white and soft blue-grey, near-black text, one blue accent. No gradients, no multi-colour text.
     Light only. Every text colour meets WCAG AA on paper, band, surface and sunken; lowest 5.78 (accent on band). */
  --ks-paper:#ffffff;
  --ks-band:#f0f4f9;
  --ks-surface:#ffffff;
  --ks-sunken:#e9eef6;
  --ks-rule:#e3e3e3;
  --ks-rule-strong:#c4c7c5;
  --ks-ink:#1f1f1f;
  --ks-heading:#1f1f1f;
  --ks-muted:#444746;
  --ks-primary:#0b57d0;       /* pill buttons */
  --ks-on-primary:#ffffff;
  --ks-accent:#0b57d0;        /* links, the one accent word, the keystone */
  --ks-accent-soft:#d3e3fd;
  --ks-tick:#146c2e;
  --ks-tick-soft:#e3f1e7;
  --ks-flag:#b3261e;
  --ks-flag-soft:#fbe8e6;
  --ks-night:#1f1f1f;
  --ks-on-night:#ffffff;
  --ks-on-night-muted:#c4c7c5;
  --ks-accent-night:#a8c7fa;

  /* Type: Google Sans Flex (open licence, self-hosted) for everything. */
  --ks-sans:"Google Sans Flex","Google Sans",Arial,Helvetica,sans-serif;
  --ks-display:"Google Sans Flex","Google Sans",Arial,Helvetica,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:-.02em;
  --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 #0000000d;
  --ks-shadow-2:0 2px 6px #0000000a,0 28px 64px -28px #00000040;

  /* 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}}