/* =====================================================
   COIxist — Shared design tokens ("Paper & Ink")
   Single source of truth for every stylesheet and for the
   standalone 404 page. Change brand values here, nowhere else.
   ===================================================== */

:root {
  /* Surfaces */
  --paper: #FAFAF8;
  --paper-2: #F2F1EC;
  --paper-3: #E9E8E2;
  --ink: #0E1116;
  --ink-soft: #151920;

  /* Text */
  --text: #0E1116;
  --text-2: #4B5059;
  --text-3: #80858F;
  --text-on-ink: #F5F5F2;
  --text-on-ink-2: #A9ADB5;

  /* Structure */
  --line: rgba(14, 17, 22, 0.12);
  --line-strong: rgba(14, 17, 22, 0.22);
  --line-on-ink: rgba(245, 245, 242, 0.14);

  /* Accent — one colour, used for pills, focus, the closing card */
  --accent: #1F4B7A;
  --accent-ink: #163A5F;
  --accent-soft: rgba(31, 75, 122, 0.08);

  /* Logo colours — wordmark only (mark is the blue cube-network) */
  --logo-accent: #1F4B7A;
  --logo-glow: #16A8C9;

  /* Risk colours (mirror the product; muted for paper) */
  --risk-high: #B4473A;
  --risk-medium: #A3741D;
  --risk-low: #2E5F96;
  --risk-none: #3B7A5B;

  /* Typography */
  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --gutter: clamp(20px, 2.5vw, 40px);
  --container-max: 1600px;
  --measure: 720px;
  --nav-height: 64px;
  --bar-height: 36px;
  --section-y: clamp(72px, 10vw, 144px);
  --radius: 10px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 600ms;
}