/* ── Pyflo Design Tokens ─────────────────────────────────────────────
   Lifted from pyflo.com marketing page — single source of truth for
   colors/typography. Changing a theme here updates both the consumer
   frontend (index.html) and the ops console (console.html).
   ──────────────────────────────────────────────────────────────── */

[data-theme="midnight"] {
  --bg-0: #0c0c10; --bg-1: #12121a; --bg-2: #1a1a24; --bg-3: #22222e;
  --border: #2e2e3e; --border-focus: #6380fa;
  --text-0: #f0f0f5; --text-1: #c8c8d8; --text-2: #8888a0;
  --accent: #6380fa; --accent-soft: rgba(99,128,250,0.12); --accent-glow: rgba(99,128,250,0.08);
  --green: #4ade94; --green-soft: rgba(74,222,148,0.1);
  --orange: #fba64e; --orange-soft: rgba(251,166,78,0.1);
  --red: #f87171; --red-soft: rgba(248,113,113,0.1);
  --glow-color: rgba(99,128,250,0.05);
  --shadow: 0 2px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
}

[data-theme="light"] {
  --bg-0: #f5f5f7; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #eeeef0;
  --border: #d8d8de; --border-focus: #4f6af0;
  --text-0: #1a1a2e; --text-1: #44445a; --text-2: #8888a0;
  --accent: #4f6af0; --accent-soft: rgba(79,106,240,0.08); --accent-glow: rgba(79,106,240,0.06);
  --green: #16a34a; --green-soft: rgba(22,163,74,0.08);
  --orange: #ea7e1a; --orange-soft: rgba(234,126,26,0.08);
  --red: #dc2626; --red-soft: rgba(220,38,38,0.08);
  --glow-color: rgba(79,106,240,0.04);
  --shadow: 0 1px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}

:root, [data-theme="paper"] {
  --bg-0: #faf8f4; --bg-1: #ffffff; --bg-2: #fefcf8; --bg-3: #f0ece4;
  --border: #e0dcd4; --border-focus: #b08840;
  --text-0: #2a2520; --text-1: #5a5248; --text-2: #998e80;
  --accent: #b08840; --accent-soft: rgba(176,136,64,0.08); --accent-glow: rgba(176,136,64,0.06);
  --green: #5a8a3a; --green-soft: rgba(90,138,58,0.08);
  --orange: #c87830; --orange-soft: rgba(200,120,48,0.08);
  --red: #a83232; --red-soft: rgba(168,50,50,0.08);
  --glow-color: rgba(176,136,64,0.03);
  --shadow: 0 1px 6px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}

[data-theme="ocean"] {
  --bg-0: #0a1628; --bg-1: #0e1e34; --bg-2: #142840; --bg-3: #1a324c;
  --border: #243c58; --border-focus: #38bdf8;
  --text-0: #e8f0f8; --text-1: #b0c8e0; --text-2: #6890b0;
  --accent: #38bdf8; --accent-soft: rgba(56,189,248,0.12); --accent-glow: rgba(56,189,248,0.08);
  --green: #34d399; --green-soft: rgba(52,211,153,0.1);
  --orange: #fbbf24; --orange-soft: rgba(251,191,36,0.1);
  --red: #f87171; --red-soft: rgba(248,113,113,0.1);
  --glow-color: rgba(56,189,248,0.05);
  --shadow: 0 2px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03);
}

[data-theme="forest"] {
  --bg-0: #0c140e; --bg-1: #121c14; --bg-2: #1a261c; --bg-3: #223226;
  --border: #2e4232; --border-focus: #4ade80;
  --text-0: #e8f0ea; --text-1: #b0c8b4; --text-2: #6a9070;
  --accent: #4ade80; --accent-soft: rgba(74,222,128,0.12); --accent-glow: rgba(74,222,128,0.08);
  --green: #4ade80; --green-soft: rgba(74,222,128,0.1);
  --orange: #fbbf24; --orange-soft: rgba(251,191,36,0.1);
  --red: #f87171; --red-soft: rgba(248,113,113,0.1);
  --glow-color: rgba(74,222,128,0.05);
  --shadow: 0 2px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
}

[data-theme="sunset"] {
  --bg-0: #1a0e14; --bg-1: #24141c; --bg-2: #2e1c26; --bg-3: #3a2430;
  --border: #4a3040; --border-focus: #f472b6;
  --text-0: #f8eaf0; --text-1: #d8b8c8; --text-2: #a07888;
  --accent: #f472b6; --accent-soft: rgba(244,114,182,0.12); --accent-glow: rgba(244,114,182,0.08);
  --green: #a3e635; --green-soft: rgba(163,230,53,0.1);
  --orange: #fb923c; --orange-soft: rgba(251,146,60,0.1);
  --red: #f87171; --red-soft: rgba(248,113,113,0.1);
  --glow-color: rgba(244,114,182,0.05);
  --shadow: 0 2px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03);
}

/* ── Shared (non-theme) ─────────────────────────────────────────── */
:root {
  --r: 10px;
  --r-sm: 6px;
  --r-lg: 14px;
  --font: 'Instrument Sans', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --topbar-h: 56px;
  --tabrail-h: 42px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-0);
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, kbd, .mono { font-family: var(--mono); font-size: 0.9em; }
kbd {
  padding: 1px 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.75em;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 6px; border: 2px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }