/* DECODE — design tokens
   Source of truth: CLAUDE.md §4. Every themable value lives here. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-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: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-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: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* ---------- Surface ---------- */
  --panel-0: #0E1116;            /* page */
  --panel-1: #151920;            /* raised panel */
  --panel-2: #1C2129;            /* controls, inputs */
  --panel-3: #232932;            /* hover state of a control */
  --hairline: #2A313B;           /* rules, borders */
  --hairline-strong: #3A4351;

  /* ---------- Type ---------- */
  --ink: #E8EAEE;
  --ink-2: #A3AAB6;              /* secondary */
  --ink-3: #808896;              /* tertiary, disabled; 4.5:1 on panel-2, 5.3:1 on panel-0 (the bible hex #6C7482 measures 4.0:1) */

  /* ---------- Data hues: fixed meanings, never reassign ---------- */
  --weights: #F2A93B;            /* model weights: amber */
  --cache: #3FD3F0;              /* KV cache: cyan */
  --overhead: #7A8290;           /* runtime + OS: neutral */
  --room: #4BE39A;               /* free memory / headroom: green */
  --fail: #F25C43;               /* won't fit: signal red */
  --warn: #F2A93B;               /* tight: shares amber intentionally */

  /* ---------- The one decorative colour ---------- */
  --mesh: #8B80F2;               /* the Home hero's wireframe only; never data, text, or interaction. 5.8:1 on panel-0 */

  /* ---------- Families ---------- */
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (rem) ---------- */
  --step--1: 0.8125rem;          /* 13px  meta, units, labels */
  --step-0: 0.9375rem;           /* 15px  UI, small body */
  --step-1: 1.0625rem;           /* 17px  body */
  --step-2: 1.25rem;             /* 20px */
  --step-3: 1.5rem;              /* 24px */
  --step-4: 2rem;                /* 32px */
  --step-5: 2.75rem;             /* 44px */
  --step-6: 4rem;                /* 64px  large readout */
  --step-7: 6rem;                /* 96px  display readout */

  --leading-body: 1.55;
  --leading-tight: 1.15;
  --leading-flat: 1;
  --tracking-display: -0.02em;
  --tracking-tight: -0.01em;
  --measure: 68ch;

  /* ---------- Spacing (8px base) ---------- */
  --space-1: 0.25rem;            /* 4 */
  --space-2: 0.5rem;             /* 8 */
  --space-3: 0.75rem;            /* 12 */
  --space-4: 1rem;               /* 16 */
  --space-5: 1.5rem;             /* 24 */
  --space-6: 2rem;               /* 32 */
  --space-7: 3rem;               /* 48 */
  --space-8: 4rem;               /* 64 */
  --space-9: 6rem;               /* 96 */
  --space-10: 8rem;              /* 128 */

  /* ---------- Layout ---------- */
  --container: 1440px;
  --gutter: 24px;
  --margin: 32px;
  --columns: 12;
  --radius-panel: 2px;
  --radius-input: 4px;
  --header-height: 56px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 150ms;
  --dur-ui: 300ms;
  --dur-data: 500ms;
  --dur-orchestrated: 900ms;

  /* ---------- Focus ---------- */
  --focus-ring: 2px solid var(--ink);
  --focus-offset: 2px;
}

@media (max-width: 720px) {
  :root {
    --margin: 16px;
    --gutter: 16px;
  }
}