/* ==========================================================================
   Themes. Each stamps `data-theme` on <html> and overrides only the tokens
   base.css already consumes, so every screen follows with no per-component
   work. Four light, four dark.
   ========================================================================== */

/* ---------------------------------------------------------- BLUEPRINT (default, light) */
/* The house look lives in base.css :root — nothing to override. */

/* ---------------------------------------------------------- GRAPHITE (light) */
[data-theme="graphite"] {
  --paper:#F5F6F7; --paper-2:#EBEDEF; --paper-3:#DDE0E3; --surface:#FFFFFF;
  --ink:#171A1C; --ink-2:#3B4247; --ink-3:#6A7378; --ink-4:#98A1A6;
  --rule:#D2D7DA; --rule-soft:#E4E8EA;
  --field:#2F6F63; --field-dark:#215047; --field-light:#3E9184; --field-wash:#E4EFEC;
  --hivis:#E08900; --hivis-dark:#A96700; --hivis-wash:#FBEFD9;
  --blueprint:#2B5DA0; --blueprint-wash:#E5ECF6;
  --brick:#B93D12; --brick-wash:#FAE7E0;
  --field-ink:#2f6f63; --field-edge:#2f6f63;
  --hivis-ink:#9a5e00; --hivis-edge:#a96700;
  --brick-ink:#b93d12; --brick-edge:#b93d12;
}

/* ---------------------------------------------------------- HI-VIS (light, outdoor) */
[data-theme="hivis"] {
  --paper:#FFFFFF; --paper-2:#F2F3F4; --paper-3:#E2E4E6; --surface:#FFFFFF;
  --ink:#000000; --ink-2:#1F2426; --ink-3:#4A5257; --ink-4:#6E787D;
  --rule:#B8BEC2; --rule-soft:#D6DADD;
  --field:#00695C; --field-dark:#00443B; --field-light:#00897B; --field-wash:#D8EFEB;
  --hivis:#FF8A00; --hivis-dark:#B35F00; --hivis-wash:#FFEBD2;
  --blueprint:#0B4FA8; --blueprint-wash:#DEE9F8;
  --brick:#C62200; --brick-wash:#FBE1DC;
  --shadow-1: 0 1px 2px rgba(0,0,0,.12);
  --shadow-2: 0 2px 6px rgba(0,0,0,.14);
  --field-ink:#00695c; --field-edge:#00695c;
  --hivis-ink:#a35600; --hivis-edge:#b35f00;
  --brick-ink:#c62200; --brick-edge:#c62200;
}
/* Heavier rules and bolder labels carry contrast outdoors. */
[data-theme="hivis"] .table th { border-bottom-width: 2px; color: var(--ink-2); }
[data-theme="hivis"] .card, [data-theme="hivis"] .panel { border-width: 1.5px; }

/* ---------------------------------------------------------- SANDSTONE (light, warm) */
[data-theme="sandstone"] {
  --paper:#F7F3EC; --paper-2:#EFE8DD; --paper-3:#E2D8C8; --surface:#FFFDF9;
  --ink:#1D1813; --ink-2:#463C31; --ink-3:#77695A; --ink-4:#A2947F;
  --rule:#DACBB6; --rule-soft:#E8DECE;
  --field:#8A5A2B; --field-dark:#663F18; --field-light:#A87441; --field-wash:#F0E4D5;
  --hivis:#C2410C; --hivis-dark:#8F2F08; --hivis-wash:#FAE3D6;
  --blueprint:#4A6A8A; --blueprint-wash:#E6EDF3;
  --brick:#9A2B0B; --brick-wash:#F7DED4;
  --violet:#6B4E8F; --violet-wash:#EDE6F4;
  --field-ink:#8a5a2b; --field-edge:#8a5a2b;
  --hivis-ink:#8f2f08; --hivis-edge:#8f2f08;
  --brick-ink:#9a2b0b; --brick-edge:#9a2b0b;
}

/* ---------------------------------------------------------- MIDNIGHT (dark, default dark) */
[data-theme="midnight"] {
  --paper:#12161A; --paper-2:#1A2026; --paper-3:#242C34; --surface:#181D23;
  --ink:#E8EAEC; --ink-2:#C2C8CD; --ink-3:#9BA5AF; --ink-4:#6E7A85;
  --rule:#2B343D; --rule-soft:#232B33;
  --field:#1A9E8B; --field-dark:#12796A; --field-light:#2FBDA8; --field-wash:#14312D;
  --hivis:#F5A524; --hivis-dark:#C97F0C; --hivis-wash:#32270F;
  --blueprint:#4A8FD0; --blueprint-wash:#16273A;
  --brick:#E0603A; --brick-wash:#341C15;
  --violet:#9B72D0; --violet-wash:#241C33;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.45);
  --shadow-3: 0 12px 28px rgba(0,0,0,.55);
  --field-ink:#2ca694; --field-edge:#1a9e8b;
  --hivis-ink:#f5a524; --hivis-edge:#f5a524;
  --brick-ink:#e16540; --brick-edge:#e0603a;
}

/* ---------------------------------------------------------- CARBON (dark, neutral) */
[data-theme="carbon"] {
  --paper:#0B0D0F; --paper-2:#14171A; --paper-3:#1E2225; --surface:#101316;
  --ink:#E6E8EA; --ink-2:#BFC4C8; --ink-3:#8E969C; --ink-4:#646C72;
  --rule:#242A2E; --rule-soft:#1C2124;
  --field:#3DA88F; --field-dark:#2A7F6C; --field-light:#54C4AA; --field-wash:#122A25;
  --hivis:#E8B23A; --hivis-dark:#B98A1F; --hivis-wash:#2B2410;
  --blueprint:#5590C4; --blueprint-wash:#132232;
  --brick:#D9603D; --brick-wash:#2E1B14;
  --violet:#9678C9; --violet-wash:#201A2E;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,.55);
  --shadow-3: 0 12px 28px rgba(0,0,0,.65);
  --field-ink:#3da88f; --field-edge:#3da88f;
  --hivis-ink:#e8b23a; --hivis-edge:#e8b23a;
  --brick-ink:#da6543; --brick-edge:#d9603d;
}

/* ---------------------------------------------------------- DEPOT (dark, blue) */
[data-theme="depot"] {
  --paper:#101821; --paper-2:#17212C; --paper-3:#1F2B38; --surface:#141D27;
  --ink:#E4EAF0; --ink-2:#BAC5D1; --ink-3:#8C9AA9; --ink-4:#61707F;
  --rule:#26333F; --rule-soft:#1E2934;
  --field:#3E8FD0; --field-dark:#2A6CA4; --field-light:#5BA7E2; --field-wash:#152838;
  --hivis:#F0A32E; --hivis-dark:#C27C12; --hivis-wash:#2F2513;
  --blueprint:#6FB0E8; --blueprint-wash:#16293A;
  --brick:#E06A4A; --brick-wash:#301C17;
  --violet:#9B84D8; --violet-wash:#221E35;
  --shadow-1: 0 1px 2px rgba(0,0,0,.42);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5);
  --shadow-3: 0 12px 28px rgba(0,0,0,.6);
  --field-ink:#4895d2; --field-edge:#3e8fd0;
  --hivis-ink:#f0a32e; --hivis-edge:#f0a32e;
  --brick-ink:#e06a4a; --brick-edge:#e06a4a;
}

/* ---------------------------------------------------------- AMBER DARK (dark, low blue) */
[data-theme="amber"] {
  --paper:#16120C; --paper-2:#1F1A11; --paper-3:#2A2317; --surface:#1B160F;
  --ink:#EFE7D8; --ink-2:#CFC4B0; --ink-3:#A2967F; --ink-4:#776D5B;
  --rule:#332B1D; --rule-soft:#282116;
  --field:#C98A2E; --field-dark:#9C6918; --field-light:#E0A648; --field-wash:#2E2413;
  --hivis:#E2B857; --hivis-dark:#B08F33; --hivis-wash:#332A14;
  --blueprint:#A88F5E; --blueprint-wash:#2A2417;
  --brick:#D2673C; --brick-wash:#2F1C13;
  --violet:#A98BC0; --violet-wash:#241D2A;
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5);
  --shadow-3: 0 12px 28px rgba(0,0,0,.6);
  --field-ink:#c98a2e; --field-edge:#c98a2e;
  --hivis-ink:#e2b857; --hivis-edge:#e2b857;
  --brick-ink:#d36c42; --brick-edge:#d2673c;
}

/* ---------------------------------------------------------- dark-mode corrections
   A few surfaces are hard-coded light in base.css because the default theme is
   light. Re-point them at tokens when a dark theme is active. */
[data-theme="midnight"], [data-theme="carbon"], [data-theme="depot"], [data-theme="amber"] {
  color-scheme: dark;
}
[data-theme="midnight"] body, [data-theme="carbon"] body,
[data-theme="depot"] body, [data-theme="amber"] body { background: var(--paper); color: var(--ink); }

[data-theme="midnight"] .graph, [data-theme="carbon"] .graph,
[data-theme="depot"] .graph, [data-theme="amber"] .graph {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
}
[data-theme="midnight"] .nav, [data-theme="carbon"] .nav,
[data-theme="depot"] .nav, [data-theme="amber"] .nav {
  background: rgba(18,22,26,.9); border-bottom-color: var(--rule);
}
[data-theme="midnight"] .sec-alt, [data-theme="carbon"] .sec-alt,
[data-theme="depot"] .sec-alt, [data-theme="amber"] .sec-alt { background: var(--paper-2); }

/* Selects carry a light-grey arrow that disappears on dark grounds. */
[data-theme="midnight"] select, [data-theme="carbon"] select,
[data-theme="depot"] select, [data-theme="amber"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239BA5AF' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* The app shell sidebar is intentionally dark in every theme; on dark themes
   give it a touch of separation from the workspace. */
[data-theme="carbon"] .side { background: #07090A; }
[data-theme="depot"] .side { background: #0B1219; }
[data-theme="amber"] .side { background: #100D08; }

/* Theme picker swatches */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.theme-card {
  border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--surface);
  padding: .85rem; cursor: pointer; text-align: left; width: 100%;
  transition: border-color .14s, transform .14s var(--ease), box-shadow .14s;
  font-family: var(--body);
}
.theme-card:hover { border-color: var(--field-light); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.theme-card.sel { border-color: var(--field); box-shadow: 0 0 0 1px var(--field); }
.theme-swatch { display: flex; height: 40px; border-radius: var(--r-sm); overflow: hidden; margin-bottom: .6rem; }
.theme-swatch i { flex: 1; display: block; }
.theme-swatch i:first-child { flex: 2; }
.theme-name { font-family: var(--display); font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.theme-mode {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: 99px; padding: .1rem .4rem;
}
.theme-blurb { font-size: .78rem; color: var(--ink-3); margin-top: .25rem; line-height: 1.4; }