/* Zap! by mutual: design tokens. Direction 2 "neon-unbounded" (Unbounded headings and numbers, Pretendard body, Gasoek One
   Korean headings), chosen 2026-10-14 with one change: cyan is the single accent; coral is the only second colour, for
   numbers that are worse. Measured on the page background: cyan 14.5:1 dark / 6.2:1 light, coral 8.7:1 dark / 5.0:1 light.
   Dark first; light through prefers-color-scheme or <html data-theme="light">. Korean pages also load zap-fonts-ko.neon-unbounded.css.
   Fonts: SIL Open Font Licence 1.1, self-hosted, files unchanged from their makers' releases (licences in fonts/).
   Contrast measured, not eyeballed: every text colour at least 4.5:1 on the page and on raised surfaces, chart marks 3:1. */

@font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/Unbounded-800-normal-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face {font-family: 'Unbounded'; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/Unbounded-800-normal-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Pretendard-Regular.subset.91.woff2") format('woff2'); unicode-range: U+20-22, U+27-2a, U+2c-39, U+3a-3b, U+3f, U+41-4e, U+4f-5d, U+61-7b, U+7d, U+a0-a1, U+ab, U+ad-ae, U+b7, U+bb, U+bf, U+2013-2014, U+201c-201d, U+2122, U+ac00, U+ace0, U+ae30, U+b2e4, U+b85c, U+b9ac, U+c0ac, U+c2a4, U+c2dc, U+c774, U+c778, U+c9c0, U+d558; }
@font-face {font-family: 'Pretendard'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Pretendard-Bold.subset.91.woff2") format('woff2'); unicode-range: U+20-22, U+27-2a, U+2c-39, U+3a-3b, U+3f, U+41-4e, U+4f-5d, U+61-7b, U+7d, U+a0-a1, U+ab, U+ad-ae, U+b7, U+bb, U+bf, U+2013-2014, U+201c-201d, U+2122, U+ac00, U+ace0, U+ae30, U+b2e4, U+b85c, U+b9ac, U+c0ac, U+c2a4, U+c2dc, U+c774, U+c778, U+c9c0, U+d558; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular-latin.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-Medium-latin.woff2") format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/JetBrainsMono-Bold-latin.woff2") format('woff2'); }

:root {
  color-scheme: dark;
  /* surfaces and lines */
  --z-bg: #0d0e11; --z-raise: rgba(255,255,255,.035); --z-raise-2: rgba(255,255,255,.065); --z-line: rgba(255,255,255,.09); --z-line-2: rgba(255,255,255,.18);
  /* text */
  --z-ink: #f4f5f7; --z-ink-2: #c9ccd3; --z-muted: #a3a8b2; --z-faint: #80858f;
  /* brand: Zap! keeps a cyan identity, here a pastel cyan */
  --z-accent: #7ff0fb; --z-accent-hover: #a6f5fc; --z-accent-ink: #06161a; --z-link: #8ff4fd; --z-focus: #7ff0fb; --z-accent-mark: #7ff0fb;
  /* routers in charts: Zap! is the accent, the other routers one calm neutral, human designs the quiet reference */
  --z-zap: #7ff0fb; --z-other: #8a8f99; --z-human: #3b3e45; --z-ref-line: #8f949e; --z-track: rgba(255,255,255,.07);
  /* good, neutral and bad, for a number coloured by how it compares */
  --z-good: #7ff0fb;
  --z-neutral: #c9ccd3;
  --z-bad: #ff8f7e;
  /* magnitude scale (heatmaps), mixed in OKLab from heat-0 (nothing wrong) to heat-1 (the most); text switches at step 22 of 32 */
  --z-heat-0: #0a2328; --z-heat-1: #ef8b7b; --z-heat-ink-lo: #ffffff; --z-heat-ink-hi: #000000;
  /* the primary button glow */
  --z-btn-glow: 0 0 0 1px rgba(127,240,251, 0.22), 0 10px 30px -14px rgba(127,240,251, 0.45);
  --z-btn-glow-hover: 0 0 0 1px rgba(127,240,251, 0.32), 0 14px 34px -14px rgba(127,240,251, 0.6);

  /* type: font roles (compare.css reads these through its hooks) */
  --z-font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --z-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --z-display: "Unbounded", "Gasoek One", "Pretendard", sans-serif;
  --z-display-wt: 800;
  --z-display-track: -0.03em;
  --z-display-track-2: -0.03em;
  --z-display-sm: var(--z-display);
  --z-display-sm-size: 20px;
  --z-display-sm-wt: 800;
  --z-title: var(--z-font);
  --z-title-wt: 700;
  --z-title-size: 15px;
  --z-brand: var(--z-display);
  --z-brand-wt: 800;
  --z-brand-size: 20px;
  --z-brand-track: 0;
  --z-label: var(--z-font);
  --z-label-k: 1;
  --z-label-wt: 400;
  --z-label-tt: none;
  --z-chs-style: normal;
  --z-num: var(--z-font);
  --z-num-fv: tabular-nums;
  --z-num-track: 0;
  --z-num-big: var(--z-display);
  --z-num-big-fv: tabular-nums;
  --z-num-big-track: 0;
  --z-num-big-zap-wt: 800;
  --z-btn-font: var(--z-font);
  --z-btn-wt: 700;
  --z-t-base: 16px;
  --z-t-display: clamp(46px, 5.6vw, 76px);
  --z-t-2xl: 40px;
  --z-t-figure: clamp(22px, 2.2vw, 28px);
  --z-lh: 1.6;
  --z-lh-tight: 1.0;
  --z-track-tight: -0.02em;
  --z-track-eyebrow: 0.01em;
  --z-t-eyebrow: 13px;
  --z-label-track: 0;
  /* space: 4 px steps */
  --z-s1: 4px; --z-s2: 8px; --z-s3: 12px; --z-s4: 16px; --z-s5: 24px;
  --z-s6: 32px; --z-s7: 48px; --z-s8: 64px; --z-s9: 96px; --z-s10: 128px;
  --z-radius: 4px;
  --z-radius-2: 8px;
  --z-max: 1120px;
  --z-gutter: 32px;
  --z-t-xs: 12px; --z-t-sm: 14px; --z-t-lg: 19px; --z-t-xl: 24px;
}

@media (max-width: 640px) {
  :root { --z-gutter: 16px; --z-t-display: clamp(44px, 12vw, 64px); --z-t-2xl: 32px; }
}

/* Korean pages: Myeongjo headings take a heavier weight; Hangul reads better with more leading */
:root:lang(ko) { --z-lh: 1.75; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    /* surfaces and lines */
    --z-bg: #fbfbfd; --z-raise: rgba(10,20,40,.03); --z-raise-2: rgba(10,20,40,.055); --z-line: rgba(10,20,40,.10); --z-line-2: rgba(10,20,40,.19);
    /* text */
    --z-ink: #111318; --z-ink-2: #3d424c; --z-muted: #545a65; --z-faint: #666c76;
    /* brand: Zap! keeps a cyan identity, here a pastel cyan */
    --z-accent: #7ff0fb; --z-accent-hover: #a6f5fc; --z-accent-ink: #06161a; --z-link: #0b6e7c; --z-focus: #0f7482; --z-accent-mark: #0f7482;
    /* routers in charts: Zap! is the accent, the other routers one calm neutral, human designs the quiet reference */
    --z-zap: #0f7482; --z-other: #8a909a; --z-human: #dfe1e6; --z-ref-line: #8a909a; --z-track: rgba(10,20,40,.06);
    /* good, neutral and bad, for a number coloured by how it compares */
    --z-good: #0b6875;
    --z-neutral: #3d424c;
    --z-bad: #c2410c;
    /* magnitude scale (heatmaps), mixed in OKLab from heat-0 (nothing wrong) to heat-1 (the most); text switches at step 22 of 32 */
    --z-heat-0: #e2f6f8; --z-heat-1: #f7a08e; --z-heat-ink-lo: #111318; --z-heat-ink-hi: #111318;
    /* the primary button glow */
    --z-btn-glow: 0 0 0 1px rgba(15,116,130, 0.22), 0 10px 30px -14px rgba(15,116,130, 0.45);
    --z-btn-glow-hover: 0 0 0 1px rgba(15,116,130, 0.32), 0 14px 34px -14px rgba(15,116,130, 0.6);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  /* surfaces and lines */
  --z-bg: #fbfbfd; --z-raise: rgba(10,20,40,.03); --z-raise-2: rgba(10,20,40,.055); --z-line: rgba(10,20,40,.10); --z-line-2: rgba(10,20,40,.19);
  /* text */
  --z-ink: #111318; --z-ink-2: #3d424c; --z-muted: #545a65; --z-faint: #666c76;
  /* brand: Zap! keeps a cyan identity, here a pastel cyan */
  --z-accent: #7ff0fb; --z-accent-hover: #a6f5fc; --z-accent-ink: #06161a; --z-link: #0b6e7c; --z-focus: #0f7482; --z-accent-mark: #0f7482;
  /* routers in charts: Zap! is the accent, the other routers one calm neutral, human designs the quiet reference */
  --z-zap: #0f7482; --z-other: #8a909a; --z-human: #dfe1e6; --z-ref-line: #8a909a; --z-track: rgba(10,20,40,.06);
  /* good, neutral and bad, for a number coloured by how it compares */
  --z-good: #0b6875;
  --z-neutral: #3d424c;
  --z-bad: #c2410c;
  /* magnitude scale (heatmaps), mixed in OKLab from heat-0 (nothing wrong) to heat-1 (the most); text switches at step 22 of 32 */
  --z-heat-0: #e2f6f8; --z-heat-1: #f7a08e; --z-heat-ink-lo: #111318; --z-heat-ink-hi: #111318;
  /* the primary button glow */
  --z-btn-glow: 0 0 0 1px rgba(15,116,130, 0.22), 0 10px 30px -14px rgba(15,116,130, 0.45);
  --z-btn-glow-hover: 0 0 0 1px rgba(15,116,130, 0.32), 0 14px 34px -14px rgba(15,116,130, 0.6);
}