/*
 * Dark / light theme for the public site.
 *
 * Loaded AFTER newstyle.css and blog.css so it can override them without those
 * files being rewritten. Everything is driven from the tokens below.
 *
 * Three states are handled, because that is what browsers actually report:
 *   1. no choice made  -> follow prefers-color-scheme
 *   2. data-theme="dark"  -> dark, whatever the OS says
 *   3. data-theme="light" -> light, whatever the OS says
 */

:root {
  --brand: #1ccc52;
  --brand-dark: #12a341;

  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-muted: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f9fafb;

  --ink: #111827;
  --ink-soft: #374151;
  --ink-muted: #4b5563;

  --line: #e5e7eb;
  --line-soft: #eaeef2;

  --topbar: #333333;
  --topbar-ink: #efefef;

  --shadow: rgba(17, 24, 39, .08);
  --shadow-strong: rgba(17, 24, 39, .14);
}

/* ---- dark palette, applied for "system dark" and for the explicit toggle ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1512;
    --bg-soft: #131a16;
    --bg-muted: #172019;
    --surface: #171f1b;
    --surface-2: #1c2521;

    --ink: #e8efea;
    --ink-soft: #b8c5bd;
    --ink-muted: #93a29a;

    --line: #26312b;
    --line-soft: #2c3831;

    --topbar: #0b100d;
    --topbar-ink: #c9d5cd;

    --shadow: rgba(0, 0, 0, .45);
    --shadow-strong: rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --bg: #0f1512;
  --bg-soft: #131a16;
  --bg-muted: #172019;
  --surface: #171f1b;
  --surface-2: #1c2521;

  --ink: #e8efea;
  --ink-soft: #b8c5bd;
  --ink-muted: #93a29a;

  --line: #26312b;
  --line-soft: #2c3831;

  --topbar: #0b100d;
  --topbar-ink: #c9d5cd;

  --shadow: rgba(0, 0, 0, .45);
  --shadow-strong: rgba(0, 0, 0, .6);
}

/* ================= page ground ================= */
body {
  background: var(--bg);
  color: var(--ink-soft);
}

/* ================= top bar + nav ================= */
#header .nav-left { background: var(--topbar); }
#header .nav-left li a { color: var(--topbar-ink); }

/* ================= content sections ================= */
section.sec-1.sec-content { background: var(--bg-soft); }
section.sec-1.sec-content .content-rich {
  background: var(--surface);
  box-shadow: 0 2px 14px var(--shadow);
}
section.sec-1.sec-content .content-rich h1,
section.sec-1.sec-content .content-rich h2,
section.sec-1.sec-content .content-rich h3,
section.sec-1.sec-content .content-rich h4,
section.sec-1.sec-content .content-rich h5,
section.sec-1.sec-content .content-rich h6 { color: var(--ink); }
section.sec-1.sec-content .content-rich p,
section.sec-1.sec-content .content-rich li { color: var(--ink-soft); }
section.sec-1.sec-content .content-rich .table { background: var(--surface); color: var(--ink-soft); }
section.sec-1.sec-content .content-rich .table th { background: var(--surface-2); color: var(--ink); }
section.sec-1.sec-content .content-rich .table td,
section.sec-1.sec-content .content-rich .table th { border-color: var(--line); }
section.sec-1.sec-content .content-rich pre {
  background: var(--bg-muted);
  color: var(--ink);
  border: 1px solid var(--line);
}
section.sec-1.sec-content .content-rich code { color: var(--brand); }
section.sec-1.sec-content .content-rich caption { color: var(--ink-muted); }

section.sec-1.sec-features { background: var(--surface); }
section.sec-1.sec-features .features-intro h2 { color: var(--ink); }
section.sec-1.sec-features .features-sub,
section.sec-1.sec-features .features-note { color: var(--ink-muted); }
section.sec-1.sec-features .features-note { background: var(--surface-2); }
section.sec-1.sec-features .features-list li { color: var(--ink-soft); }
section.sec-1.sec-features .features-table thead th {
  background: var(--surface-2);
  color: var(--ink-soft);
}
section.sec-1.sec-features .features-table td,
section.sec-1.sec-features .features-table th { border-color: var(--line); }
section.sec-1.sec-features .feature-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 12px var(--shadow);
}
section.sec-1.sec-features .feature-card .card-title { color: var(--ink); }
section.sec-1.sec-features .feature-card .card-text { color: var(--ink-soft); }

article.art-1 { color: var(--ink); }

/* ================= cards / pricing ================= */
/* The pricing band carries its own light grey in newstyle.css, so without this
   the whole section stayed white while everything around it went dark. */
section.sec-2 { background-color: var(--bg-soft); }
section.sec-2.sec-pricing { background-color: var(--bg-soft); }
section.sec-2 .pricing-head h3,
section.sec-2 .heading h3 { color: var(--ink); }
section.sec-2 .pricing-head p { color: var(--ink-muted); }
section.sec-2 .country .card {
  background-color: var(--surface-2);
  border-color: var(--line);
}
section.sec-2 .pricing-cards .pricing-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 4px 18px var(--shadow);
}
section.sec-2 .pricing-cards .pricing-days { background: var(--bg-muted); color: var(--ink-soft); }
section.sec-2 h2, section.sec-2 h3, section.sec-2 h4 { color: var(--ink); }
section.sec-2 p, section.sec-2 li { color: var(--ink-soft); }

/* ================= blog ================= */
.blog-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 2px 12px var(--shadow);
}
.blog-card-body h2 a { color: var(--ink); }
.blog-card-body p, .blog-card-body time { color: var(--ink-muted); }
.blog-widget { background: var(--surface); border-color: var(--line); }
.blog-widget-title { color: var(--ink); }
.blog-recent-list a b { color: var(--ink); }
.blog-recent-list a small { color: var(--ink-muted); }
.blog-content { color: var(--ink-soft); }
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6 { color: var(--ink); }
.blog-content pre, .blog-content code {
  background: var(--bg-muted);
  color: var(--ink);
}
.blog-content table { color: var(--ink-soft); }
.blog-content table th { background: var(--surface-2); color: var(--ink); }
.blog-content table td, .blog-content table th { border-color: var(--line); }
.blog-content blockquote { border-left-color: var(--brand); color: var(--ink-muted); }
.blog-nav a { background: var(--surface); border-color: var(--line); color: var(--ink); }
.blog-hero-meta, .blog-meta { color: var(--ink-muted); }

/* Bootstrap bits that appear inside content */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .list-group-item {
  background-color: var(--surface);
  color: var(--ink-soft);
  border-color: var(--line);
}
:root[data-theme="dark"] .table { color: var(--ink-soft); }
:root[data-theme="dark"] .text-muted { color: var(--ink-muted) !important; }
:root[data-theme="dark"] hr { border-top-color: var(--line); }
:root[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }
:root[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
:root[data-theme="dark"] .form-control {
  background-color: var(--surface-2);
  border-color: var(--line);
  color: var(--ink);
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--ink-muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .list-group-item {
    background-color: var(--surface);
    color: var(--ink-soft);
    border-color: var(--line);
  }
  :root:not([data-theme="light"]) .table { color: var(--ink-soft); }
  :root:not([data-theme="light"]) .text-muted { color: var(--ink-muted) !important; }
  :root:not([data-theme="light"]) hr { border-top-color: var(--line); }
  :root:not([data-theme="light"]) .bg-light { background-color: var(--surface-2) !important; }
  :root:not([data-theme="light"]) .bg-white { background-color: var(--surface) !important; }
  :root:not([data-theme="light"]) .form-control {
    background-color: var(--surface-2);
    border-color: var(--line);
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .form-control::placeholder { color: var(--ink-muted); }
}

/* The hero photo is already dark, so it only needs a slightly deeper veil. */
:root[data-theme="dark"] #header::before,
:root[data-theme="dark"] #header::after { opacity: .9; }
:root[data-theme="dark"] #header {
  background-blend-mode: multiply;
  background-color: #0b100d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #header {
    background-blend-mode: multiply;
    background-color: #0b100d;
  }
}

/* ================= the light / dark switch ================= */

/* The links list scrolls sideways on phones; the switch sits beside it as a
   fixed item so it is always reachable at the right edge of the bar. */
#header .nav-left .nav-left-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
#header .nav-left .nav-left-bar > .nav {
  flex: 1 1 auto;
  min-width: 0;
}
#header .nav-left .nav-left-bar > .theme-switch {
  flex: 0 0 auto;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.theme-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.theme-switch-btn svg { width: 15px; height: 15px; display: block; }
.theme-switch-btn:hover { color: #fff; }
.theme-switch-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* the mode you are actually in */
.theme-switch-btn[aria-pressed="true"] {
  background: var(--brand);
  color: #06210f;
}
.theme-switch-btn[aria-pressed="true"]:hover { color: #06210f; }

@media (prefers-reduced-motion: reduce) {
  .theme-switch-btn { transition: none; }
}