/* dispatchmy.ai shared design tokens
 *
 * Single source of truth for design primitives that MUST stay identical
 * across the marketing site (web/public/) and the dashboard SPA
 * (web/dashboard/). Both surfaces import this file; if they drift, the
 * brand drifts.
 *
 * What lives here:
 *   - Brand accent (gold) and fonts.
 *   - The shared dark palette under `:root[data-theme="dark"]`, exposed
 *     under both marketing's naming (--bg/--panel/--fg/...) and the
 *     dashboard-style naming (--bg-body/--text-primary/...). All
 *     marketing HTML files inherit it via the <link rel="stylesheet">
 *     so changing a dark-mode hex here updates every page at once.
 *
 * What does NOT live here:
 *   - Marketing light theme (intentionally warm cream — see each page).
 *   - Page-specific UI accents (graph node bg, demo status colors).
 *   - The dashboard SPA's runtime token map: web/dashboard/src/themes/
 *     {dark,light}.ts. Those still set --bg-body/--text-primary/... via
 *     JS at mount time, so they MUST mirror the values below. If you
 *     touch a dark hex here, mirror it in dark.ts (or migrate the SPA
 *     to read these CSS variables directly — TODO).
 *
 * Locations:
 *   - Authoritative file: web/tokens.css (this file).
 *   - Symlinked into web/public/tokens.css so the static marketing host
 *     can serve it under `/tokens.css`.
 *   - Imported by web/dashboard/src/index.css for the SPA bundle.
 */
:root {
  /* Brand accent — gold. Identical across both surfaces and both
     light/dark themes of the marketing site. */
  --gold: #ECB54C;
  --gold-light: #fbbf24;
  --gold-dim: #B88A2E;

  /* Type — Inter for prose/UI, JetBrains Mono for code/data. The
     `@import` of the Google Fonts stylesheet stays per-surface (marketing
     does it via <link>, dashboard via its own setup) so each surface only
     pulls the weights it needs. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;
}

/* ----------------------------------------------------------------------
 * Shared light palette (warm cream — the brand surface). One place to
 * change the light-mode look across every marketing page AND the
 * dashboard SPA (option A: dashboard adopts marketing's warm cream so
 * the brand identity is consistent in the bright surface). Page-
 * specific extras (--manager-bg, --tool-bg on the landing; demo's
 * --status-running etc.) stay in each page's own <style> block, and
 * dashboard semantics (--accent, --status-*, etc.) live in
 * web/dashboard/src/index.css's :root[data-theme="light"] block.
 * --------------------------------------------------------------------*/
:root[data-theme="light"] {
  /* Marketing-naming tokens (index.html, privacy.html, terms.html). */
  --bg: #fbf8f1;
  --panel: #ffffff;
  --panel-2: #f4efe2;
  --border: #e9e3d3;
  --border-hover: #d6cdb6;
  --fg: #3a3a40;
  --fg-strong: #3a3a40;
  --muted: #5d5d66;
  --muted-strong: #3a3a40;
  --nav-bg: rgba(251, 248, 241, 0.85);
  --shadow-warm: rgba(58, 48, 28, 0.12);
  --shadow-warm-soft: rgba(58, 48, 28, 0.06);

  /* Dashboard-naming chrome (demo.html + dashboard SPA). */
  --bg-body: #fbf8f1;
  --bg-sidebar: #f4efe2;
  --bg-topbar: #f4efe2;
  --bg-card: #ffffff;
  --bg-input: rgba(58, 48, 28, 0.04);
  --bg-hover: rgba(58, 48, 28, 0.05);
  --bg-code: rgba(58, 48, 28, 0.06);
  --bg-overlay: rgba(0, 0, 0, 0.40);
  --border-subtle: #e9e3d3;
  --border-strong: #b8ac91;
  --text-primary: #3a3a40;
  --text-secondary: #5d5d66;
  --text-tertiary: #76747a;
  --text-muted: #9c988e;
  --text-bright: #1a1a1e;
  --text-on-accent: #ffffff;
}

/* ----------------------------------------------------------------------
 * Shared dark palette (zinc-based neutral). One place to change the
 * dark-mode look across every marketing page. Page-specific extras
 * (--manager-bg, --tool-bg, demo's --status-running, etc.) stay in
 * each page's own <style> block.
 * --------------------------------------------------------------------*/
:root[data-theme="dark"] {
  /* Brand accent — gold-dim brightens slightly for contrast on dark. */
  --gold-dim: #D4A248;

  /* Marketing-naming tokens (index.html, privacy.html, terms.html). */
  --bg: #09090b;
  --panel: #111113;
  --panel-2: #18181b;
  --border: #27272a;
  --border-hover: #3f3f46;
  --fg: #f4f4f5;
  --fg-strong: #fafafa;
  --muted: #a1a1aa;
  --muted-strong: #d4d4d8;
  --nav-bg: rgba(9, 9, 11, 0.85);
  --shadow-warm: rgba(0, 0, 0, 0.5);
  --shadow-warm-soft: rgba(0, 0, 0, 0.3);

  /* Dashboard-naming tokens (demo.html, mirrored in
     web/dashboard/src/themes/dark.ts). Aliased to the values above
     wherever the semantics line up. */
  --bg-body: #09090b;
  --bg-sidebar: #0c0c0f;
  --bg-topbar: #0f0f12;
  --bg-card: #111113;
  --bg-input: #0c0c0f;
  --bg-code: #050507;
  --border-subtle: #1c1c20;
  --border-strong: #3f3f46;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-muted: #52525b;
  --text-bright: #fafafa;
  --text-on-accent: #09090b;
}