/* Cascade Dynamics — Design System v1.0 · tokens
 * Source of truth: "Cascade Design System.dc.html" (Claude Design project
 * "Cascade Dynamics Brand Pivot"). This file is the machine-usable implementation
 * of that reference. If a screen disagrees with the reference, the screen is wrong.
 *
 * The whole system in one line: BONE is the ground; INK is reserved for evidence
 * and appears only where something is proved, decided, or recorded. Cyan means a
 * decision was made or verified. Sand means physical, or waiting. Alert red means
 * a check FAILED — never a styling choice, never a brand accent.
 */

:root {
  /* ---- palette ---------------------------------------------------------- */
  --paper: #FBF8F2;        /* primary background, every surface */
  --paper-deep: #F2EDE3;   /* panel headers, secondary surfaces, sub-nav */
  --paper-alt: #FAF6EE;    /* alternating table rows — its only job */
  --ink: #0A0B0F;          /* type on light; background for evidence/signed artefacts */
  --mid: #6E6960;          /* secondary text on paper — never below this for body */
  --cyan: #7BD3EA;         /* a decision / verified / a software agent — ON INK ONLY */
  --teal: #1B5566;         /* cyan's equivalent for text on paper (contrast-safe) */
  --sand: #E9BE94;         /* physical systems, holds, warnings — on ink */
  --sand-deep: #8A5A2B;    /* sand's equivalent for text/labels on paper */
  --alert: #B3341F;        /* a FAILED check or contested run — nothing else, ever */
  --alert-bright: #FF6B57; /* alert on ink surfaces */
  --sage: #4C6B52;         /* media placeholder labels only — NOT a UI colour */

  /* semantic aliases */
  --bg: var(--paper);
  --text: var(--ink);
  --text-mid: var(--mid);
  --evidence-bg: var(--ink);
  --evidence-accent: var(--cyan);

  /* ---- type ------------------------------------------------------------- */
  --font-sans: "Archivo", system-ui, -apple-system, sans-serif;  /* what a PERSON wrote */
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* what a MACHINE produced */

  /* ---- spacing & geometry ---------------------------------------------- */
  --gutter: 34px;          /* page gutter, every breakpoint */
  --panel-pad: 20px;       /* inside bordered containers (18–26 range) */
  --grid-gap: 18px;        /* between cards (16–20); never 1px dividers on auto-fit grids */
  --border-w: 1px;         /* one weight throughout */
  --hairline: rgba(10, 11, 15, .16);
  --hairline-soft: rgba(10, 11, 15, .08);
  --radius-btn: 3px;
  --radius-inner: 2px;
  --radius-pill: 100px;    /* the only three radii that exist */

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);  /* one curve for everything */
  --t-state: 180ms;        /* toggles, tabs, hover */
  --t-reveal: 700ms;       /* scroll reveal + per-verification-step */
  --t-hero: 1900ms;        /* hero cross-dissolve */

  /* ---- contrast floors (non-negotiable) --------------------------------
   * body/labels ≥ 4.5:1 · large 24px+ ≥ 3:1 · de-emphasised stops at .62 on
   * bone / .60 on ink. Disabled controls exempt only if genuinely inert. */
  --mid-on-ink: rgba(251, 248, 242, .70);
  --dim-on-ink: rgba(251, 248, 242, .62);
}

/* ---- base ------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--ink); }
::selection { background: var(--cyan); color: var(--ink); }

/* ---- type scale (classes) -------------------------------------------- */
.t-display { font: 700 clamp(40px, 6vw, 74px)/0.98 var(--font-sans); letter-spacing: -.045em; }
.t-h1  { font: 700 clamp(32px, 5vw, 48px)/1.04 var(--font-sans); letter-spacing: -.04em; }
.t-h2  { font: 700 clamp(26px, 4vw, 38px)/1.06 var(--font-sans); letter-spacing: -.032em; }
.t-h3  { font: 600 19px/1.2 var(--font-sans); letter-spacing: -.018em; }
.t-body { font: 400 15px/1.6 var(--font-sans); }
.t-body-sm { font: 400 12.5px/1.5 var(--font-sans); }
.t-mono { font: 500 12px var(--font-mono); }
.t-label { font: 500 9.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---- motion primitives ----------------------------------------------- */
@keyframes casc-pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@keyframes casc-spin { to { transform: rotate(360deg) } }
[data-rev] { opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
[data-rev].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rev] { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}
@media print { [data-rev] { opacity: 1 !important; transform: none !important; } }