/* ============================================================
   Working Paper — design tokens
   Warm paper, light-only — the paper is the identity.
   Rule: orange is never decorative — interaction or data only.
   ============================================================ */

@font-face {
  font-family: "Switzer";
  src: url("/fonts/switzer-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-var.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- surfaces & ink --- */
  --paper: #faf9f6;
  --surface: #ffffff;
  --hairline: #e5e2da;
  --hairline-strong: #cfcabd;
  --ink: #16181d;
  --body: #3f444b;
  --muted: #6b7078;
  --hover-tint: #f4f1ea;

  /* --- the accent: interaction or data, never decoration --- */
  --accent: #e8490f;
  --accent-hover: #c33b09;
  --accent-wash: rgba(232, 73, 15, 0.08);

  /* --- secondary signal (failure-case tab only) --- */
  --amber: #a16207;

  /* --- charts --- */
  --chart-1: #e8490f;
  --chart-2: #16181d;
  --chart-3: #3056d3;
  --chart-ref: #a8a29a;
  --chart-grid: #ece9e2;

  /* --- type --- */
  --font-sans: "Switzer", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.9375rem;
  --text-mono: 0.8125rem; /* 13px */
  --text-mono-s: 0.75rem; /* 12px */
  --track-mono: 0.08em;

  /* --- layout --- */
  --container: 1152px;
  --gutter: 1.5rem;
  --section-pad: clamp(4rem, 9vw, 7rem);
  --radius: 3px;

  /* --- motion --- */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-draw: 600ms;
}

/* The site is deliberately light-only: the warm paper is the identity.
   Dark tokens below stay available behind data-theme for a future toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1115;
  --surface: #16191e;
  --hairline: #262a30;
  --hairline-strong: #3a4048;
  --ink: #e9e7e1;
  --body: #c6c9cd;
  --muted: #9ba0a8;
  --hover-tint: #1a1e24;
  --accent: #ff5c26;
  --accent-hover: #ff7a4d;
  --accent-wash: rgba(255, 92, 38, 0.1);
  --amber: #e8a33d;
  --chart-2: #e9e7e1;
  --chart-3: #7b96ff;
  --chart-ref: #5a5f66;
  --chart-grid: #23272e;
}