/* FH LogiX — canonical design tokens.
 * Served at /static/design-tokens.css by the platform task. Linked from every
 * UI file (platform templates + module shells). Single source of truth — never
 * redefine these in a local <style> block. File-unique tokens (e.g. per-stage
 * highlight colors) may still be defined locally.
 *
 * Theme switching: set [data-theme="light"] on <html> or <body>.
 */

:root,
[data-theme="dark"] {
  /* --- Base surfaces --- */
  --bg-base: #050810;
  --bg-deep: #0a0f1c;

  /* --- Glass cards (elevation tiers) --- */
  --card-bg: rgba(15, 23, 42, 0.55);
  --card-bg-elev-1: rgba(15, 23, 42, 0.55);
  --card-bg-elev-2: rgba(20, 30, 50, 0.70);
  --card-bg-elev-3: rgba(30, 41, 59, 0.85);
  --card-border: rgba(20, 184, 166, 0.18);
  --card-border-strong: rgba(20, 184, 166, 0.40);
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.4);

  /* --- Accent palette --- */
  --teal: #17AF94;
  --teal-bright: #2dd4bf;
  --teal-soft: #5eead4;
  --teal-glow: rgba(23, 175, 148, 0.32);
  --cyan: #06b6d4;
  --cyan-bright: #22d3ee;
  --cyan-soft: #67e8f9;
  --violet: #5E5BF4;
  --violet-bright: #8987f7;
  --violet-glow: rgba(94, 91, 244, 0.32);

  /* --- Text --- */
  --text-bright: #f1f5f9;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* --- Status --- */
  --warn: #E58A1A;
  --warn-bg: rgba(229, 138, 26, 0.12);
  --error: #F3293E;
  --error-bg: rgba(243, 41, 62, 0.12);
  --success: #099E58;
  --success-bg: rgba(9, 158, 88, 0.12);
  --info: var(--cyan-bright);
  --info-bg: rgba(34, 211, 238, 0.10);

  /* --- Form controls --- */
  --input-bg: rgba(5, 8, 16, 0.60);

  /* --- App chrome --- */
  --header-bg: rgba(10, 15, 28, 0.92);

  /* --- Typography --- */
  --font-display: 'Syne', 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Legacy aliases (used by change_order_engine.html — do not add new uses) --- */
  --glass-border: var(--card-border);
  --glass-border-strong: var(--card-border-strong);
  --bg-elev-1: var(--card-bg-elev-1);
  --bg-elev-2: var(--card-bg-elev-2);
  --bg-elev-3: var(--card-bg-elev-3);
}

[data-theme="light"] {
  --bg-base: #f8fafc;
  --bg-deep: #f1f5f9;

  --card-bg: rgba(255, 255, 255, 0.85);
  --card-bg-elev-1: rgba(255, 255, 255, 0.85);
  --card-bg-elev-2: rgba(248, 250, 252, 0.92);
  --card-bg-elev-3: rgba(241, 245, 249, 0.95);
  --card-border: rgba(13, 148, 136, 0.18);
  --card-border-strong: rgba(13, 148, 136, 0.40);
  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);

  --teal: #0d9488;
  --teal-bright: #0f766e;
  --teal-soft: #14b8a6;
  --teal-glow: rgba(13, 148, 136, 0.18);
  --cyan: #0e7490;
  --cyan-bright: #0891b2;
  --cyan-soft: #06b6d4;
  --violet: #5E5BF4;
  --violet-bright: #6366f1;
  --violet-glow: rgba(94, 91, 244, 0.18);

  --text-bright: #0f172a;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --warn: #b45309;
  --warn-bg: rgba(217, 119, 6, 0.12);
  --error: #be123c;
  --error-bg: rgba(225, 29, 72, 0.10);
  --success: #047857;
  --success-bg: rgba(16, 185, 129, 0.12);
  --info: #0e7490;
  --info-bg: rgba(14, 116, 144, 0.10);

  --input-bg: rgba(255, 255, 255, 0.80);
  --header-bg: rgba(255, 255, 255, 0.92);
}

/* --- Element baselines ---------------------------------------------------- */
html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
}

* { box-sizing: border-box; }
