/*
 * WorkflowTools — Theme tokens
 *
 * Theme:    dark | light
 * Palette:  warm | neutral | cold
 *
 * Six combinations.  Defaults (no data attribute) = dark + neutral
 * (matches the v1 fuchsia/zinc baseline).
 *
 * In **light** themes the accent is always black —
 * buttons / toggles / focus states pick that up automatically.
 */

/* ============================================================
   DEFAULTS — dark + neutral (current v1 baseline)
   ============================================================ */
:root {
  /* Surfaces */
  --bg:           #18181b;
  --bg-elev:      #1f1f23;
  --surface:      #27272a;
  --surface-hi:   #2f2f33;
  --border:       #3f3f46;
  --border-soft:  #2e2e33;

  /* Text */
  --text:         #e4e4e7;
  --text-dim:     #a1a1aa;
  --text-muted:   #71717a;
  --text-faint:   #52525b;

  /* Brand / accent */
  --accent:       #ec4899;
  --accent-dim:   #be2972;
  --accent-soft:  rgba(236, 72, 153, 0.12);
  --accent-line:  rgba(236, 72, 153, 0.30);

  /* Semaphore */
  --ok:           #22c55e;
  --ok-soft:      rgba(34, 197, 94, 0.12);
  --warn:         #eab308;
  --warn-soft:    rgba(234, 179, 8, 0.14);
  --crit:         #ef4444;
  --crit-soft:    rgba(239, 68, 68, 0.12);
  --info:         #3b82f6;
  --info-soft:    rgba(59, 130, 246, 0.14);

  /* Fonts */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Partitura — per-state colours
     (kept consistent across dark palettes; light overrides below) */
  --st-coding-color:    #60a5fa;
  --st-coding-bg:       rgba(96, 165, 250, 0.30);
  --st-coding-border:   rgba(96, 165, 250, 0.75);

  --st-review-color:    #a3e635;
  --st-review-bg:       rgba(163, 230, 53, 0.28);
  --st-review-border:   rgba(163, 230, 53, 0.72);

  --st-testing-color:   #22d3ee;
  --st-testing-bg:      rgba(34, 211, 238, 0.28);
  --st-testing-border:  rgba(34, 211, 238, 0.72);

  --st-research-color:  #facc15;
  --st-research-bg:     rgba(250, 204, 21, 0.30);
  --st-research-border: rgba(250, 204, 21, 0.75);

  --st-planning-color:  #ec4899;
  --st-planning-bg:     rgba(236, 72, 153, 0.28);
  --st-planning-border: rgba(236, 72, 153, 0.72);

  --st-blocked-color:   #ef4444;
  --st-blocked-bg:      transparent;
  --st-blocked-border:  rgba(239, 68, 68, 0.7);

  /* Event marker filled-in interior — stays dark in both themes */
  --ev-inner:           #18181b;
}

/* ============================================================
   DARK · WARM  (amber / brown tints, amber accent)
   ============================================================ */
:root[data-theme="dark"][data-palette="warm"] {
  --bg:           #1a1612;
  --bg-elev:      #211c16;
  --surface:      #28231d;
  --surface-hi:   #322b23;
  --border:       #4a3f33;
  --border-soft:  #32281f;

  --text:         #ede4d4;
  --text-dim:     #b8a888;
  --text-muted:   #8a7a5e;
  --text-faint:   #5c5040;

  --accent:       #f59e0b;
  --accent-dim:   #b45309;
  --accent-soft:  rgba(245, 158, 11, 0.14);
  --accent-line:  rgba(245, 158, 11, 0.40);

  --st-planning-color:  #f59e0b;
  --st-planning-bg:     rgba(245, 158, 11, 0.30);
  --st-planning-border: rgba(245, 158, 11, 0.75);
}

/* ============================================================
   DARK · COLD  (slate / blue tints, cyan accent)
   ============================================================ */
:root[data-theme="dark"][data-palette="cold"] {
  --bg:           #0f172a;
  --bg-elev:      #131e36;
  --surface:      #1e293b;
  --surface-hi:   #2c3a52;
  --border:       #475569;
  --border-soft:  #2c3a52;

  --text:         #e2e8f0;
  --text-dim:     #94a3b8;
  --text-muted:   #64748b;
  --text-faint:   #475569;

  --accent:       #22d3ee;
  --accent-dim:   #0e7490;
  --accent-soft:  rgba(34, 211, 238, 0.14);
  --accent-line:  rgba(34, 211, 238, 0.40);

  --st-planning-color:  #22d3ee;
  --st-planning-bg:     rgba(34, 211, 238, 0.30);
  --st-planning-border: rgba(34, 211, 238, 0.75);
}

/* ============================================================
   LIGHT — base (applies to all light palettes)
   Accent = BLACK.
   ============================================================ */
:root[data-theme="light"] {
  --bg:           #f5f5f4;
  --bg-elev:      #fafaf9;
  --surface:      #ffffff;
  --surface-hi:   #f4f4f5;
  --border:       #d4d4d8;
  --border-soft:  #e4e4e7;

  --text:         #18181b;
  --text-dim:     #52525b;
  --text-muted:   #71717a;
  --text-faint:   #a1a1aa;

  --accent:       #000000;
  --accent-dim:   #18181b;
  --accent-soft:  rgba(0, 0, 0, 0.06);
  --accent-line:  rgba(0, 0, 0, 0.32);

  --ok:           #15803d;
  --ok-soft:      rgba(21, 128, 61, 0.10);
  --warn:         #b45309;
  --warn-soft:    rgba(180, 83, 9, 0.10);
  --crit:         #b91c1c;
  --crit-soft:    rgba(185, 28, 28, 0.08);
  --info:         #1d4ed8;
  --info-soft:    rgba(29, 78, 216, 0.08);

  --ev-inner:     #ffffff;

  /* Partitura — deeper, less saturated variants for white bg */
  --st-coding-color:    #1d4ed8;
  --st-coding-bg:       rgba(29, 78, 216, 0.18);
  --st-coding-border:   rgba(29, 78, 216, 0.55);

  --st-review-color:    #4d7c0f;
  --st-review-bg:       rgba(77, 124, 15, 0.20);
  --st-review-border:   rgba(77, 124, 15, 0.55);

  --st-testing-color:   #0e7490;
  --st-testing-bg:      rgba(14, 116, 144, 0.18);
  --st-testing-border:  rgba(14, 116, 144, 0.55);

  --st-research-color:  #b45309;
  --st-research-bg:     rgba(180, 83, 9, 0.18);
  --st-research-border: rgba(180, 83, 9, 0.55);

  --st-planning-color:  #18181b;
  --st-planning-bg:     rgba(24, 24, 27, 0.10);
  --st-planning-border: rgba(24, 24, 27, 0.45);

  --st-blocked-color:   #b91c1c;
  --st-blocked-bg:      transparent;
  --st-blocked-border:  rgba(185, 28, 28, 0.6);
}

/* ============================================================
   LIGHT · WARM  (cream / sand)
   ============================================================ */
:root[data-theme="light"][data-palette="warm"] {
  --bg:           #faf6ef;
  --bg-elev:      #fdfaf3;
  --surface:      #ffffff;
  --surface-hi:   #f3eddf;
  --border:       #d9d0bb;
  --border-soft:  #ece5d2;

  --text:         #1c1812;
  --text-dim:     #5a5043;
  --text-muted:   #847864;
  --text-faint:   #b0a48b;
}

/* ============================================================
   LIGHT · COLD  (cool gray / blue-white)
   ============================================================ */
:root[data-theme="light"][data-palette="cold"] {
  --bg:           #eef2f7;
  --bg-elev:      #f5f8fb;
  --surface:      #ffffff;
  --surface-hi:   #e6ecf3;
  --border:       #b9c4d2;
  --border-soft:  #d7dee7;

  --text:         #0f172a;
  --text-dim:     #475569;
  --text-muted:   #64748b;
  --text-faint:   #94a3b8;
}

/* ============================================================
   THEME SWITCHER component
   ============================================================ */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.theme-switcher .ts-group {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
}

.theme-switcher .ts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  transition: background 0.12s, color 0.12s;
}
.theme-switcher .ts-btn:hover {
  color: var(--text);
  background: var(--surface-hi);
}
.theme-switcher .ts-btn.on {
  background: var(--accent);
  color: var(--surface);
}
:root[data-theme="dark"] .theme-switcher .ts-btn.on { color: #ffffff; }

.theme-switcher .ts-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border) inset;
}
.theme-switcher .ts-btn.on .ts-dot {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset;
}

.theme-switcher .ts-icon {
  width: 14px; height: 14px;
}