/* ==========================================================================
   tokens.css — the drawing set's vocabulary
   Concept: "Revision-controlled". A drafting sheet: paper, graphite ink,
   revision red for changes, blueprint blue for references that are verified.
   Archivo Narrow sets like technical lettering; Chivo Mono carries data,
   dates and sheet numbers.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  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: "Archivo Narrow";
  src: url("../fonts/archivo-narrow-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  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: "Chivo Mono";
  src: url("../fonts/chivo-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  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;
}

:root {
  /* --- Families -------------------------------------------------------- */
  --font-display: "Archivo Narrow", "Arial Narrow", ui-sans-serif, system-ui,
    sans-serif;
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-mono: "Chivo Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* --- Scale: 1.25 minor third, 17px base ------------------------------ */
  --step--3: 0.75rem; /* 12px — drawing captions, the floor for this set */
  --step--2: 0.8125rem; /* 13px */
  --step--1: 0.842rem; /* 14px */
  --step-0: 1.0625rem; /* 17px */
  --step-1: 1.3125rem; /* 21px */
  --step-2: 1.625rem; /* 26px */
  --step-3: 2.0625rem; /* 33px */
  --step-4: 3.1875rem; /* 51px */
  --step-5: clamp(2.25rem, 5.1vw, 4.25rem); /* title-block lettering */

  /* --- Spacing: 8px rhythm -------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* --- Structure ------------------------------------------------------- */
  --measure: 64ch;
  --shell: 1320px;
  --rail: 16.5rem;
  --gutter: 1.5rem;
  --pad-inline: 1.25rem;
  --rule-w: 1px;
  --frame-inset: 10px;
  --zone: 1.5rem; /* margin band that carries zone letters */
  --radius: 2px; /* drawing corners are square; a hairline of softness only */

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;
  --t-base: 180ms;

  color-scheme: light;
}

/* Light: drafting paper ------------------------------------------------- */
:root,
[data-theme="light"] {
  --desk: #e7eae6;
  --paper: #fbfbfa;
  --paper-sunk: #f1f3f0;
  --ink: #15171b;
  --ink-muted: #555b61;
  /* 5.4:1 on paper — the quietest label still passes AA. */
  --ink-faint: #61686e;
  --rule: #d5d9d5;
  --rule-strong: #9aa19c;
  /* 4.70:1 on paper — interactive control boundaries, per WCAG 1.4.11. */
  --control-border: #6b7370;
  --grid: #20262b0e; /* the 8px field grid */
  /* Revision red: the drawing's own marking colour, 6.1:1 on paper. */
  --rev: #b3311f;
  --rev-wash: #fbeeea;
  /* Blueprint blue: verified references, 6.0:1 on paper. */
  --blue: #1f5f8b;
  --blue-wash: #eaf1f6;
  --state-live: #1f6b45;
  --state-live-wash: #e8f2ec;
  --state-prototype: #1f5f8b;
  --state-prototype-wash: #eaf1f6;
  --state-simulated: #8a5a00;
  --state-simulated-wash: #f8f0dd;
  --state-stopped: #5c5f63;
  --state-stopped-wash: #eeeef0;
  --focus: #1f5f8b;
  --shadow-plate: 0 1px 0 #ffffff inset, 0 1px 2px #15171b14;
  --plate-frame: #b9bfba;
}

/* Dark: the same set under a bench lamp — graphite ground, drawn lines pale */
[data-theme="dark"] {
  --desk: #0a0d10;
  --paper: #12171b;
  --paper-sunk: #171d21;
  --ink: #e8edf0;
  --ink-muted: #a6b0b8;
  --ink-faint: #97a2aa;
  --rule: #262e34;
  --rule-strong: #46525a;
  /* 3.56:1 on paper — interactive control boundaries, per WCAG 1.4.11. */
  --control-border: #64707a;
  --grid: #dce6ec0f;
  --rev: #ff7a5f;
  --rev-wash: #2a1a16;
  --blue: #7fb6e6;
  --blue-wash: #16232c;
  --state-live: #6fd39b;
  --state-live-wash: #14251c;
  --state-prototype: #7fb6e6;
  --state-prototype-wash: #16232c;
  --state-simulated: #e0b25c;
  --state-simulated-wash: #2a2314;
  --state-stopped: #9aa3aa;
  --state-stopped-wash: #1c2126;
  --focus: #7fb6e6;
  --shadow-plate: 0 1px 0 #ffffff0a inset, 0 1px 2px #00000060;
  --plate-frame: #384249;
  color-scheme: dark;
}

@media (min-width: 48rem) {
  :root {
    --pad-inline: 2.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --pad-inline: 3rem;
    --frame-inset: 14px;
  }
}