/* Duon Labs design tokens. Single source of truth for all surfaces.
 *
 * Consumers:
 *   - apps/flywheel/src/styles/main.css  (Vite, @import "../../../_brand/tokens.css")
 *   - apps/decks/style.css               (Slidev, @import "../../_brand/tokens.css")
 *   - duon/front/templates/front/base.html  (Django, served via STATICFILES_DIRS)
 *
 * To change a token: update this file, then `bun run build` each Vite surface.
 * Front-site Tailwind config in base.html mirrors these values; keep in sync.
 *
 * Documented in: .agents/duon-brand-context.md (the "what" + "why").
 */

:root {
  /* ---- Color ---------------------------------------------------------- */

  /* Core palette (mode-neutral). Each surface picks dark or light below. */
  --color-grey-100: #F2F2F2;
  --color-grey-800: #1a1a1a;
  --color-grey-900: #0A0A0A;
  --color-bg-dark: #000000;
  --color-fg-dark: #FFFFFF;
  --color-bg-light: #FFFFFF;
  --color-fg-light: #0A0A0A;
  --color-bg-paper: #F8F8F6;     /* warm off-white, optional for editorial feel */

  /* Default mode. Surfaces override these to flip light/dark.
   * Marketing site (duon/front/) sets --color-bg = light, --color-fg = light-fg.
   * Live dashboard + decks keep the dark defaults. */
  --color-bg: var(--color-bg-dark);
  --color-fg: var(--color-fg-dark);

  /* Accents (mode-invariant; identical across light + dark) */
  --color-accent-yellow: #FFD300;
  --color-accent-orange: #FF7B00;

  /* Data-viz directional pair (punchy hot palette, unified across surfaces) */
  --color-pos: #00FF88;
  --color-neg: #FF3B3B;
  --color-neutral: #888888;
  --color-info: #3b82f6;


  /* ---- Typography ----------------------------------------------------- */

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.04em;

  --line-height-body: 1.6;

  /* ---- Spacing -------------------------------------------------------- */
  /* 8px base rhythm. Tailwind's default scale already maps to this; keep
   * the canonical values here so non-Tailwind consumers (decks, raw CSS)
   * have a reference. */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- Border radii --------------------------------------------------- */

  --radius-sm: 4px;
  --radius-md: 8px;

  /* ---- Motion --------------------------------------------------------- */

  --ease-default: ease;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* Functional motion (opt-in primitives in motion.css; brutalist-honest only) */
  --duration-ticker: 30s;        /* full-cycle horizontal scroll for data streams */

  /* ---- Opacity ladder ------------------------------------------------- */
  /* For text + UI hierarchy on dark backgrounds. */

  --opacity-primary: 1;
  --opacity-secondary: 0.6;
  --opacity-tertiary: 0.5;
  --opacity-muted: 0.4;
  --opacity-subtle: 0.3;
  --opacity-faint: 0.1;
}