/* Complikits tokens. Brand colours are the ones in brand/README.md: ink, blueprint blue, redline, highlighter.
   Every colour and face on the site comes from here. Light is the default; dark follows the system setting
   or [data-theme="dark"]. */
:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.5rem, 3.4vw + 1rem, 4.5rem);
  --text-section: clamp(2rem, 2.2vw + 1rem, 3.25rem); --text-title: clamp(1.25rem, 0.6vw + 0.95rem, 1.5rem); --text-lead: clamp(1.125rem, 0.3vw + 1rem, 1.3125rem);
  --text-price: clamp(4rem, 6vw + 1rem, 7.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --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-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --nav-h: 64px;

  /* paper: drafting white, the sheet a step lighter, a blueprint tint for fills */
  --color-paper: #f1f3f0; --color-paper-2: #fbfbf8; --color-paper-3: #e7eef8;
  /* ink and line */
  --color-ink: #0e1b2c; --color-ink-2: #44546a; --color-muted: #5b6a7d;
  --color-rule: #c9d3e0; --color-frame: #0e1b2c; --color-grid: #1b4a9414; --color-grid-2: #1b4a9426;
  /* blueprint blue is the accent; redline marks; highlighter fills */
  --color-accent: #1b4a94; --color-accent-ink: #fbfbf8; --color-focus: #1b4a94;
  --color-red: #c42b1b; --color-hi: #ffe14d; --color-tick: #c42b1b;
  --color-btn: #0e1b2c; --color-btn-ink: #fbfbf8; --color-btn-hover: #1b4a94;
  /* the blueprint band */
  --color-band: #10386f; --color-band-ink: #eaf1fb; --color-band-2: #b4c8e3; --color-band-rule: #3d6299; --color-band-hi: #ffe14d;
  /* status in the worked example and the Watch diffs */
  --color-met: #1f6b46; --color-met-bg: #e1f0e6; --color-amber: #8f5304; --color-amber-bg: #fbefd8;
  --color-error: #c42b1b; --color-success: #1f6b46;

  --font-display: "Chakra Petch", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --display-weight: 600;
  --radius-card: 0; --radius-pill: 0; --radius-input: 0; --rule-hair: 1px; --rule-heavy: 2px; --shadow-card: none;
  --tracking-display: -0.01em; --tick-len: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-paper: #0c141c; --color-paper-2: #121d28; --color-paper-3: #16283a;
    --color-ink: #e4ebf2; --color-ink-2: #a9b8c8; --color-muted: #93a4b6;
    --color-rule: #2a3d50; --color-frame: #6c8fb8; --color-grid: #6fa3dc12; --color-grid-2: #6fa3dc24;
    --color-accent: #6fa3dc; --color-accent-ink: #0c141c; --color-focus: #ffe14d;
    --color-red: #ff7a66; --color-hi: #ffe14d; --color-tick: #ffe14d;
    --color-btn: #ffe14d; --color-btn-ink: #0c141c; --color-btn-hover: #fff0a3;
    --color-band: #070d13; --color-band-ink: #e4ebf2; --color-band-2: #9fb1c3; --color-band-rule: #2a3d50; --color-band-hi: #ffe14d;
    --color-met: #86c9a0; --color-met-bg: #16312a; --color-amber: #eebb73; --color-amber-bg: #33290f;
    --color-error: #ff7a66; --color-success: #86c9a0;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: #0c141c; --color-paper-2: #121d28; --color-paper-3: #16283a;
  --color-ink: #e4ebf2; --color-ink-2: #a9b8c8; --color-muted: #93a4b6;
  --color-rule: #2a3d50; --color-frame: #6c8fb8; --color-grid: #6fa3dc12; --color-grid-2: #6fa3dc24;
  --color-accent: #6fa3dc; --color-accent-ink: #0c141c; --color-focus: #ffe14d;
  --color-red: #ff7a66; --color-hi: #ffe14d; --color-tick: #ffe14d;
  --color-btn: #ffe14d; --color-btn-ink: #0c141c; --color-btn-hover: #fff0a3;
  --color-band: #070d13; --color-band-ink: #e4ebf2; --color-band-2: #9fb1c3; --color-band-rule: #2a3d50; --color-band-hi: #ffe14d;
  --color-met: #86c9a0; --color-met-bg: #16312a; --color-amber: #eebb73; --color-amber-bg: #33290f;
  --color-error: #ff7a66; --color-success: #86c9a0;
}