/* ==========================================================================
   AtoZTools — Dark theme (Flagship Wave 1)
   --------------------------------------------------------------------------
   Load order: tokens.css / app CSS first, this file LAST, so these
   overrides win at equal specificity.

   Strategy: this file redefines EVERY colour token from tokens.css under
   [data-theme="dark"] and nothing else, except for the small set of
   clearly-commented component exceptions at the bottom. Components that
   consume tokens via var(--color-*) therefore need no changes.

   Palette logic: the dark family is derived from the brand navy #142B4A —
   the page background is that navy taken darker (#0B1729), surfaces sit
   one step lighter (#14273F), and every foreground colour is a lightened
   version of its light-theme counterpart, verified with
   contrast-check.py (see README.md for the full WCAG table — every
   normal-text pair is >= 4.5:1; most reach AAA).
   ========================================================================== */

[data-theme="dark"] {
  /* Tells the browser to render native UI (scrollbars, form controls,
     overscroll) in its dark variant. */
  color-scheme: dark;

  /* ---- Brand ---- */
  /* --color-navy is used for headings and brand text. Navy itself is
     unreadable on a dark background (1.26:1), so in dark theme the token
     becomes a near-white ice blue. Components that need a FIXED deep-navy
     FILL (footer, skip link, active chip) are handled by Exception 3 —
     a token cannot be both "light text colour" and "dark fill". */
  --color-navy: #EAF1FB;

  /* --color-blue is links / link-like text / focus rings. The light
     #2563EB is only 3.48:1 on the dark background, so the text blue
     lightens to #7FB0FF (8.18:1 on bg, 6.87:1 on surface). Fills that sit
     UNDER white text cannot use this value — see Exception 1. */
  --color-blue: #7FB0FF;
  /* Hover lightens further in dark theme (the light theme darkens,
     because its background is light; the direction flips with the bg). */
  --color-blue-hover: #A8C8FF;

  /* --color-teal is a FILL ONLY in both themes (it pairs with dark navy
     text), so the fill itself does not change. */
  --color-teal: #14B8A6;
  /* Text teal: #0F766E is 3.28:1 on the dark bg — fails. Lightened to the
     bright teal #2DD4BF (9.65:1 on bg, 8.11:1 on surface). */
  --color-teal-text: #2DD4BF;
  /* Teal hover fill: one step brighter than the resting fill; still
     pairs with the fixed dark-navy text set by Exception 2. */
  --color-teal-hover: #2DD4BF;

  /* ---- Surfaces and text ---- */
  --color-bg: #0B1729;        /* brand navy, taken darker */
  --color-surface: #14273F;   /* one step lighter than bg */
  --color-text: #DCE6F2;      /* light slate-blue white (14.24:1 on bg) */
  --color-muted: #A9BCD4;     /* secondary text (9.27:1 bg / 7.78:1 surface) */
  /* Borders: visible but quiet — deliberately the same subtle step the
     light theme uses (#E2E8F0 is only ~1.24:1 on white; this is 1.83:1
     on the dark bg, i.e. slightly MORE visible than the light divider). */
  --color-border: #2C4562;

  /* ---- Status colours: lightened so they read as text on dark ---- */
  --color-success: #4ADE80;   /* 10.31:1 on bg / 8.66:1 on surface */
  --color-warning: #FBBF24;   /* 10.76:1 on bg / 9.04:1 on surface */
  --color-error: #FCA5A5;     /*  9.47:1 on bg / 7.95:1 on surface */

  /* ---- Derived tokens -------------------------------------------------
     --border-card is `1px solid var(--color-border)` in tokens.css, so it
     follows the border override automatically; it is restated here only
     to make the dependency explicit. */
  --border-card: 1px solid var(--color-border);

  /* The single allowed shadow cannot simply invert: the light shadow is
     navy at 8% opacity, which is invisible on a dark background. Dark
     elevation uses a deeper black shadow at higher opacity instead. */
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   COMPONENT EXCEPTIONS
   A token carries one value, but three components use a token as a FILL
   under fixed white/dark text while the rest of the site uses the same
   token as a TEXT colour. In dark theme those two jobs need different
   values, so the fills are pinned here. Each exception was contrast-
   checked (see README). If a class below does not exist in a given build,
   the rule is simply inert.
   ========================================================================== */

/* Exception 1 — primary buttons: white text on a blue fill.
   White on the dark-theme link blue #7FB0FF is only ~2.2:1. Primary
   buttons therefore keep the light-theme blues, which pass with white
   text (5.17:1 resting, 6.70:1 hover) and still read as "blue button"
   on dark surfaces. */
[data-theme="dark"] .btn-primary {
  background-color: #2563EB;
  color: #FFFFFF;
}
[data-theme="dark"] .btn-primary:hover {
  background-color: #1D4ED8;
  color: #FFFFFF;
}

/* Exception 2 — teal buttons: dark text on a teal fill.
   The light theme pairs teal fills with var(--color-navy) text; in dark
   theme that token is near-white, which fails on teal (~2.2:1). Pin the
   text to the fixed brand navy #142B4A (5.72:1 on #14B8A6). */
[data-theme="dark"] .btn-teal {
  color: #142B4A;
}
[data-theme="dark"] .btn-teal:hover {
  color: #142B4A;
}

/* Exception 3 — fixed deep-navy fills.
   Footer background, skip link and the active filter chip use
   var(--color-navy) as a background with white/light text on top. In
   dark theme the token is near-white, so these fills are pinned to deep
   navy values instead:
   - footer: one step darker than the page bg, separated by its border;
   - skip link / active chip: the light-theme button blue (white text
     passes at 5.17:1 and the fill stays clearly visible on dark). */
[data-theme="dark"] .site-footer {
  background-color: #081120;
}
[data-theme="dark"] .skip-link {
  background-color: #1D4ED8;
  color: #FFFFFF;
}
[data-theme="dark"] .chip.is-active {
  background-color: #2563EB;
  border-color: #2563EB;
  color: #FFFFFF;
}

/* Exception 4 — text selection.
   The default selection wash (light blue) hides the lightened link blue;
   use the fixed button blue with white text instead. */
[data-theme="dark"] ::selection {
  background-color: #2563EB;
  color: #FFFFFF;
}