/* FCD design tokens : thermographic ember on warm ink. Self-hosted fonts (CSP-clean). */

/* ---- self-hosted faces (no runtime CDN; default-src 'self' safe) ---- */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url('fonts/hanken-grotesk-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* ground / surfaces : warm ink, tinted amber not blue */
  --bg:#14100D;
  --bg-2:#100C0A;
  --surface:#1D1813;
  --surface-2:#271F18;
  --surface-3:#332818;

  /* neutrals : warm bone, readable by contract (no pure #fff, no low-opacity text) */
  --text:#F4EEE3;        /* ~14:1 on --bg */
  --text-muted:#B7AC9B;  /* ~6:1 on --bg */
  --text-dim:#8A7F70;    /* ~3.4:1 : decorative/labels on surface only, never body */

  /* brand accent : signal ember (the heat we detect) */
  --accent:#F4652B;
  --accent-ink:#1A0E06;  /* readable on --accent */
  --ember-hi:#FF9A5A;
  --ember-deep:#C13D14;

  /* cold analysis side (used sparingly; NOT cyber-cyan) */
  --plasma:#EAE0CC;
  --plasma-cool:#CBB9A0;

  /* semantic (state only, separate from brand) */
  --crit:#E5484D;
  --warn:#F2A93B;
  --good:#3FB98C;

  /* lines / light */
  --border:rgba(244,238,227,0.10);
  --border-strong:rgba(244,238,227,0.18);
  --ember-line:rgba(244,101,43,0.42);

  /* elevation : light from top, tinted to ember */
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 22px 50px -22px rgba(0,0,0,.7);
  --shadow-glow:0 0 44px rgba(244,101,43,.28);

  --radius:6px;      /* precise/technical, not friendly-rounded */
  --radius-lg:12px;

  /* 8pt spacing scale */
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:2rem;  --space-6:3rem;   --space-7:4.5rem; --space-8:7rem;

  /* type */
  --font-display:'Clash Display','Hanken Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* editorial scale ×1.333 */
  --step--1:.82rem; --step-0:1.06rem; --step-1:1.42rem; --step-2:1.89rem;
  --step-3:2.52rem; --step-4:3.36rem; --step-5:4.48rem; --step-6:5.9rem;

  --dur:180ms; --dur-slow:420ms;
  --ease:cubic-bezier(.2,.8,.2,1);
  --measure:64ch;

  /* FCD-027 : the ledger + document pages. Derived from the values above, nothing new invented. */
  --mark-pass:rgba(244,238,227,0.34);   /* bone at rest: the quiet majority */
  --mark-fail:var(--accent);            /* the only place ember lands in the field */
  --mark-na:rgba(244,238,227,0.10);     /* hairline, hollow */
  --mark-skip:rgba(244,238,227,0.05);   /* fainter than na, and never filled */
  --mark-size:clamp(9px,2.1vw,15px);    /* floor is the 320px case */
  --mark-gap:clamp(3px,0.7vw,5px);
  --measure-doc:72ch;                   /* legal reading, longer than --measure */
  --rail-h:56px;                        /* the mobile CTA bar, was a literal in style.css:212 */
  /* Two more the design did not list, added rather than written as literals in style.css, because
     the rule that no new CSS carries a raw value is the one that keeps the system honest. */
  --shell-pad:clamp(1.1rem,4vw,2.5rem); /* .shell's own padding; the ledger cancels it to bleed */
  --target:44px;                        /* minimum interactive target (responsive contract 10.6.4) */
}

/* FCD-049 : the Year Rule. No new hue, face, radius or shadow. Four derived tokens. */
:root{
  --yr-track-h:12px;        /* one track. 12px reads as a rule, not a bar chart */
  --yr-mark-w:2px;          /* a point event, and the rendering floor for the ember slice */
  --yr-row-gap:var(--space-1);
  --dur-sweep:900ms;        /* the single orchestrated moment, and the only new duration */
}

/* FCD-053 : the cadence gap. No new hue, face, radius or shadow. Derived layout values only, so
   the rule that no CSS carries a raw literal holds through the redesign too. */
:root{
  --cg-glyph:clamp(7px,1.5vw,10px);     /* one pictogram unit (a 25-CVE mark), floor is the 320px case */
  --cg-glyph-gap:clamp(2px,.5vw,3px);
  --cg-eye:16px;                        /* the info-eye glyph; its target is padded to --target */
  --dur-climb:700ms;                    /* Movement 3 rise; the sweep and the climb are the only durations */
  /* SVG label + numeral sizes, named rather than sprinkled as px literals through the chart CSS */
  --cg-lab:11px;                        /* an on-mark chart label */
  --cg-lab-lg:13px;                     /* a slightly stronger on-mark label */
  --cg-num-sm:18px;                     /* a chart numeral inside an SVG (curve 58) */
  --cg-num:22px;                        /* the volume crest numeral */
  --cg-spine:2px;                       /* the connective rail that ties the three movements */
}