/*
 * Flowformance design tokens — the single source of styling truth (PRD §12).
 * Both the React SPA (web/) and the Hono JSX SSR (portal + marketing) import this file.
 * Do not fork these values; change them here and everything follows.
 *
 * DESIGN1 (2026-08-19): remapped to the new "editorial" teal system (design handoff) — teal/sand/mint
 * palette + Instrument Serif / IBM Plex. Token NAMES are unchanged, so the whole app reskins from here.
 * The marketing landing (src/components/Landing.tsx) is bespoke and does NOT read these tokens.
 */

:root {
  /* Paper / surfaces — near-white with a mint tint; canvas/cards are pure white */
  --paper: #f8fbf9;
  --paper-2: #f1f6f4;
  --paper-3: #ffffff;

  /* Ink / text */
  --ink: #14201e;
  --ink-soft: #2e3b38;
  --muted: #5d6b67;
  --muted-2: #8a968f;

  /* Lines / borders */
  --line: #e5eae7;
  --line-soft: #eff3f1;

  /* Accent — brand teal (primary action, wordmark, links) */
  --accent: #0e3b3a;
  --accent-2: #14524c;
  --accent-soft: #dfeae5;

  /* Clay — record state / alert (out of date, recording dot) */
  --clay: #c4553f;
  --clay-soft: #f5e4de;

  /* Gold — drafts / in review / overdue */
  --gold: #c08a2e;
  --gold-soft: #f3ead4;

  /* Shadows — soft, teal-inked, flatter than the old paper look */
  --shadow-sm: 0 1px 2px rgba(14, 32, 30, 0.05);
  --shadow: 0 1px 2px rgba(14, 32, 30, 0.04), 0 10px 30px rgba(14, 32, 30, 0.07);
  --shadow-lg: 0 2px 4px rgba(14, 32, 30, 0.05), 0 22px 55px rgba(14, 32, 30, 0.13);

  /* Type families. Ben's call (2026-08-20): content titles/headings use the SANS — the same font as
     the Flowformance wordmark — because Instrument Serif read as cramped and hard to read at title
     sizes. So --serif now points at IBM Plex Sans too; the token NAME is legacy (the whole app + the
     SSR pages key their headings off it, so this one line reskins them all). Real Instrument Serif
     survives only on the marketing landing, which scopes its own --serif (src/components/Landing.tsx). */
  --serif: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* IBM Plex Sans loads real 400/500/600, so headings render at their set weight; keep font-synthesis
     off so nothing faux-synthesizes a missing style. */
  font-synthesis: none;

  /* Radii — crisper than before, matching the portal panels */
  --r: 12px;
  --r-sm: 8px;

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