/* tokens.css — Drawing Review v2 design tokens.
   CONTRACT: the ONLY file allowed to contain literal colours, fonts, or raw
   measurements. Three-state theming: bare :root = light; system-dark applies
   unless [data-theme="light"] opts out; [data-theme="dark"] forces dark.
   The rail (sidebar) follows the theme; the login hero (--hero*) stays ink in
   both themes by design. ui.css consumes these var() names and must never
   hard-code a value. */

/* ── typefaces ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── light (default) ─────────────────────────────────────────────────────── */
:root {
  /* surfaces */
  --paper: #f4f5f7;
  --card: #ffffff;
  --card2: #eef1f4;
  --field: #f7f8f9;

  /* text */
  --ink: #0a0b0c;
  --graphite: #272a2d;
  --steel: #5d646b;
  --faint: #8b9198;

  /* rules */
  --line: #e5e7ea;
  --line2: #d6d9dd;
  --line3: #c3c7cc;

  /* semantic — red is RESERVED for review points, green for verified state */
  --red: #dc0028;
  --red-wash: #fbe7ea;
  --green: #008a43;
  --green-wash: #e3f2ea;
  --amber: #9a6a00;
  --amber-wash: #f6efdf;
  --blue: #2b5cc4;
  --blue-wash: #e9f0fb;

  /* rail — follows the theme (light rail in light mode, ink rail in dark) */
  --rail: #fbfbfc;
  --rail-ink: #0a0b0c;
  --rail-steel: #5d646b;
  --rail-line: #e5e7ea;
  --rail-on: #eceef2;

  /* hero — the login gate's brand panel; deliberately ink in BOTH themes */
  --hero: #111316;
  --hero-ink: #e9ebee;
  --hero-steel: #8a9199;
  --hero-line: #25292e;

  /* elevation */
  --sh-1: 0 1px 2px rgba(10, 11, 12, .05), 0 0 0 1px rgba(10, 11, 12, .035);
  --sh-2: 0 10px 28px -10px rgba(10, 11, 12, .18), 0 2px 6px rgba(10, 11, 12, .06);
  --sh-pop: 0 24px 60px -18px rgba(10, 11, 12, .3), 0 2px 8px rgba(10, 11, 12, .08);

  /* type */
  --font: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  --t-xs: 10.5px;
  --t-sm: 11.5px;
  --t-base: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 26px;
  --t-3xl: 34px;

  /* geometry */
  --r: 6px;
  --r-sm: 4px;
  --r-lg: 10px;
  --r-pill: 999px;
  --rail-w: 236px;
  --topbar-h: 54px;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --d1: 120ms;
  --d2: 200ms;
  --d3: 340ms;
  --d4: 520ms;
}

/* ── dark, state 1: system preference (unless explicitly forced light) ───── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b0d10;
    --card: #14171b;
    --card2: #191d22;
    --field: #161a1f;

    --ink: #eef1f4;
    --graphite: #d3d7db;
    --steel: #949aa1;
    --faint: #6b727a;

    --line: #232830;
    --line2: #2f353d;
    --line3: #3b424b;

    --red: #ff5069;
    --red-wash: #2a141a;
    --green: #3ecf8e;
    --green-wash: #0f2118;
    --amber: #e0b15a;
    --amber-wash: #241f13;
    --blue: #7aa2f0;
    --blue-wash: #141c2c;

    --rail: #0e1013;
    --rail-ink: #e9ebee;
    --rail-steel: #8a9199;
    --rail-line: #20242a;
    --rail-on: #1b1f24;

    --hero: #0e1013;
    --hero-ink: #e9ebee;
    --hero-steel: #8a9199;
    --hero-line: #20242a;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
    --sh-2: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
    --sh-pop: 0 24px 60px -18px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .5);
  }
}

/* ── dark, state 2: explicit override (identical token set) ──────────────── */
:root[data-theme="dark"] {
  --paper: #0b0d10;
  --card: #14171b;
  --card2: #191d22;
  --field: #161a1f;

  --ink: #eef1f4;
  --graphite: #d3d7db;
  --steel: #949aa1;
  --faint: #6b727a;

  --line: #232830;
  --line2: #2f353d;
  --line3: #3b424b;

  --red: #ff5069;
  --red-wash: #2a141a;
  --green: #3ecf8e;
  --green-wash: #0f2118;
  --amber: #e0b15a;
  --amber-wash: #241f13;
  --blue: #7aa2f0;
  --blue-wash: #141c2c;

  --rail: #0e1013;
  --rail-ink: #e9ebee;
  --rail-steel: #8a9199;
  --rail-line: #20242a;
  --rail-on: #1b1f24;

  --hero: #0e1013;
  --hero-ink: #e9ebee;
  --hero-steel: #8a9199;
  --hero-line: #20242a;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --sh-2: 0 10px 28px -10px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4);
  --sh-pop: 0 24px 60px -18px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .5);
}