/* ============================================================
   Lineup Lab — "Black Panther" theme
   SINGLE source of truth for colour / type / shape tokens.
   Linked AFTER each page's inline <style> so these win, which
   means the entire look is controlled by this one file.

   REVERT: remove the <link rel="stylesheet" href="/theme.css">
   tags (or just don't merge the theme-black-panther branch).
   ============================================================ */

/* ---------- 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;
  --brass:#C9A86A; --brass-deep:#8A6E3C; --lipstick:#7E2230;
  --ok:#6FBF8E; --ok-bg:#16291F; --warn:#E0B25A; --warn-bg:#2A2415;
  --danger:#E2727F; --danger-bg:#2A171B;

  /* legacy variable names used throughout the app, remapped to the new palette */
  --paper:var(--bg); --card:var(--surface); --text:var(--ink); --muted:var(--ink-soft);
  --brass-dark:var(--brass-deep); --brass-tint:#2A2415;
  --green:var(--ok); --amber:var(--warn); --red:var(--danger); --red-dark:#C85A66; --blue:#8A98EC;
  --radius:12px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.75);

  /* the app uses these as DARK ui surfaces (top bar, tabs, logo mark bg) — keep them dark */
  --headbar:#1B1920;
  /* secondary (ghost) button: subtly distinct from cards so it doesn't disappear */
  --btn-2-bg:#2C2832; --btn-2-border:#48424F;
  /* primary accent = graphite/ink. In DARK mode it inverts to a warm-cream button with dark text. */
  --accent:#EDE7DB; --accent-ink:#1A1712; --accent-deep:#FFFFFF; --accent-soft:rgba(237,231,219,.12);
  --danger-btn:#B23A45;
}

/* ---------- LIGHT (default / hero) ---------- */
:root {
  --bg:#F4F1EC; --surface:#FFFFFF; --surface-2:#FBF9F5;
  --line:#E2DDD3; --line-soft:#EDE8DE;
  --ink:#2A2620; --ink-soft:#7A7264; --ink-faint:#A8A091;
  --brass:#9C7B3D; --brass-deep:#7A5E2C; --lipstick:#8E2434;
  --ok:#2E6B47; --ok-bg:#E4F0E8; --warn:#8A6A1E; --warn-bg:#F3EAD2;
  --danger:#A32D2D; --danger-bg:#F7E3E3;

  --paper:var(--bg); --card:var(--surface); --text:var(--ink); --muted:var(--ink-soft);
  --brass-dark:var(--brass-deep); --brass-tint:#F2E7C9;
  --green:var(--ok); --amber:var(--warn); --red:var(--danger); --red-dark:#7E2020; --blue:#5B6FE0;
  --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 (boutique-hotel look) */
  --btn-2-bg:#EEE9DF; --btn-2-border:#D5CDBC;
  /* primary accent = graphite/ink: near-black button with white text */
  --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);}

/* top bar / tabs stay dark + warm in both modes */
.topbar,.tabs{background:var(--headbar);}
.tabs{border-bottom-color:rgba(255,255,255,.06);}

/* surfaces */
.card,.panel,.detail-section,.strip,.note,.table-wrap,
#lineup-modal>div,#pl-modal>div{background:var(--surface)!important;border-color:var(--line);}
.note{background:var(--surface-2);}
tbody tr:hover{background:var(--surface-2)!important;}
thead th{background:var(--surface-2);color:var(--ink-soft);border-bottom-color:var(--line);}
tbody td{border-bottom-color:var(--line-soft);}
.lineup-row,.pl-row{background:var(--surface-2)!important;border-color:var(--line)!important;}

/* inputs / selects / textareas — force onto theme regardless of inline white bgs */
input[type=text],input[type=date],input[type=email],select,textarea,
.lr-tribute,.lr-real,.lr-notes,.pl-trib,.pl-real,.pl-notes,
#lineup-modal input,#pl-modal input{
  background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important;
}
::placeholder{color:var(--ink-faint)!important;}

/* buttons — quiet by default, ONE brass primary per screen */
.btn-primary{background:var(--accent)!important;color:var(--accent-ink)!important;border-color:var(--accent)!important;box-shadow:none!important;}
.btn-primary:hover{background:var(--accent-deep)!important;border-color:var(--accent-deep)!important;}
/* secondary = clean outline (surface fill + clear border), not a grey block */
.btn-ghost{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--btn-2-border)!important;box-shadow:none!important;}
.btn-ghost:hover{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent)!important;}
.btn-danger,.row-del{background:var(--danger-btn)!important;color:#FFFFFF!important;border-color:var(--danger-btn)!important;box-shadow:none!important;}

/* status pills — dark-mode tinted backgrounds */
.pill.confirmed,.pill.done{background:var(--ok-bg)!important;color:var(--ok)!important;border-color:transparent!important;}
.pill.tbc,.pill.attention{background:var(--warn-bg)!important;color:var(--warn)!important;border-color:transparent!important;}
.pill.cancelled,.pill.action{background:var(--danger-bg)!important;color:var(--danger)!important;border-color:transparent!important;}
.pill.book,.pill.blue{background:rgba(138,152,236,.16)!important;color:var(--blue)!important;border-color:transparent!important;}

/* misc accents */
.card .accent{background:var(--brass);}
.brand .mark,.mark{background:var(--brass);color:#17151A;}

/* ---------- pills: a touch bigger / more legible everywhere ---------- */
.pill{font-size:12px!important;padding:4px 11px!important;gap:4px!important;}
.pill svg{width:13px;height:13px;}

/* ---------- brand identity bits (colour comes from JS inline) ---------- */
.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;}

/* sentence-case-ish: soften the shouty uppercase labels a touch (kept, just lighter) */
.view-head h1{font-weight:500;}