/* ==========================================================================
   Q4Family Design v2 — tokens  (Emerald on Ink)
   --------------------------------------------------------------------------
   Scope:   everything lives on `body.q4-app`, so pages that do NOT opt in
            (they use base.html / base_dashboard.html) are never affected.
   Theme:   dark is the default (no attribute). Light = `data-theme="light"`
            OR the legacy `.light-mode` class (q4-ui.js sets both, so old
            inline CSS such as `body.light-mode .foo {}` keeps working).
   Specificity: `html body.q4-app…` (0,1,2+) deliberately beats the legacy
            `:root` and `body.light-mode` variable blocks in style.css /
            shared.css, whatever the load order.
   All contrast pairs were checked: text >= 4.5:1, control borders/focus
   ring/chart marks >= 3:1, in both themes.
   ========================================================================== */

html body.q4-app {
  /* ---- Color: surfaces & text (dark) ---- */
  --bg: #0a0f0d;
  --surface: #111815;
  --surface-raised: #17201c;
  --border: #24312b;
  --border-strong: #6b8378;
  --ink: #e8f1ec;
  --ink-muted: #93a39b;

  /* ---- Color: brand ---- */
  --primary: #34d399;
  --primary-hover: #6ee7b7;
  --on-primary: #04130c;
  --primary-soft: #34d3991f;
  --focus: #6ee7b7;

  /* ---- Color: status (always pair with an icon or a word) ---- */
  --success: #4ade80;   --success-soft: #4ade801f;
  --warning: #fbbf24;   --warning-soft: #fbbf241f;
  --danger:  #f87171;   --danger-soft:  #f871711f;   --on-danger: #1c0606;
  --info:    #60a5fa;   --info-soft:    #60a5fa1f;
  --overlay: #000000e0;

  /* ---- Color: data-viz categorical (>= 3:1 on surface) ---- */
  --chart-1: #34d399; --chart-2: #60a5fa; --chart-3: #fbbf24;
  --chart-4: #a78bfa; --chart-5: #fb7185; --chart-6: #94a3b8;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px #00000066;
  --shadow-md: 0 8px 24px #00000080;
  --shadow-lg: 0 24px 64px #000000a6;

  /* ---- Type ---- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Radius ---- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;

  /* ---- Layout ---- */
  --layout-container: 1120px;
  --layout-content: 1280px;
  --layout-sidebar: 248px;
  --layout-topbar: 56px;

  /* ---- z-index ---- */
  --z-sticky: 20; --z-sidebar: 40; --z-dropdown: 60; --z-modal: 80; --z-toast: 100;

  color-scheme: dark;
}

html body.q4-app[data-theme="light"],
html body.q4-app.light-mode {
  --bg: #f4f7f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #d5dfda;
  --border-strong: #6f8178;
  --ink: #0d1512;
  --ink-muted: #55665e;

  --primary: #047857;
  --primary-hover: #065f46;
  --on-primary: #ffffff;
  --primary-soft: #0478571a;
  --focus: #065f46;

  --success: #166534;   --success-soft: #1665341a;
  --warning: #92400e;   --warning-soft: #92400e1a;
  --danger:  #b91c1c;   --danger-soft:  #b91c1c1a;   --on-danger: #ffffff;
  --info:    #1d4ed8;   --info-soft:    #1d4ed81a;
  --overlay: #0d1512e0;

  --chart-1: #047857; --chart-2: #1d4ed8; --chart-3: #b45309;
  --chart-4: #6d28d9; --chart-5: #be123c; --chart-6: #475569;

  --shadow-sm: 0 1px 2px #0d151214;
  --shadow-md: 0 8px 24px #0d15121f;
  --shadow-lg: 0 24px 64px #0d151229;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Compatibility aliases — LEVEL 1 "re-skin".
   Old page-level CSS still reads the legacy variable names. Mapping them to
   the new tokens re-colours every un-migrated rule at once, in both themes.
   Delete this block in the final cleanup phase (see guide §9).
   -------------------------------------------------------------------------- */
html body.q4-app {
  --bg-soft: var(--surface);
  --card: var(--surface);
  --card-strong: var(--surface-raised);
  --card-border: var(--border);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --primary-strong: var(--primary-hover);
  --secondary: var(--surface-raised);
  --shadow: var(--shadow-lg);
  --shadow-soft: var(--shadow-md);
  --radius-xl: var(--radius-lg);
  --container: var(--layout-container);
}

/* Legacy globals in style.css that fight the new look (violet glow, etc.) */
html body.q4-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  animation: none;
  -webkit-font-smoothing: antialiased;
}
html:has(body.q4-app) { background: #0a0f0d; }
html:has(body.q4-app[data-theme="light"]),
html:has(body.q4-app.light-mode) { background: #f4f7f5; }