/* ==========================================================================
   tokens.css — design system source of truth for jamesbarber.me
   Loaded first on every page. site.css and demo.css consume these variables
   and must not redefine them. All text colours pass WCAG AA (>= 4.5:1) on --canvas and --surface-1.
   ========================================================================== */

/* ---- Self-hosted fonts (SIL OFL 1.1 — see /assets/fonts/LICENSES.txt) ---- */
@font-face {
  font-family: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/host-grotesk-latin-wght-normal.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: "Host Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/host-grotesk-latin-ext-wght-normal.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- Type ---- */
  --font-sans: "Host Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-display: 300;   /* h1 / h2 — light, large, tightly tracked */
  --fw-body: 350;      /* paragraphs — a touch heavier than 300 so it holds up on low-DPI Windows screens */
  --fw-regular: 400;   /* h3, labels, tab titles */
  --fw-medium: 500;    /* buttons, wordmark */

  --fs-h1: clamp(2.375rem, 1.35rem + 3.6vw, 3.625rem);   /* 38 → 58px */
  --fs-h2: clamp(1.875rem, 1.25rem + 2.4vw, 2.75rem);    /* 30 → 44px */
  --fs-h3: 1.125rem;                                      /* 18px */
  --fs-lead: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);     /* 16 → 18px */
  --fs-body: 1rem;                                        /* 16px */
  --fs-small: 0.875rem;                                   /* 14px */
  --fs-tiny: 0.8125rem;                                   /* 13px */
  --fs-kicker: 0.75rem;                                   /* 12px bracket label (sans, 500) */

  --lh-display: 1.04;
  --lh-body: 1.55;
  --ls-display: -0.035em;
  --ls-kicker: 0.06em;

  /* ---- Ink (text) ----
     Cool slate greys (2026-09 redesign, after emdash.com). Ratios are on --canvas #F7FBFC
     / --surface-1 #F5F6F7 (every text colour must stay >= 4.5:1 on BOTH); white and --paper-2
     are noted where they matter. */
  --ink-strong: #1f2931;   /* headings                                    14.2:1 canvas, 13.7:1 surface-1 */
  --ink: #2b3a40;          /* strong body, secondary button text           11.3:1 canvas, 10.9:1 surface-1 */
  --ink-2: #46545c;        /* body paragraphs                               7.5:1 canvas,  7.2:1 surface-1 */
  --ink-soft: #56646c;     /* secondary text, inactive tab titles           5.9:1 canvas,  5.7:1 surface-1 (5.4:1 on --paper-2) */
  --ink-subtle: #5f6c74;   /* smallest captions                             5.2:1 canvas,  5.0:1 surface-1 (4.8:1 on --paper-2, 5.4:1 white) */
  --ink-faint: #a3abb0;    /* DECORATIVE ONLY (icons, rules) — never for text that must be read */

  /* ---- Lines & surfaces ---- */
  --canvas: #f7fbfc;        /* page background */
  --surface-1: #f5f6f7;     /* cards, panels, callout backgrounds */
  --panel: #fbfdfe;         /* inner panels sitting on cards */
  --line: #e8ebee;          /* solid hairlines: rails, cell borders */
  --line-dashed: #dce1e5;   /* dashed section dividers */
  --seam-dot: #CBD4DB;       /* DECORATIVE: the 4px squares where dashed seams cross vertical lines */
  --line-pill: #d6dce0;     /* outlined buttons */
  --surface: #ffffff;
  --surface-hover: #f0f3f5;
  --surface-active: #f5f6f7;
  --paper: #f5f6f7;         /* canvas inside the demo app + visual panels */
  --paper-2: #eef1f3;       /* chat bubbles, chips */
  --rule-warm: #e8ebee;     /* hairlines on paper (name kept from the warm palette) */

  /* ---- Buttons (black, square) ---- */
  --btn-dark: #1f2931;        /* primary button background; button text below is 14.2:1 on it */
  --btn-dark-hover: #0f171d;  /* 17.4:1 with --btn-dark-ink */
  --btn-dark-ink: #f7fbfc;

  /* ---- Accent (warm orange) ---- */
  --accent: #f4711f;          /* DECORATIVE marks only: progress bars, chart bars, dots (2.9:1 on light — never text on light; 5.1:1 on --btn-dark, so OK as a label on a dark box) */
  --accent-ink: #c2410c;      /* accent TEXT, bracket labels, links      5.0:1 canvas, 4.8:1 surface-1, 5.2:1 white */
  --accent-ink-hover: #a8380a;
  --accent-soft: #f9d3c0;     /* secondary chart bars */
  --accent-wash: #fdf1e7;     /* tinted fills */

  /* ---- Status ---- */
  --ok: #2f9e55;              /* decorative dot */
  --ok-ink: #1f7a3f;          /* status text                                 5.2:1 canvas, 5.0:1 surface-1 */
  --ok-wash: #e9f6ee;

  /* ---- Layout ---- */
  --rail-max: 1392px;         /* the framed column (page width minus 24px each side at 1440); 1px --line rails on both sides */
  --content-max: 1160px;      /* inner column for text-heavy blocks */
  --read-max: 720px;          /* article body measure */
  --gutter: clamp(20px, 3.4vw, 40px);
  --block-pad-y: clamp(64px, 8vw, 112px);
  --header-h: 72px;

  /* ---- Shape & depth ---- */
  --radius-pill: 999px;
  --radius-window: 12px;
  --radius-card: 10px;
  --radius-chip: 6px;
  --shadow-card: 0 1px 2px rgba(31, 41, 49, 0.04), 0 18px 44px -18px rgba(31, 41, 49, 0.18);
  --shadow-window: 0 2px 4px rgba(31, 41, 49, 0.05), 0 40px 90px -30px rgba(31, 41, 49, 0.28);
  --focus-ring: 0 0 0 3px rgba(194, 65, 12, 0.3);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 640ms;
}