/* ──────────────────────────────────────────────────────────────────────────
   volo front door — the design system's tokens

   `~/repos/volo-grid/volo-sys-doc/design-system/volo-design-system.md` §2.2 and §2.3, and
   `volo-dark-theme.md` §2. The two blocks below are COPIED from
   `volo-grid-console` `frontend/src/index.css`, which copies them from
   `volo-worktop` — the same chain, and for the same reason: the front door and
   the components it fronts are one address and must not be two palettes. If
   worktop's tokens change, re-copy rather than hand-edit.

   **This file is the only place in the page a colour is written as a value.**
   Everywhere else is `var(--token)`, and `tests/test_page.py` asserts it.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code",
               "SF Mono", Consolas, monospace;

  /* Backgrounds */
  --bg-base:    #e8e6e0;   /* Main content, edit panels */
  --bg-subtle:  #dedad2;   /* Sidebars, secondary panels */
  --bg-hover:   #d0cdc4;   /* Clickable row hover */
  --bg-active:  #dbeafe;   /* Selected row / active tab */

  /* Borders */
  --border:        #c4c0b6;
  --border-subtle: #d0cdc4;

  /* Text */
  --text-primary:   #111111;
  --text-secondary: #444444;
  --text-tertiary:  #666666;
  --text-muted:     #888888;
  --text-inverse:   #ffffff;

  /* Interactive */
  --accent-active:        #1d4ed8;
  --accent-active-bg:     #dbeafe;
  --accent-active-border: #93c5fd;
  --accent-focus:         #6366f1;
  --accent-focus-ring:    rgba(99,102,241,0.12);

  /* Dirty / unsaved */
  --accent-dirty:      #d97706;
  --accent-dirty-bg:   #fef3c7;
  --accent-dirty-text: #92400e;

  /* Actions */
  --action-primary:       #6b7280;
  --action-primary-hover: #4b5563;
  --action-danger:        #dc2626;
  --action-danger-hover:  #b91c1c;

  /* Status */
  --status-running:  #3b82f6;
  --status-success:  #16a34a;
  --status-error:    #dc2626;
  --status-warning:  #d97706;
  --status-queued:   #8b5cf6;
  --status-idle:     #999999;

  /* Status backgrounds */
  --status-running-bg:  #dbeafe;
  --status-success-bg:  #dcfce7;
  --status-error-bg:    #fee2e2;
  --status-warning-bg:  #fef3c7;
  --status-queued-bg:   #ede9fe;
  --status-idle-bg:     #f5f5f5;

  /* Status text */
  --status-running-text:  #1d4ed8;
  --status-success-text:  #15803d;
  --status-error-text:    #991b1b;
  --status-warning-text:  #92400e;
  --status-queued-text:   #5b21b6;
  --status-idle-text:     #666666;

  /* Feature accent colours */
  --feature-config:    #3b82f6;
  --feature-quality:   #10b981;
  --feature-pipeline:  #8b5cf6;
  --feature-media:     #f59e0b;
  --feature-output:    #ef4444;
  --feature-system:    #6366f1;
  --feature-analytics: #0ea5e9;

  font-family: var(--font-sans);
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light;
}

/* ── volo Dark Theme — token overrides (volo-dark-theme.md §2) ───────────── */
[data-theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --bg-base:    #1c1c1e;
  --bg-subtle:  #252528;
  --bg-hover:   #2e2e32;
  --bg-active:  #1e3a5f;
  --bg-overlay: rgba(0, 0, 0, 0.6);

  /* Borders */
  --border:        #3a3a3e;
  --border-subtle: #2e2e32;

  /* Text */
  --text-primary:   #e8e8e6;
  --text-secondary: #b0b0ad;
  --text-tertiary:  #8a8a88;
  --text-muted:     #707074;
  --text-inverse:   #ffffff;

  /* Interactive */
  --accent-active:        #60a5fa;
  --accent-active-bg:     #1e3a5f;
  --accent-active-border: #2563eb;
  --accent-focus:         #818cf8;
  --accent-focus-ring:    rgba(129,140,248,0.18);

  /* Dirty / unsaved */
  --accent-dirty:      #d97706;
  --accent-dirty-bg:   #451a03;
  --accent-dirty-text: #fbbf24;

  /* Actions — unchanged (grey is theme-invariant) */
  --action-primary:       #6b7280;
  --action-primary-hover: #4b5563;
  --action-danger:        #dc2626;
  --action-danger-hover:  #b91c1c;

  /* Status colours — unchanged */
  --status-running:  #3b82f6;
  --status-success:  #16a34a;
  --status-error:    #dc2626;
  --status-warning:  #d97706;
  --status-queued:   #8b5cf6;
  --status-idle:     #6a6a68;

  /* Status backgrounds — darkened */
  --status-running-bg:  #1e3a5f;
  --status-success-bg:  #14532d;
  --status-error-bg:    #450a0a;
  --status-warning-bg:  #451a03;
  --status-queued-bg:   #2e1065;
  --status-idle-bg:     #2e2e32;

  /* Status text — lightened */
  --status-running-text:  #93c5fd;
  --status-success-text:  #86efac;
  --status-error-text:    #fca5a5;
  --status-warning-text:  #fcd34d;
  --status-queued-text:   #c4b5fd;
  --status-idle-text:     #9a9a98;

  /* Feature accent colours — unchanged (dots only, theme-agnostic) */
}

/* ── Page additions ─────────────────────────────────────────────────────────
   One departure only, and it is the console's: worktop hardcodes its scrollbar
   colours in the rules themselves, so the same values are promoted to tokens
   here and the "no hardcoded colour" rule holds across the whole page.
   `volo-dark-theme.md` §3.2 is the dark pair.                              */
:root {
  --scrollbar-thumb:       #d0d0c8;
  --scrollbar-thumb-hover: #b0b0a8;

  /* One colour for every tile's title (Kit, 2026-10-03). White is unreadable on
     the light tile surface (#dedad2, 1.3:1), so the light theme's one colour is
     the primary text colour and the dark theme's is white. DEC-027. */
  --tile-title:            var(--text-primary);
}

[data-theme="dark"] {
  --scrollbar-thumb:       #4a4a4e;
  --scrollbar-thumb-hover: #5a5a5e;

  --tile-title:            #ffffff;
}