/* ToLogistiko website: the dark ("Modern") style. Light is the default; visitors switch with the
   moon/sun button in the header, and the choice is remembered in their browser (site-theme.js). */

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); border-radius: 9px; background: transparent; color: var(--ink); cursor: pointer; padding: 0;
}
.theme-toggle:hover { border-color: #c3cbdb; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: block; color: #ffd166; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9eef8;
  --ink-soft: #a9b8d0;
  --line: #24365c;
  --bg: #0f1a30;
  --bg-alt: #132341;
  --brand: #6eb445;
  --brand-lt: #8fb4ea;
  --accent: #f0b866;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] a { color: #8fb4ea; }
html[data-theme="dark"] .logo img { content: url("/tologistiko-logo-reverse.svg"); }

/* header */
html[data-theme="dark"] header { background: rgba(15, 26, 48, .92); border-bottom-color: var(--line); }
html[data-theme="dark"] header .link { color: var(--ink-soft); }
html[data-theme="dark"] header .link:hover { color: #fff; }
html[data-theme="dark"] .theme-toggle:hover, html[data-theme="dark"] .btn-ghost:hover { border-color: #3a5282; }

/* buttons and switches: green with dark text, like the app's Modern style */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .lang-switch a.active,
html[data-theme="dark"] .billing button[aria-pressed="true"],
html[data-theme="dark"] .chips a.on { color: #0f1a30; }
html[data-theme="dark"] .btn-primary:hover { background: #5ea137; }
html[data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .lang-switch a { color: var(--ink-soft); }

/* cards and boxes that were white */
html[data-theme="dark"] :where(.card, .planbox, .cat, .askbox, .toc, .cta-box, .pcard, .billing, .panel, .plan) {
  background: #16233f; border-color: var(--line);
}
html[data-theme="dark"] .chips a:not(.on) { background: #16233f; border-color: var(--line); }
html[data-theme="dark"] .help-search input { background: #16233f; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.ico, .pc-img) { background: #1c2c4f; color: #8fb4ea; }
html[data-theme="dark"] :is(.tip, .prose th) { background: #16233f; }
html[data-theme="dark"] :is(.prose code, .post-tags span) { background: #1c2c4f; color: var(--ink); }
html[data-theme="dark"] .tag-info { background: #1c2c4f; color: #8fb4ea; }
html[data-theme="dark"] .dot { background: #2b3e66; }
html[data-theme="dark"] .panel { box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .6); }

/* the navy "highlight" band stays navy, a shade lighter than the page */
html[data-theme="dark"] .highlight { background: #1d3f76; }
html[data-theme="dark"] .highlight .btn-primary { background: #6eb445; }

/* sections on the alternate background */
html[data-theme="dark"] .alt, html[data-theme="dark"] section.alt { background: var(--bg-alt); }

/* forms */
html[data-theme="dark"] :is(input, select, textarea) { background: #16233f; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .price.featured { border-color: #6eb445; box-shadow: 0 14px 34px -20px rgba(110, 180, 69, .35); }
html[data-theme="dark"] .badge { color: #0f1a30; }

/* sign-in page (workspace finder) */
html[data-theme="dark"] .ws-card { background: #16233f; border-color: var(--line); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .ws-ico { background: #1c2c4f; }
html[data-theme="dark"] .ws-field { border-color: var(--line); }
html[data-theme="dark"] .ws-field input { background: #0f1a30; color: var(--ink); }
html[data-theme="dark"] .ws-field span { background: #132341; color: var(--ink-soft); border-left-color: var(--line); }
html[data-theme="dark"] .ws-role { background: #0f1a30; border-color: var(--line); }
html[data-theme="dark"] .ws-role input:checked + span { color: #0f1a30; }
html[data-theme="dark"] .ws-role span { color: var(--ink-soft); }
html[data-theme="dark"] .highlight .btn-ghost { color: #1d3f76; }

/* legal pages (privacy, terms): plain pages with only a small top bar */
body.legal .theme-toggle { --line: #d5dbe6; --ink: #1a1a1a; }
html[data-theme="dark"] body.legal { background: #0f1a30; color: #e9eef8; }
html[data-theme="dark"] body.legal :is(.updated, footer) { color: #a9b8d0; border-color: #24365c; }