/* ============================================================================
   Venue Bible — shared design system (DESIGN-SPEC-v2)
   Light-default, graphite/ink accent, flat. Linked AFTER each page's inline
   <style> so these tokens always win. To restyle the whole app, touch this file.
   ============================================================================ */

/* ---------- 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;
  --btn-2-bg:#2C2832; --btn-2-border:#48424F;
  --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;
  --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;
  --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=number],input[type=tel],input[type=url],select,textarea{
  background:var(--surface);color:var(--ink);border-color:var(--line);
}
::placeholder{color:var(--ink-faint);}

/* native <select> — strip the default chrome, add our own chevron so dropdowns
   look like the rest of the system in both themes */
select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7264' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px;
}
html[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A39A8C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select:hover{border-color:var(--btn-2-border);}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* 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;}
.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 */
.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;}