/* tokens.css — the WeYala / Ampera editorial design language, as ONE source.
 *
 * This is the single token set every surface should pull from — the dashboard,
 * the workspace, the front doors, marketing, and the Product Legibility export
 * (docs/46) — so nothing drifts toward generic SaaS ([[feedback_weyala_design_canonical]]).
 * Token-first, not library-first: pick the palette/type/motifs once here;
 * components (shadcn), charts (Tremor), diagrams (themed Mermaid) all inherit.
 *
 * See docs/48-design-system.md for the architecture + recommended tool stack.
 * Link it: <link rel="stylesheet" href="/tokens.css"> (before page styles).
 */
:root {
  /* ---- palette ---- */
  --bg:            #FAF6EE;  /* cream ground */
  --bg-deep:       #F1ECDF;  /* recessed / fills */
  --ink:           #1A1612;  /* primary text */
  --ink-soft:      #3F362C;  /* secondary text */
  --muted:         #8A7F6F;  /* labels, soft lines */
  --rule:          #D9CFB8;  /* hairline borders */
  --accent:        #C24A1F;  /* burnt sienna — the accent */
  --accent-soft:   #E5A77F;
  --olive:         #56603D;  /* done / scope / success */
  --cobalt:        #1E2F8A;  /* links / the gig route */
  --ink-on-accent: #FFFBEF;
  --card:          #FFFDF8;  /* raised surfaces */

  /* ---- type ---- */
  --font-serif: 'Instrument Serif', Georgia, serif;        /* story + headings */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace; /* state + labels */
  --font-sans:  'Geist', ui-sans-serif, system-ui, sans-serif; /* prose + buttons */

  /* ---- radii / motion ---- */
  --radius:    11px;
  --radius-sm: 8px;
  --ease:      cubic-bezier(.2,.7,.2,1);

  /* ---- the grain overlay (tactile, not flat) ---- */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.075 0 0 0 0.02 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Font face loading — surfaces that link tokens.css get the brand fonts. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600&family=Geist:wght@400;500;600&display=swap');

/* The Mermaid house-theme init directive (for diagram-as-code surfaces) lives
   in code: shared/legibility/core.ts THEME + tools/legibility/editorial.css.
   It mirrors these tokens — keep them in sync (one palette, every output). */