/* jLanguage brand tokens — the canonical web rendering of the palette.
 *
 * Every page links this instead of re-declaring the palette in its own <style>
 * block, which is what all nine pages did before. Changing a brand colour is a
 * one-file edit now; it used to be nine, with no way to tell whether one had been
 * missed. It had already gone wrong: privacy.html called the body-text role
 * --text-body and gave it #333, while the other eight called it --text-secondary
 * and gave it #444 — a different name and a different value for the same thing.
 *
 * knowledge/style_guide.md is the spec this renders, and Shared/Design/BrandPalette.swift
 * is the Swift rendering of the same brand. Neutrals deliberately do NOT cross to
 * iOS: the app uses system semantic colours so Increase Contrast, Smart Invert and
 * dark-mode elevation keep working. See the style guide before syncing anything.
 *
 * Linked before each page's own <style>, so a page can still override a token
 * locally — no page needs to today.
 *
 * The href is ROOT-ABSOLUTE (/css/tokens.css) and must stay that way. nginx.conf
 * client-routes ^/learn/, ^/category/ and ^/alphabet/ with `try_files $uri
 * /<page>.html`, so from /learn/some-word a relative href would resolve to
 * /learn/css/tokens.css, miss, and fall through to learn.html — served 200 as
 * text/html. X-Content-Type-Options: nosniff then refuses to apply it, and every
 * client-routed page silently loses its palette. Do not "tidy" this to a relative path.
 */

:root {
  /* Brand. Identical in both colour schemes: these are the logo's colours, and
   * they are what the gradient is built from. Not re-declared in the dark block. */
  --teal: #00b4db;
  --blue: #0082c8;
  --green: #2ecc71;
  --red: #e74c3c;
  --gradient: linear-gradient(135deg, #0082c8, #00b4db, #2ecc71);

  /* Surfaces and text. Every one of these is overridden for dark below — keep the
   * two blocks in step, or a token defined only here stays light on a dark page. */
  --bg: #f8f9fa;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #444;
  --muted: #6c757d;
  --border: #e9ecef;
  --hover-bg: rgba(0, 0, 0, 0.04);
  --example-bg: rgba(0, 0, 0, 0.025);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --card: #161b22;
    --text: #e6edf3;
    --text-secondary: #adb5bd;
    --muted: #7d8590;
    --border: #21262d;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --example-bg: rgba(255, 255, 255, 0.04);
  }
}