/* HostFlow theme — the shared suite "black panther" system (Design Spec v2.1 §2).
   One file of custom properties, linked AFTER each page's inline <style> so the
   tokens always win. Identical across Lineup Lab, ShowFlow, Event HQ, HostFlow. */

/* ---------- DARK (opt-in via toggle) ---------- */
html[data-theme="dark"] {
  --bg:#17151A; --surface:#201D24; --surface-2:#2A2630;
  --line:#2E2A33; --line-soft:#2A2630;
  --ink:#EDE7DB; --ink-soft:#A39A8C; --ink-faint:#6E665C;
  --ok:#6FBF8E; --ok-bg:#16291F; --warn:#E0B25A; --warn-bg:#2A2415;
  --danger:#E2727F; --danger-bg:#2A171B; --blue:#8A98EC;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.75);
  --headbar:#1B1920;                 /* top bar / tabs / logo mark — stays dark */
  --btn-2-bg:#2C2832; --btn-2-border:#48424F;
  /* primary accent inverts to a warm-cream button with dark text in dark mode */
  --accent:#EDE7DB; --accent-ink:#1A1712; --accent-deep:#FFFFFF; --accent-soft:rgba(237,231,219,.12);
  --danger-btn:#B23A45;              /* solid delete button; white text reads on it */
}

/* ---------- LIGHT (default / hero) ---------- */
:root {
  --bg:#F4F1EC; --surface:#FFFFFF; --surface-2:#FBF9F5;
  --line:#E2DDD3; --line-soft:#EDE8DE;
  --ink:#2A2620; --ink-soft:#7A7264; --ink-faint:#A8A091;
  --ok:#2E6B47; --ok-bg:#E4F0E8; --warn:#8A6A1E; --warn-bg:#F3EAD2;
  --danger:#A32D2D; --danger-bg:#F7E3E3; --blue:#5B6FE0;
  --radius:12px;
  --shadow:0 1px 2px rgba(21,22,26,.05),0 8px 24px -16px rgba(21,22,26,.25);
  --headbar:#221F1A;                 /* dark warm header even in light mode */
  --btn-2-bg:#EEE9DF; --btn-2-border:#D5CDBC;
  --accent:#2C2820; --accent-ink:#FFFFFF; --accent-deep:#161310; --accent-soft:rgba(44,40,32,.07);
  --danger-btn:#A32D2D;
}

/* ---------- base ---------- */
html,body{background:var(--bg);color:var(--ink);}
.topbar,.tabs{background:var(--headbar);}
.tabs{border-bottom-color:rgba(255,255,255,.06);}

/* surfaces */
.card,.panel,.table-wrap{background:var(--surface);border-color:var(--line);}
tbody tr:hover{background:var(--surface-2);}
thead th{background:var(--surface-2);color:var(--ink-soft);border-bottom-color:var(--line);}
tbody td{border-bottom-color:var(--line-soft);}

/* inputs */
input[type=text],input[type=date],input[type=email],input[type=tel],select,textarea{
  background:var(--surface);color:var(--ink);border-color:var(--line);
}
::placeholder{color:var(--ink-faint);}

/* buttons — flat, one primary per screen */
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:none;}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--btn-2-border);box-shadow:none;}      /* secondary = outline, NOT a grey block */
.btn-ghost:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.btn-danger,.row-del{background:var(--danger-btn);color:#FFFFFF;border-color:var(--danger-btn);box-shadow:none;}

/* status pills — tinted bg + saturated text, flat */
.pill{font-size:12px;padding:4px 11px;gap:4px;border-radius:999px;display:inline-flex;align-items:center;}
.pill svg{width:13px;height:13px;}
.pill.confirmed,.pill.done   {background:var(--ok-bg);     color:var(--ok);}
.pill.tbc,.pill.attention    {background:var(--warn-bg);   color:var(--warn);}
.pill.cancelled,.pill.action {background:var(--danger-bg); color:var(--danger);}
.pill.blue                   {background:rgba(138,152,236,.16); color:var(--blue);}

/* brand chips/dots — colour injected inline from JS (see design spec §5) */
.brand-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;vertical-align:middle;margin-right:8px;}
.brand-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:4px 11px;border-radius:999px;white-space:nowrap;letter-spacing:.2px;}