/* themes.css — the dark and night token values, the theme picker and print. Loaded last.
   Light values live on :root in core.css. Theme rules for a module's own elements live at the end of that module's
   stylesheet (search "theme overrides"), so module work never needs to edit this file. */
.theme-picker { display: flex; align-items: center; gap: 10px; }
.theme-picker label { font-size: 12px; font-weight: 600; flex-shrink: 0; }
.theme-picker select { min-height: 36px; flex: 1; }
.sidebar .theme-picker { color: var(--sidebar-muted); padding: 0 2px 6px; }
/* The rail now follows the theme, so the select uses the page's own color-scheme instead of forcing a dark one. */
.sidebar .theme-picker select { color: var(--sidebar-text); background: var(--sidebar-bg); border-color: var(--line-strong); font-size: 12px; padding-left: 7px; }
.login .login-logo { width: 216px; max-width: 100%; padding: 8px; margin: 0 auto 6px; }
.login .login-logo img { width: 100%; margin: 0; }
.login-theme { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.login-theme label { color: var(--muted); }
[data-theme-choice]:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Dark and night apply on screen only: print always gets the light tokens from core.css, whatever the preference. */
@media screen {
  /* Obsidian dark: neutral black layers, translucent edges and electric cyan. Solid surfaces keep sticky tables legible. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --shell: #07090b;
    --bg: #090b0e;
    --surface: #111418;
    --surface-2: #181c21;
    --surface-raised: #20252b;
    --line: rgba(235, 244, 255, .075);
    --grid-line: rgba(235, 244, 255, .11);
    --line-strong: rgba(235, 244, 255, .22);
    --text: #edf2f7;
    --muted: #a1abb8;
    --faint: #7e8998;
    --icon: #c8d2de;
    --accent: #3de8ff;
    --accent-dark: #83f2ff;
    --on-accent: #071114;
    --accent-soft: #102c32;
    --highlight: #12262c;
    --link: #59e8ff;
    --selected: #15383f;
    --selected-hover: #1b4650;
    --hover: #252b32;
    --row-hover: #191f25;
    --ui-bg: #2c333c;
    --ui-bg-hover: #373f49;
    --track: #2a3039;
    --disabled-bg: #242930;
    --disabled-text: rgba(237, 242, 247, .38);
    --ok: #36f5a2;
    --ok-soft: #103326;
    --danger: #ff6a99;
    --danger-soft: #391823;
    --warn: #ffd43b;
    --warn-fill: #fff04a;
    --warn-soft: #332c12;
    --info: #59c9ff;
    --claude: #d5b6ff;
    --overlay: rgba(0, 0, 0, .72);
    --overlay-light: rgba(0, 0, 0, .42);
    --toast-bg: #edf2f7;
    --toast-text: #111418;
    --sidebar-bg: #07090b;
    --sidebar-text: #edf2f7;
    --sidebar-muted: #a1abb8;
    --sidebar-active: #123038;
    --logo-bg: #dce5ec;
    --focus-ring: 0 0 0 3px rgba(61, 232, 255, .28), inset 0 0 0 1px var(--accent-dark);
    --login-bg: #07090b;
    --tag-surface: #181c21;
    --tag-text: #f1f5fa;
    --tag-ink-strength: 45%;
    --shadow-sm: 0 4px 10px -4px rgba(0, 0, 0, .5);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, .4);
    --shadow: 0 12px 36px rgba(0, 0, 0, .55), 0 0 0 1px var(--grid-line);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, .65);
  }
  /* Night: warm and extra dim (early mornings, dark cabs); the same token set as dark. */
  :root[data-theme="night"] {
    color-scheme: dark;
    --shell: #0c0a08; --bg: #100e0c; --surface: #1a1612; --surface-2: #241e18; --surface-raised: #2a231c;
    --line: #40352b; --grid-line: #4f4236; --line-strong: #655443;
    --text: #ccbaa3; --muted: #ad9981; --faint: #a18e76; --icon: #ad9981;
    --accent: #d4aa72; --accent-dark: #e1bc8c; --on-accent: #21170e; --accent-soft: #3b2e1f; --highlight: #2e2419; --link: #d4aa72;
    --selected: #4a3824; --selected-hover: #574229; --hover: #30271f; --row-hover: #221c16;
    --ui-bg: #3a3027; --ui-bg-hover: #44382c; --track: #413529; --disabled-bg: #2e261e; --disabled-text: rgba(204, 186, 163, .38);
    --ok: #9fb487; --ok-soft: #293022; --danger: #d89381; --danger-soft: #3b241f;
    --warn: #c7a36b; --warn-fill: #c7a36b; --warn-soft: #372c1c; --info: #b2ae97; --claude: #c79573;
    --overlay: rgba(33, 33, 33, .7); --overlay-light: rgba(0, 0, 0, .4); --toast-bg: #ccbaa3; --toast-text: #100e0c;
    --sidebar-bg: #100e0c; --sidebar-text: #ccbaa3; --sidebar-muted: #ad9981; --sidebar-active: #33281d; --logo-bg: #b7a389;
    --focus-ring: 0 0 0 3px rgba(212, 170, 114, .5), inset 0 0 0 1px var(--accent-dark);
    --login-bg: #100e0c;
    --tag-surface: #241e18; --tag-text: #d2c0a8; --tag-ink-strength: 40%;
    --shadow-sm: 0 4px 6px -4px rgba(0, 0, 0, .6); --shadow-md: 0 4px 8px rgba(0, 0, 0, .6); --shadow: 0 6px 20px rgba(0, 0, 0, .6), 0 0 0 1px var(--grid-line); --shadow-lg: 0 15px 50px rgba(0, 0, 0, .6);
  }
  /* Content palette on dark surfaces (dark and night): Vibe's dark base overrides, its dark hover differences and the
     dark -selected tints. Night labels are dimmed further where they render (color-mix with --surface). */
  :root:is([data-theme="dark"], [data-theme="night"]) {
    --color-neon-mint-selected: #184433;
    --color-neon-emerald-selected: #0c412e;
    --color-neon-lime-selected: #34461c;
    --color-neon-chartreuse-selected: #3e4610;
    --color-neon-lemon-selected: #454320;
    --color-neon-gold-selected: #453d1d;
    --color-neon-tangerine-selected: #45341b;
    --color-neon-orange-selected: #452a1c;
    --color-neon-coral-selected: #45252c;
    --color-neon-rose-selected: #451e2b;
    --color-neon-pink-selected: #45213e;
    --color-neon-fuchsia-selected: #422548;
    --color-neon-orchid-selected: #3c2d48;
    --color-neon-violet-selected: #342c48;
    --color-neon-purple-selected: #312a48;
    --color-neon-periwinkle-selected: #2c2f48;
    --color-neon-blue-selected: #223048;
    --color-neon-azure-selected: #1c3748;
    --color-neon-cyan-selected: #1a4148;
    --color-neon-aqua-selected: #194442;
    --color-neon-teal-selected: #163f3b;
    --color-neon-ice-selected: #314448;
    --color-neon-lavender-selected: #3b3648;
    --color-neon-blush-selected: #453341;
    --color-grass_green-selected: #0f4f43;
    --color-done-green-selected: #0e7358;
    --color-bright-green-selected: #5c7930;
    --color-saladish-selected: #736a3e;
    --color-egg_yolk-hover: #c29e11; --color-egg_yolk-selected: #8d751e;
    --color-working_orange-selected: #8c653c;
    --color-dark-orange-selected: #8d4134;
    --color-peach-selected: #8d6674;
    --color-sunset-selected: #8d4a58;
    --color-stuck-red-selected: #7f314b;
    --color-dark-red-selected: #6b2947;
    --color-sofia_pink-hover: #c21e71; --color-sofia_pink-selected: #8d1a62;
    --color-lipstick-selected: #8d3c7f;
    --color-bubble-selected: #8b6096;
    --color-purple-hover: #8050ab; --color-purple-selected: #5f3e8b;
    --color-dark_purple-selected: #4a3586;
    --color-berry-selected: #4d2d62;
    --color-dark_indigo: #6129ff; --color-dark_indigo-selected: #3c13ae;
    --color-indigo-selected: #383c8d;
    --color-navy: #5684c5; --color-navy-selected: #24508f;
    --color-bright-blue-selected: #395d9b;
    --color-dark-blue-selected: #0e527e;
    --color-aquamarine-selected: #357580;
    --color-chili-blue-selected: #41759d;
    --color-river-selected: #42607c;
    --color-winter-selected: #5b667c;
    --color-explosive-selected: #70717f;
    --color-american_gray-selected: #4e505e;
    --color-blackish: #7a7a7a; --color-blackish-hover: #525252; --color-blackish-selected: #383838;
    --color-brown-selected: #4d3941;
    --color-orchid-hover: #b4739a; --color-orchid-selected: #85597b;
    --color-tan-hover: #978977; --color-tan-selected: #716863;
    --color-sky-hover: #90bac6; --color-sky-selected: #6c8a9a;
    --color-coffee-hover: #a27b6f; --color-coffee-selected: #795e5d;
    --color-royal-hover: #4474bb; --color-royal-selected: #375993;
    --color-teal: #4a8f98; --color-teal-selected: #245960;
    --color-lavender-hover: #a294c8; --color-lavender-selected: #79709c;
    --color-steel-hover: #95a2be; --color-steel-selected: #707a95;
    --color-lilac-hover: #8e8a9f; --color-lilac-selected: #6b697f;
    --color-pecan: #806363; --color-pecan-selected: #513939;
  }
}
@media print {
  :root { color-scheme: light; }
  .theme-picker { display: none !important; }
}