/* ═══════════════════════════════════════════════════════════════
   TANK LOGIC — dark-theme.css  v1.0
   Dark Aquarium Ecosystem override

   Loaded AFTER system.css, style.css, page CSS, and premium-polish.css
   so it wins on equal specificity. It only redefines the design tokens
   declared in system.css :root — every component that consumes those
   tokens (nav, footer, cards, buttons, inputs, tables, hero, etc.)
   re-skins automatically. No layout is touched.

   PALETTE DIRECTION (per site owner brief, 2026-07-11):
   - Dark green base:  #0D2818 (deep moss), #1A3A2A (mid moss)
   - Dark blue base:   #0A1929 (deep water), #132F4C (mid water)
   - Teal/cyan accent: #2DD4BF (primary), #06B6D4 (secondary)
   - Look: a mature planted tank lit from above in a dim room —
     dark water column with moss-green banks and a teal light bar.

   COMPATIBILITY:
   - All legacy token aliases declared in system.css (e.g. --bg-1,
     --leaf, --green, --water-lo) inherit the new values through
     var() references, so legacy page CSS keeps working.
   - The inline SVG logo mark in nav/footer uses hardcoded hex
     colors (#74838D, #3FB079, #268A55) — those are kept as-is
     because they are brand identity, not theme tokens.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1. BACKGROUND TOKENS — deep water + moss banks ─── */
  --bg:            #0A1929;   /* page background — deepest water column */
  --bg-elevated:   #0D2818;   /* nav, footer, cards — raised moss bank */
  --bg-surface:    #132F4C;   /* inputs, hover, active — mid water surface */
  --bg-surface-hi: #1A3A2A;   /* modals, dropdowns — lifted moss */

  /* ─── 2. BORDER TOKENS — teal-tinted, low opacity ─── */
  --border:        rgba(45, 212, 191, 0.14);   /* subtle teal hairline */
  --border-mid:    rgba(45, 212, 191, 0.24);
  --border-hi:     rgba(45, 212, 191, 0.38);

  /* ─── 3. TEXT TOKENS — cool whites + sage-teal grays ─── */
  --text:          #ECFEFF;   /* primary — arctic white with cyan hint */
  --text-mid:      #B6D6E0;   /* secondary — cool sage-teal */
  --text-muted:    #7A9CA8;   /* labels, metadata — muted teal gray */
  --text-faint:    #4A6873;   /* disabled, placeholder — deep water gray */

  /* ─── 4. PRIMARY ACCENT — Teal (the light bar over the tank)
     v1.1: shifted one step deeper for better contrast on dark water.
     Old scale: #2DD4BF / #5EEAD4 / #0F766E  (teal-400/300/700)
     New scale: #14B8A6 / #2DD4BF / #0D9488  (teal-500/400/600)
     Reads as "mossy water" rather than "neon mint". ─── */
  --accent:        #14B8A6;
  --accent-hover:  #2DD4BF;
  --accent-subtle: rgba(20, 184, 166, 0.14);
  --accent-border: rgba(20, 184, 166, 0.34);
  --accent-deep:   #0D9488;   /* deep teal for hover gradients */

  /* ─── 5. SECONDARY ACCENTS ─── */
  --water:         #06B6D4;   /* cyan — for fish/database elements */
  --water-subtle:  rgba(6, 182, 212, 0.12);
  --water-border:  rgba(6, 182, 212, 0.28);

  --sand:          #FBBF24;   /* warm amber — substrate/highlight contrast */
  --sand-subtle:   rgba(251, 191, 36, 0.12);
  --sand-border:   rgba(251, 191, 36, 0.28);

  /* ─── 6. SEMANTIC STATE COLORS ─── */
  --success:       #2DD4BF;   /* = accent */
  --warning:       #FBBF24;   /* = sand */
  --error:         #F87171;
  --error-subtle:  rgba(248, 113, 113, 0.12);
  --info:          #06B6D4;   /* = water */

  /* ─── 7. SHADOW TOKENS — minimal, borders do the work ─── */
  --shadow-sm:       none;
  --shadow-md:       none;
  --shadow-lg:       none;
  --shadow-overlay:  0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40);
}

/* ═══════════════════════════════════════════════════════════════
   8. BODY + HTML — re-tint base layer
   ═══════════════════════════════════════════════════════════════ */
html {
  background: var(--bg);
  /* Slightly cooler scrollbar track to read as "deep water" */
  scrollbar-color: var(--border-mid) var(--bg);
}

body {
  background:
    /* very subtle teal light bar from top — like an LED above the tank.
       Uses the new deeper teal #14B8A6 so it harmonises with the accent. */
    linear-gradient(180deg, rgba(20, 184, 166, 0.05) 0%, transparent 220px),
    var(--bg);
  color: var(--text-mid);
  background-attachment: fixed;
}

/* Selection — teal tint instead of moss */
::selection {
  background: rgba(20, 184, 166, 0.22);
  color: var(--text);
}

/* Scrollbar — teal-tinted thumb */
::-webkit-scrollbar-track         { background: var(--bg); }
::-webkit-scrollbar-thumb         { background: rgba(20, 184, 166, 0.22); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(20, 184, 166, 0.40); }

/* ═══════════════════════════════════════════════════════════════
   9. NAV + FOOTER — moss bank against the water column
   ═══════════════════════════════════════════════════════════════ */
.nav {
  background: rgba(13, 40, 24, 0.92);   /* dark moss with slight transparency */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-mid);
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.nav__mobile {
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-mid);
}
.nav__mobile a:hover { color: var(--accent); }

.footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-mid);
}
.footer__col h4 { color: var(--accent); }
.footer__bottom {
  border-top: 1px solid var(--border);
}
.footer__email { color: var(--water); }

/* ═══════════════════════════════════════════════════════════════
   10. BUTTONS — teal primary, water-blue secondary
   ═══════════════════════════════════════════════════════════════ */
.btn-primary {
  background: var(--accent);
  color: #0A1929;            /* dark water text on teal button */
  border: 1px solid var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #0A1929;
}

.btn-secondary {
  background: transparent;
  color: var(--water);
  border: 1px solid var(--water-border);
}
.btn-secondary:hover {
  background: var(--water-subtle);
  color: var(--water);
  border-color: var(--water);
}

/* ═══════════════════════════════════════════════════════════════
   11. CARDS, BADGES, INPUTS — surface elevation with teal borders
   ═══════════════════════════════════════════════════════════════ */
.badge {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.card,
.smart-card,
.tool-card,
.guide-card,
.related-card,
.sidebar-panel,
.result-card,
.bns-card,
.plan-card,
.promo-card,
.tool-card-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.card:hover,
.smart-card:hover,
.tool-card:hover,
.guide-card:hover,
.related-card:hover {
  border-color: var(--accent-border);
}

/* Inputs — teal focus ring */
input, select, textarea {
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  color: var(--text);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

/* Tables — moss header on water body */
th {
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-mid);
}
td { border-bottom: 1px solid var(--border); }
tr:hover td { background: var(--bg-surface); }

/* ═══════════════════════════════════════════════════════════════
   12. LINKS, HEADINGS, FOCUS — teal accent throughout
   ═══════════════════════════════════════════════════════════════ */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip:focus {
  background: var(--accent);
  color: #0A1929;
}

/* ═══════════════════════════════════════════════════════════════
   13. AD SHELLS — recolor filled ad containers to match theme
   ═══════════════════════════════════════════════════════════════ */
.ad-shell--filled {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.ad-shell--filled .ad-label { color: var(--text-faint); }

/* ═══════════════════════════════════════════════════════════════
   14. HERO, CTA — keep existing layout, just retint surfaces
   ═══════════════════════════════════════════════════════════════ */
.hero,
.cta-banner {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   15. CODE BLOCKS, PREFORMATTED TEXT
   ═══════════════════════════════════════════════════════════════ */
code, pre, .mono {
  background: var(--bg-surface);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px 6px;
}
pre {
  padding: 14px 16px;
  overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════════
   16. REDUCED MOTION + MOBILE GUARD (inherit from system.css)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { background: var(--bg); }
  body { background: var(--bg); background-attachment: scroll; }
}

/* On very small screens, drop the top light-bar gradient to save GPU */
@media (max-width: 640px) {
  body {
    background: var(--bg);
    background-attachment: scroll;
  }
}