/* Zetesis design tokens.
   Source of truth: zetesis.dev/assets/css/site.css :root block.
   Copy this whole file into any Zetesis surface. Do not rename, do not
   subset, do not add tokens without updating tokens.json and
   brand/02-color.md.

   Two palettes. :root is light, and is exactly the zetesis.dev palette.
   The dark block below is for products. It switches on only with a class
   or attribute, never on prefers-color-scheme alone, so copying this file
   into zetesis.dev cannot turn the site dark. Every pair in both palettes
   is measured in brand/02-color.md. Do not invent a third. */

:root {
  /* surfaces, lightest to deepest */
  --c-bg: #f1f4f7;
  --c-surface: #f8fafb;
  --c-sunk: #e7ecf1;

  /* rules */
  --c-rule: #d4dce4;
  --c-rule-faint: #e6ebf0;
  --c-rule-field: #93a2b0;

  /* ink */
  --c-ink: #0d141a;
  --c-ink-2: #38444e;
  --c-ink-3: #5b6975;
  --c-on-ink: #f1f4f7;

  /* accent */
  --c-accent: #1c96c5;
  --c-accent-ink: #0d6c92;
  --c-accent-wash: #e2eff6;
  --c-accent-rule: #9dc7dd;

  /* semantic */
  --c-ok: #1f5a48;
  --c-ok-wash: #e3eeea;
  --c-ok-rule: #9cc0b3;
  --c-warn: #6d4a0e;
  --c-warn-wash: #f5ecd9;
  --c-warn-rule: #d9c08a;
  --c-bad: #8c342c;
  --c-bad-wash: #f5e5e3;
  --c-bad-rule: #d6a8a1;

  /* type */
  --f-sans: 'Switzer', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);
  --t-head: clamp(1.75rem, 1.45rem + 1.28vw, 2.625rem);
  --t-lead: clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
  --t-body: 1rem;
  --t-mono: 0.75rem;

  --lh-display: 1.04;
  --lh-head: 1.14;
  --lh-body: 1.62;
  --lh-tight: 1.35;
  --lh-mono: 1.5;
  --tr-display: -0.034em;
  --tr-head: -0.02em;
  --tr-mono: 0.11em;
  --w-medium: 500;
  --w-semi: 600;

  /* space, 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-section: clamp(64px, 7.5vw, 120px);
  --s-hero: clamp(56px, 8vw, 112px);
  --s-panel: clamp(24px, 2.6vw, 40px);

  /* the only radius */
  --r-1: 2px;

  /* structure */
  --w-page: 1180px;
  --pad-page: clamp(20px, 4vw, 48px);
  --border: 1px;
  --rule-accent: 2px;
  --measure: 62ch;
  --h-nav: 64px;

  /* motion */
  --ease-out: ease-out;
  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit: cubic-bezier(0.4, 0, 0.9, 1);
  --ease-press: cubic-bezier(0.34, 1.26, 0.64, 1);
  --dur: 160ms;
  --dur-fast: 90ms;
  --dur-reveal: 200ms;
  --stagger: 40ms;
  --reveal-y: 16px;

  /* layers, the whole scale */
  --z-rules: 0;
  --z-body: 1;
  --z-prompt: 5;
  --z-nav: 10;

  color-scheme: light;
}

/* Dark palette, for products. Same hue family, same contrast ratios as
   light, surfaces get lighter as they rise. The brand ink becomes the page,
   the light page becomes the heading ink, and the brand blue is unchanged. */
.dark,
[data-theme='dark'] {
  --c-bg: #0d141a;
  --c-surface: #151c23;
  --c-sunk: #080d12;
  --c-rule: #28323b;
  --c-rule-faint: #1d262d;
  --c-rule-field: #5d6a77;
  --c-ok: #6db89d;
  --c-ok-wash: #0d261e;
  --c-ok-rule: #2e5a4b;
  --c-bad: #e69087;
  --c-warn: #caa161;
  --c-warn-wash: #2a1e0c;
  --c-warn-rule: #634b23;
  --c-bad-wash: #321815;
  --c-bad-rule: #743f39;
  --c-ink: #f1f4f7;
  --c-ink-2: #abb6c1;
  --c-ink-3: #7c8995;
  --c-on-ink: #0d141a;
  --c-accent: #1c96c5;
  --c-accent-ink: #63b7df;
  --c-accent-wash: #0d2834;
  --c-accent-rule: #1c546c;

  color-scheme: dark;
}