/* 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 — Big Sky (coastal, sunny). The landing is the reference. ---- */
  --bg:            #F5F9FB;  /* luminous sky-white ground */
  --bg-deep:       #E9F1F5;  /* recessed / fills */
  --ink:           #10293A;  /* primary text — deep sky-slate */
  --ink-soft:      #37525F;  /* secondary text */
  --muted:         #6A8698;  /* labels, soft lines */
  --rule:          #D8E4EA;  /* hairline borders */
  --accent:        #2F8FCE;  /* sky-blue — the accent */
  --accent-soft:   #A9D0E6;
  --olive:         #4E9C77;  /* meadow green — done / success */
  --cobalt:        #3B7BA8;  /* links / the gig route */
  --ink-on-accent: #FBFEFF;
  --card:          #FFFFFF;  /* raised surfaces */
  --coral:         #E07A54;  /* warm accent — line symbols */

  /* ---- type ---- */
  --font-serif: 'Outfit', ui-sans-serif, system-ui, sans-serif; /* display / headings (geometric) */
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;      /* state + labels */
  --font-sans:  'Figtree', ui-sans-serif, system-ui, sans-serif; /* prose + buttons */

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

  /* ---- the grain overlay (tactile, not flat) — very subtle on the light ground ---- */
  --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.12 0 0 0 0 0.15 0 0 0 0.015 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=Outfit:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Figtree:wght@300;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). */