/* ============================================================
   Incode website — design tokens
   Single source of truth: every component/page stylesheet uses
   these custom properties. Never hardcode a hex outside here.
   ============================================================ */

:root {
  /* Permitted palette */
  --color-grey-50: #F9F9F9;
  --color-grey-100: #EBECEF;
  --color-grey-200: #C6C8D2;
  --color-grey-300: #A3A8B8;
  --color-grey-400: #6E758C;
  --color-grey-500: #3A3E4B;
  --color-grey-600: #262831;

  --color-blue-100: #E5F0FF;
  --color-blue-200: #CCE1FF;
  --color-blue-500: #0054FF;

  /* PURE white (Sofia, 2026-07-26): card surfaces lifting off the grey-50
     canvas, text on ink. Was #F9F9F9 (a grey-50 twin) — those consumers now
     say grey-50; the 334 literal #fff uses can migrate here over time. */
  --color-white: #FFFFFF;
  /* ONE black in the system (Sofia, 2026-07-26): the ink. Text and dark
     canvases share it; rich/off/x3 names below are legacy aliases. */
  --color-black: #050505;

  /* Semantic aliases */
  /* Full white page background everywhere — no off-white (Sofia 2026-08-17).
     grey-50 stays available for component-level tints only. */
  --color-background: var(--color-white);
  --color-foreground: var(--color-grey-500);

  --color-blue: var(--color-blue-500);

  /* Placeholder highlight (localhost explorations only): marks copy slots
     awaiting real content — never ships in final pages. Used by .pr-ph. */
  --color-placeholder-yellow: #FFE96B;

  /* legacy names — kept ONLY because pages/govfacematch.css (hands-off,
     separate owner) still consumes them; never use in new code */
  --color-rich-black: var(--color-black);
  --color-off-black: var(--color-black);

  --color-grey-on-black: var(--color-grey-200);
  /* a11y (2026-07-29 audit): plain grey-400 measures 4.35:1 on white and
     3.88:1 on grey-100 — under the WCAG 4.5:1 body floor. 15% black mixed
     in lifts it to ~5.9:1 on white / ~5.0:1 on grey-100 while staying in
     the same grey family. Existing tokens only, per the no-new-hex rule. */
  --color-grey-on-white: color-mix(in srgb, var(--color-grey-400) 85%, var(--color-black));
  /* kickers (the tracked line above section titles) read darker than body
     grey on bright grounds; dark grounds keep their white-alpha (Sofia,
     2026-07-24 · grey-450 removed 2026-07-26, kickers take grey-500) */
  --color-kicker-on-white: var(--color-grey-500);

  --color-border-light: var(--color-grey-100);
  --color-border-dark: var(--color-grey-600);

  --color-tint-white-05: rgba(249, 249, 249, 0.05);
  --color-tint-white-10: rgba(249, 249, 249, 0.10);
  --color-illustration-grey: rgba(163, 168, 184, 0.10);

  /* Accent reds — Tailwind 4 defaults, inherited by the source pages from
     Tailwind's built-in palette (they sit OUTSIDE the app's declared @theme
     palette, but the design depends on them). Used for the "problem" /
     "challenge" card accents on /products/govfacematch/ and
     /products/on-device-age-estimation/. */
  --color-red-300: oklch(0.808 0.114 19.571); /* ≈ #ffa2a2 */
  --color-red-400: oklch(0.704 0.191 22.216); /* ≈ #ff6467 */
  --color-red-500: oklch(0.637 0.237 25.331); /* ≈ #fb2c36 */

  /* Flow-diagram green — sampled from the GovMatch v2 flow art (check badges,
     result borders, label dots). Used by the HTML rebuild of the unified-offering
     flows on /products/govfacematch/ (components/unified-flow.css), so the HTML
     parts match the cropped art tiles in public/flow-tiles/. */
  --color-green-flow: #1EC677;

  /* Workflow pass green — deeper than the flow-diagram green so it reads on
     white node cards. Used for the Yes branch / pass states of the interactive
     workflow demo on /platform/ (pages/platform.css + behaviors/workflow-demo.js). */
  --color-green-600: #1E9E56;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Type */
  --font-display: "Rethink Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --container-large: 1440px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 0.6s;

  /* X3 experimental home test (pages/x3.css) — dossier ink + aurora blues
     from the design-hub Experimental 3 variant */
  --color-x3-ink: var(--color-black); /* legacy, govfacematch only */
  --color-x3-blue-deep: var(--color-blue-500);
  /* collapsed onto the ramp (Sofia, 2026-07-26: blues 100-600 are enough —
     these names stay for the fraud-report red-alt remap contract, but they
     are ramp tones now, not colors of their own) */
  --color-x3-blue-bright: var(--color-blue-500);
  --color-x3-indigo: var(--color-blue-500);
  /* Remap-immune aliases: computed at :root, so sections that re-theme the
     x3 blues (fraud report red-alt) can restore the product blues locally */

  /* Platform diff scenes — the "What sets Incode Platform apart"
     illustrations on the home + /agentic-fraud/
     (components/platform-scene.css). Complementary colors are the
     design-system canonical hexes (Ale, 2026-07-22): purple #820AD1,
     green #189F60, tangerine #FF9900, red #FF5A5F. Pink = the workflow
     Condition chip, sampled from public/highlights/workflow-canvas.svg
     (the mega-menu Workflow abstraction uses the same diamond pink). */
  --color-purple-100: #F2E7FB;
  --color-purple-500: #820AD1;
  --color-yellow-500: #FF9900;
  --color-green-500: #189F60;
  --color-red-brand: #FF5A5F;
  /* Red-alt exploration (fraud report red-alt variant): negative-stat accent
     ramp mirroring the blue scale (append-only, like --color-green-600) */
  --color-red-200: #FFD9DA;
  --color-red-600: #D91F26;
  --color-pink-500: #E0489A; /* renamed from condition-pink (Sofia, 2026-07-26) */
  /* client brand colors for case-study pages (Sofia, 2026-08-10): each
     story's About band paints in the client's color with white type —
     one token per client, sampled from the official mark. */
  --color-etsy-orange: #F45800; /* /case-studies/etsy/ · sampled from clients/etsy.svg */
  /* accent 100 tints for pills and backgrounds (Sofia, 2026-07-26) — the
     house recipe: the 500 at a 10% mix over white, same as blue-100 and
     purple-100. Greens keep their existing --color-green-100. */
  --color-yellow-100: #FFF5E6;
  --color-red-100: #FFEAEB;
  --color-pink-100: #FCEDF5;

  /* Workflow builder v2 (#workflow-demo on /platform/) — status tints for the
     pass/review outcome nodes and the run verdict pills. Green pairs with the
     existing --color-green-600 pass green; ambers are the "needs review" ramp
     (dashboard yellow family). Used only by pages/platform-builder.css +
     behaviors/workflow-builder.js. */
  --color-green-100: #E3F4EA;
  --color-green-200: #BFE3CE;
  --color-amber-100: #FBF3DF;
  --color-amber-200: #EAD9A8;
  --color-amber-600: #B98900;

  /* ---------- Global type + spacing scale (Sofia, 2026-07-25) ----------
     One shared ladder for every stylesheet. Values are the site's dominant
     steps from a full inventory of all 53 stylesheets; near-identical
     strays (≤0.5px apart, same logic) were folded into their neighbor:
     10.5→10 · 14.5→14 · 15.5→15 · 16.5→16 · 0.05em→0.04em · 1.625/1.65→1.6.
     Display sizes (24px+/clamp) stay per-page — they carry page identity. */

  /* type scale — unified 2026-07-26 (Sofia): even 2-point jumps only.
     9 steps folded to 6: 11→12 · 13→14 (labels join card copy) ·
     15→16 (body joins intros). Retired names: --fs-2xs → --fs-xs ·
     --fs-md → --fs-sm · --fs-body-lg → --fs-body. */
  --fs-xs: 12px;       /* tiny tracked numbers, chips, small labels, captions */
  --fs-kicker: 14px;   /* the kicker/eyebrow line above titles — one size everywhere
                          (Sofia, 2026-07-28: 12px read extremely small; +2) */
  --fs-sm: 14px;       /* nav and form labels, dense UI copy, compact body, card copy */
  --fs-body: 16px;     /* default body, section intros and subs */
  --fs-xl: 18px;       /* lead lines, small headings */
  --fs-2xl: 20px;      /* block titles */
  --fs-3xl: 22px;      /* large block titles */

  /* tracking ladder */
  --track-tightest: -0.03em; /* giant display */
  --track-tighter: -0.02em;  /* display titles */
  --track-tight: -0.01em;    /* subheads, stat values */
  /* opened tracking RETIRED (Sofia, 2026-08-07: "never use opened
     kerning — keep kerning at 0 for all circumstances and styles";
     only titles keep their deliberate tight ladder above). The tokens
     stay so every consumer flattens to 0 from here. */
  --track-wide: 0;
  --track-wider: 0;
  --track-widest: 0;

  /* leading */
  --leading-body: 1.6;
  --leading-snug: 1.5;

  /* spacing: section rhythm + container inline padding */
  --space-section: 96px;
  --space-section-md: 80px;
  --space-section-sm: 64px;
  --space-inline: 20px;
  --space-inline-md: 24px;
  --space-inline-lg: 32px;
}