/* ═══════════════════════════════════════════════════════════════
   TANK LOGIC — system.css  v1.1  (Phase 3 — freshwater ecosystem)
   Design token foundation — dark freshwater aquarium aesthetic.

   This file is loaded FIRST, before style.css and all page CSS.
   It defines every token the site needs. No other file should
   redefine these tokens (no more inline <style> :root overrides).

   DIRECTION:
   "Dark freshwater ecosystem" — the deep greens, water blues, and
   earthy sand tones of a planted aquarium at night. NOT neutral
   tech-product black. The site should feel like looking into a
   mature tank in a dim room.

   PRINCIPLES:
   1. Forest-floor dark greens (not pure black, not neutral gray)
   2. Moss as primary accent, water-blue + sand as secondary
   3. Inter for prose, JetBrains Mono for labels/stats/code
   4. 8px base spacing unit, strict 8-step type scale
   5. Thin borders (sage-tinted, not white), no glassmorphism, no grain
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. COLOR TOKENS — Freshwater Ecosystem ─────── */
:root {
  /* Backgrounds — deep forest-floor greens (NOT neutral black) */
  --bg:            #070A08;   /* page background — ultra-dark olive-black (like tank water at night) */
  --bg-elevated:   #0E1410;   /* nav, footer, cards — raised moss surface */
  --bg-surface:    #141C16;   /* inputs, hover, active — card surface */
  --bg-surface-hi: #1C2620;   /* modals, dropdowns — lifted moss */

  /* Borders — sage-tinted (not pure white) for ecosystem cohesion */
  --border:        rgba(124,138,128,0.18);   /* sage at low opacity */
  --border-mid:    rgba(124,138,128,0.28);
  --border-hi:     rgba(124,138,128,0.40);

  /* Text — warm whites + sage grays (NOT neutral gray) */
  --text:          #F0F5F0;   /* primary — warm white with hint of green */
  --text-mid:      #B5C4B8;   /* secondary — sage gray */
  --text-muted:    #7A8A80;   /* labels, metadata — moss gray */
  --text-faint:    #52604F;   /* disabled, placeholder — deep moss */

  /* Primary accent — Moss / leaf green (the plants in the tank) */
  --accent:        #6FBF8E;
  --accent-hover:  #82CD9E;
  --accent-subtle: rgba(111,191,142,0.12);
  --accent-border: rgba(111,191,142,0.30);
  --accent-deep:   #2E7D52;   /* deep moss for hover gradients */

  /* Secondary accents — used sparingly for semantic meaning */
  --water:         #5FB7CC;   /* water blue — for fish/database elements */
  --water-subtle:  rgba(95,183,204,0.12);
  --water-border:  rgba(95,183,204,0.25);
  --sand:          #C9995B;   /* sand/gold — for substrate/bowl elements */
  --sand-subtle:   rgba(201,153,91,0.12);
  --sand-border:   rgba(201,153,91,0.25);

  /* Semantic — state colors only */
  --success:       #6FBF8E;   /* = accent */
  --warning:       #C9995B;   /* = sand */
  --error:         #D96A6A;
  --error-subtle:  rgba(217,106,106,0.12);
  --info:          #5FB7CC;   /* = water */

  /* Legacy aliases — map old token names to new values.
     This lets existing page CSS (guide.css, tool.css, etc.)
     keep working without a full rewrite. */
  --bg-1:          var(--bg-elevated);
  --bg-2:          var(--bg-surface);
  --bg-3:          var(--bg-surface-hi);
  --tx-hi:         var(--text);
  --tx:            var(--text-mid);
  --tx-lo:         var(--text-muted);
  --tx-xlo:        var(--text-faint);
  --text-hi:       var(--text);
  --text-lo:       var(--text-muted);
  --text-xlo:      var(--text-faint);
  --text-body:     var(--text-mid);
  --accent-lo:     var(--accent-subtle);
  --accent-mid:    var(--accent-border);
  --leaf:          var(--accent);
  --leaf-deep:     var(--accent-deep);
  --green:         var(--accent);
  --green-lo:      var(--accent-subtle);
  --green-mid:     var(--accent-border);
  --moss:          var(--accent);
  --moss-deep:     var(--accent-deep);
  --sage:          var(--text-muted);
  --fish-c:        var(--accent);   /* fish database card icon color */

  /* Multi-color legacy aliases — keep the freshwater palette
     (water/sand stay as their own colors, not collapsed to gray) */
  --water-lo:      var(--water-subtle);
  --water-mid:     var(--water-border);
  --sand-lo:       var(--sand-subtle);
  --sand-pale:     var(--bg-surface);
  --gold:          var(--sand);
  --gold-lo:       var(--sand-subtle);
  --purple:        var(--text-mid);   /* purple retired — maps to neutral */
  --purple-lo:     rgba(124,138,128,0.10);
  --red:           var(--error);
  --red-lo:        var(--error-subtle);
  --blue:          var(--water);

  /* ─── 2. TYPOGRAPHY TOKENS ─────────────────────── */

  /* Font families */
  --font:          'Inter', system-ui, -apple-system, sans-serif;
  --font-head:     'Poppins', 'Inter', system-ui, sans-serif;
  --font-mono:     'Inter', system-ui, sans-serif;

  /* Strict 8-step type scale (px values) */
  --sz-10:  10px;
  --sz-11:  11px;
  --sz-12:  12px;
  --sz-13:  13px;
  --sz-14:  14px;
  --sz-15:  15px;
  --sz-16:  16px;
  --sz-17:  17px;
  --sz-18:  18px;
  --sz-19:  19px;
  --sz-20:  20px;
  --sz-21:  21px;
  --sz-22:  22px;
  --sz-24:  24px;
  --sz-26:  26px;
  --sz-28:  28px;
  --sz-30:  30px;
  --sz-32:  32px;
  --sz-36:  36px;
  --sz-40:  40px;
  --sz-44:  44px;
  --sz-48:  48px;
  --sz-56:  56px;
  --sz-64:  64px;

  /* ─── 3. SPACING TOKENS (8px base) ─────────────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ─── 4. RADIUS TOKENS ─────────────────────────── */
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    8px;
  --r-xl:    12px;
  --r-2xl:   16px;
  --r-full:  9999px;

  /* ─── 5. LAYOUT TOKENS ─────────────────────────── */
  --nav-h:        56px;
  --max-w:        1200px;
  --content-w:    720px;     /* optimal reading width */
  --sidebar-w:    280px;

  /* ─── 6. MOTION TOKENS ─────────────────────────── */
  --t:            160ms;                          /* default transition */
  --t-fast:       100ms;
  --t-slow:       240ms;
  --ease:         cubic-bezier(0.22, 0.8, 0.3, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);

  /* ─── 7. SHADOW TOKENS ─────────────────────────── */
  /* Linear/Vercel aesthetic: minimal shadows. Borders do the work. */
  --shadow-sm:    none;
  --shadow-md:    none;
  --shadow-lg:    none;
  /* Subtle elevation for dropdowns/modals only */
  --shadow-overlay: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
}

/* ═══════════════════════════════════════════════════════════════
   8. RESET & BASE ELEMENTS
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

body {
  background: var(--bg);
  color: var(--text-mid);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* NO grain texture overlay — removed in Phase 2 */
}

/* Headings — Inter only, no serif */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(22px, 3.5vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: clamp(18px, 2.8vw, 22px); font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
h4 { font-size: 14px; font-weight: 600; }

p {
  color: var(--text-mid);
  line-height: 1.7;
}

p.lead {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.6;
  max-width: 60ch;
}

strong { color: var(--text); font-weight: 600; }
em     { font-style: italic; color: var(--text); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t) var(--ease);
}
a:hover { color: var(--accent-hover); }

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol { list-style: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--r-md);
  padding: 8px 12px;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  outline: none;
  width: 100%;
}
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);
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mid);
  display: block;
  margin-bottom: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-elevated);
}
td { color: var(--text-mid); }
tr:hover td { background: var(--bg-surface); }

code, pre, .mono {
  font-family: var(--font);
  font-size: 0.92em;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

/* ─── 9. FOCUS & SELECTION ───────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection {
  background: var(--accent-subtle);
  color: var(--text);
}

/* ─── 10. SCROLLBAR ──────────────────────────────── */
::-webkit-scrollbar               { width: 8px; height: 8px; }
::-webkit-scrollbar-track         { background: var(--bg); }
::-webkit-scrollbar-thumb         { background: var(--border-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover   { background: var(--text-faint); }

/* ─── 11. LAYOUT UTILITIES ───────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 20px;
}

.section    { padding-block: 64px; }
.section-sm { padding-block: 40px; }
.section-xs { padding-block: 24px; }

/* ─── 12. ACCESSIBILITY ──────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 9999;
}
.skip:focus {
  left: 12px;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 14px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
}

/* ─── 13. SCROLL REVEAL ──────────────────────────── */
.fade-up {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
html.js-anim .fade-up:not(.visible) {
  opacity: 0;
  transform: translateY(12px);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ─── 14. REDUCED MOTION ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-up { opacity: 1 !important; transform: none !important; }
}

/* ─── 15. RESPONSIVE TYPE ADJUSTMENTS ────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }
  .section { padding-block: 40px; }
  .container { padding-inline: 16px; }
}

/* ─── 16. HORIZONTAL OVERFLOW GUARD ──────────────── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}
img, svg, video, iframe, table { max-width: 100%; }

/* ─── 17. GOOGLE TRANSLATE UI HIDE ───────────────── */
.goog-te-banner-frame,
.goog-te-menu-frame { display: none !important; }
body { top: 0 !important; }
.skiptranslate { display: none !important; }

/* ─── AD SHELLS (Phase 6) ────────────────────────── */
.ad-shell { width: 100%; }
.ad-shell .ad-label {
  display: none;
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
  padding: 4px 0 2px;
}
.ad-shell--filled {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ad-shell--filled .ad-label { display: block; }
.ad-shell--leaderboard.ad-shell--filled {
  min-height: 90px;
  max-height: 118px;
  overflow: hidden;
  margin: 18px auto;
}
.ad-shell--sky.ad-shell--filled {
  min-height: 250px;
}
.ad-shell--native.ad-shell--filled {
  min-height: 120px;
  margin: 0 auto 26px;
}
.ad-shell ins.adsbygoogle { display: block; width: 100%; }


/* ── TABLE OVERFLOW FIX (mobile) ── */
/* Ensure all tables scroll horizontally on small screens */
.guide-table-wrap,
.table-wrap,
.wc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── LINK ARROW FIX ── */
/* Prevent "→" arrows from being truncated on CTA links */
.btn, .link, .home-tool-card__cta, .smart-card__link, .tool-card__link,
.guide-card__link, .related-card, .fr-card .go {
  white-space: normal;
}
.btn .arr, .link::after, .home-tool-card__cta::after {
  white-space: nowrap;
}

/* ── WORD BREAK SAFETY ── */
/* Prevent long unbreakable strings from overflowing containers */
.guide-body p, .guide-body li, .guide-body td, .guide-body th,
.seo-content__inner p, .seo-content__inner li {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
}

/* ── CARD HEIGHT CONSISTENCY ── */
/* Ensure cards in grids stretch to equal heights */
.tools-grid, .guides-grid, .related-grid, .smart-cards-grid, .fr-grid {
  align-items: stretch;
}
.tool-card, .guide-card, .related-card, .smart-card, .fr-card {
  height: 100%;
}

/* ── FOOTER SPACING FIX ── */
.footer__col ul li {
  margin-bottom: 6px;
}
.footer__bottom {
  padding-top: 20px;
  padding-bottom: 8px;
}

/* ── MOBILE EDGE PADDING ── */
@media (max-width: 640px) {
  .container, .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .guide-body, .guide-sidebar {
    padding-left: 0;
    padding-right: 0;
  }
  /* Ensure tables have minimum width and scroll */
  .guide-table, .wc-table, .guide-body table {
    min-width: 400px;
  }
}

/* ── TOUCH TARGET SIZE ── */
/* Ensure link-style buttons are at least 36px tall (44px ideal but 36px acceptable for text links) */
@media (max-width: 700px) {
  .btn { min-height: 40px; }
  .link { display: inline-block; padding: 4px 0; }
  .guide-card__link, .tool-card__link, .home-tool-card__cta {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
  }
}