/* ============================================================
   Five Blocks — design system tokens (single source of truth)
   Shared with the "FiveBlocks Redesign" system so deliverables,
   web, and app all render in one visual language.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* ── neutrals / surfaces ── */
  --paper:#f5f7f9; --paper2:#eef1f4; --paper3:#e6eaef; --ink:#14181f;
  --muted:#5b6570; --line:#e2e7ec;

  /* ── brand core ── */
  --slate:#23405e; --slate-d:#1a3149; --slate-dd:#142539;
  --azure:#0573ba; --green:#6c9e42; --green-tx:#41702b; --amber:#d99821; --neg:#c2542f;
  --on-dark:#e8eaed; --on-dark-mut:#9aa3ad;

  /* ── brand facet spectrum (from the real logo mark) ── */
  --f1:#0673BA; --f2:#1D8FCE; --f3:#3D9BD4; --f4:#6C9E41; --f5:#8CC640;
  --f6:#EE9B1A; --f7:#F16B5C; --f8:#ED1F28; --f9:#7763AC; --f10:#452D7A;

  /* ── sentiment tokens (IMPACT classification) ── */
  --sent-owned:#23405e; --sent-positive:#34a853; --sent-neutral:#9aa0a6;
  --sent-negative:#ea4335; --sent-unrated:#a0a8b4;

  /* ── IMPACT markup palette (mirrors the IMPACT product's _colors.scss so
       clients trained on IMPACT timelines read our SERP views identically) ── */
  --imp-pos:#86ab6e; --imp-soso:#8d8da0; --imp-neg:#b63a31;
  --imp-pos-bg:#c2f0c2; --imp-soso-bg:#d7d7d9; --imp-neg-bg:#ffb2b2;
  --imp-owned:#2c5da6; --imp-notowned:#da7f42; --imp-resembler:#a98d71;
  --imp-owned-bg:#b2c2d1; --imp-notowned-bg:#ffc299; --imp-resembler-bg:#d4c6b8;
  --imp-ath-expert:#a7b1e9; --imp-ath-social:#3f7e55; --imp-ath-crowd:#24a2dc;
  --imp-ath-wiki:#bf956f; --imp-ath-iauth:#613250;
  /* IMPACT timeline chrome (from its _colors/_sizes.scss) */
  --imp-ui-canvas:#cfd5df; --imp-ui-card:#fff; --imp-ui-header-bg:#e7effc;
  --imp-ui-link:#003C8F; --imp-ui-shadow:#777777; --imp-ui-separator:#e7effc;

  /* ── application UI surfaces & washes (app/deliverable chrome, derived from brand palette) ── */
  --white:#fff; --ink-2:#41454d;
  --azure-wash:#dceefa; --green-wash:#e6f0e0; --violet-wash:#ece7f6; --neg-wash:#fbd5d2;
  --amber-wash:#f7ecd4; /* was referenced but never defined — every waiting pill + the
    offline banner fell back to grey var(--paper2) instead of the intended amber tint */
  --amber-tx:#9a6a12; --neg-strong:#c5221f; --neg-on-dark:#f0857a;
  --on-dark-dim:#6c7d92; --on-dark-faint:#57677d; --slate-dot:#5a6b80;
  /* ── pill/control metrics + text-on-wash contrast (P1.1 pill archetypes) ──
     Wash/text pairing reads --green-wash/--green-tx · --amber-wash/--amber-tx
     · --neg-wash/--neg-tx · --azure-wash/--azure-tx. Rule: text on ANY wash
     uses the --*-tx variant (≥4.5:1), never the base hue. --azure/--neg-strong
     stay for borders/hover/interactive accents + non-pill consumers. */
  --h-pill:20px;    /* archetype-1/3 fixed pill height */
  --h-ctl:24px;     /* archetype-2 minimum interactive height (Fitts floor) */
  --neg-tx:#b51e1b;   /* text-on-neg-wash; 4.9:1 on --neg-wash (was #c5221f/--neg-strong, only 4.29:1 — under AA at pill text sizes) */
  --azure-tx:#045a92; /* text-on-azure-wash; 6.1:1 on --azure-wash (was --azure ~4.2:1) */
  /* ── chart pack (C5, Design-approved 2026-07-10 §6-D4) — series slots +
     chrome. Slots are ALIASES of existing hues, never new colors; the fixed
     categorical order (1..4) is load-bearing (CVD-validated, chart-pack spec
     §2.4) — do not reorder. --ch-peer is the emphasis-form context gray. */
  --ch-1:var(--azure); --ch-2:var(--amber); --ch-3:var(--f9); --ch-4:var(--green-tx);
  --ch-peer:var(--sent-unrated); --ch-grid:var(--line); --ch-wash-op:.10;
  /* ── label hues (Phase-2 task-mgmt labels, Design-signed 2026-07-10) ──
     Three families OUTSIDE the semantic set (red/amber/azure/green/violet) so a
     label never reads as a state. Same wash/--*-tx pairing + text-on-wash rule
     (≥4.5:1, measured ≥5:1 here AND on white for inline use). NB: the family is
     `steel`, NOT `slate` — `--slate` is the brand navy and a stored label key;
     steel is a distinct value (Design namespace ruling). */
  --teal-wash:#d7ecec;  --teal-tx:#0f6c6c;  /* 5.06:1 on wash · 6.21:1 on white */
  --rose-wash:#fbe0ea;  --rose-tx:#a52458;  /* 5.66:1 on wash · 7.02:1 on white — magenta-shifted off --neg */
  --steel-wash:#e3e7f0; --steel-tx:#3d4b6b; /* 7.01:1 on wash · 8.69:1 on white — distinct from --azure + grey meta */

  /* ── type ── */
  --serif:"Source Serif 4",Georgia,serif; /* @kind font */
  --sans:"Inter",system-ui,-apple-system,sans-serif; /* @kind font */
  --mono:"IBM Plex Mono",monospace; /* @kind font */

  /* ── spacing / radius ── */
  --r-sm:7px; --r-md:12px; --r-lg:16px; --r-pill:100px;
  --sp-1:6px; --sp-2:10px; --sp-3:16px; --sp-4:24px; --sp-5:34px; --sp-6:48px;
  /* ── layout ── */
  /* content column ceiling for work/reading surfaces (shell restructure,
     spec A3): replaces the hard-coded 1460px .doc cap that strangled wide
     monitors. Work surfaces break out of this to full-bleed; reading prose
     keeps a per-element 72ch measure inside it. */
  --content-max:1920px;
  --shadow-card:0 14px 38px rgba(35,64,94,.08);
  --shadow-pop:0 18px 50px rgba(35,64,94,.12);
}

/* ── base ── */
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"cv05","ss01"}
h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:600;line-height:1.1;letter-spacing:-.012em}
p{margin:0}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.more{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--azure)}
.spectrum{height:4px;width:100%;border:0;background:linear-gradient(90deg,
  var(--f10) 0%,var(--f9) 11%,var(--f1) 22%,var(--f2) 33%,var(--f3) 44%,var(--f4) 55%,var(--f5) 66%,var(--f6) 77%,var(--f7) 88%,var(--f8) 100%)}

/* ── preview shell (canvas only) ── */
.ds-prev{padding:40px;background:var(--paper);min-height:100%}
.ds-prev.dark{background:var(--slate);color:#fff}
.ds-prev.white{background:#fff}
.ds-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.ds-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}