/* ------------------------------------------------------------------
   Site theme: sage accent, Inter throughout, and the app's own four
   themes for the ground: OLED Black (the default), Classic Grey, Navy and
   Light. Their surfaces are the app's (src/ui/src/Theme.cpp); the accent
   stays the site's sage in all four.

   Every page links this file. The doc pages (support, specs, updates,
   guides, privacy, terms, troubleshooting) link it AFTER their own inline
   <style>, so these tokens and the few element rules below replace the
   old blue palette and Staatliches headings without touching their markup.
   The home page links it BEFORE its inline <style> and builds on the tokens.

   A theme is chosen with <html data-theme="classic|navy|light">; no
   attribute is OLED Black. Each page's head sets it from localStorage
   ("amp-theme") before the first paint; the picker is in the home nav.

   Contrast, dark themes (worst case Classic Grey, --bg #1E1E1E): --text
   15.1:1, --muted 8.3:1, --faint 5.5:1 (4.7:1 on --card), --accent-2
   9.7:1, dark ink on the sage button 8.2:1. Light on #F5F5F5: --text
   16.0:1, --muted 6.8:1, --faint 4.9:1, --accent 4.8:1, --accent-2 5.7:1,
   white on the darker sage button 5.3:1.
   ------------------------------------------------------------------ */
:root {
  --bg: #0A0A0A;
  --surface: #0F0F0F;
  --card: #141414;
  --card-hover: #1F1F1F;
  --border: #242424;
  --border-strong: #333333;
  --nav-bg: rgb(10 10 10 / 0.86);
  --text: #F1F4F5;
  --muted: #AAB5BB;
  --faint: #7D8A91;

  --accent: #83B8A9;
  --accent-hover: #98C9BB;
  /* Text-weight sage: links and small labels, a step lighter than fills. */
  --accent-2: #A3CEC1;
  --accent-rgb: 131 184 169;
  --accent-dim: rgb(131 184 169 / 0.10);
  --accent-line: rgb(131 184 169 / 0.32);
  --on-accent: #0E1613;

  /* Old roles some pages still name. All of them collapse onto sage. */
  --accent-2-rgb: var(--accent-rgb);
  --accent-on-light: var(--accent-2);
  --accent-on-light-rgb: var(--accent-rgb);
  --success: var(--accent);
  --rec: var(--accent);
  --ember: var(--accent-2);
  --ember-line: var(--accent-line);
  --str: #E5736B;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --display: var(--font);
  /* Labels that used IBM Plex Mono now set in Inter; real code keeps a
     monospace (see code/kbd below). */
  --mono: var(--font);
  --code: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 18px 40px -18px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 40px 80px -30px rgb(0 0 0 / 0.75), 0 12px 28px -12px rgb(0 0 0 / 0.5);
}

:root[data-theme="classic"] {
  --bg: #1E1E1E;
  --surface: #232323;
  --card: #2A2A2A;
  --card-hover: #353535;
  --border: #383838;
  --border-strong: #454545;
  --nav-bg: rgb(30 30 30 / 0.86);
  --muted: #B3B8BC;
  --faint: #8E959A;
}

:root[data-theme="navy"] {
  --bg: #0A1120;
  --surface: #0D1527;
  --card: #111A2E;
  --card-hover: #1A2540;
  --border: #223050;
  --border-strong: #2F4068;
  --nav-bg: rgb(10 17 32 / 0.86);
  --muted: #A9B4CC;
  --faint: #7F8BA6;
}

:root[data-theme="light"] {
  --bg: #F5F5F5;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #EEF0F3;
  --border: #D6D9DF;
  --border-strong: #C2C7D0;
  --nav-bg: rgb(245 245 245 / 0.88);
  --text: #1A1A1A;
  --muted: #4F5662;
  --faint: #646B78;

  /* Sage fills read on white only a step darker, and take white ink. */
  --accent: #367764;
  --accent-hover: #2F6957;
  --accent-2: #2E6B5B;
  --accent-rgb: 54 119 100;
  --accent-dim: rgb(54 119 100 / 0.10);
  --accent-line: rgb(54 119 100 / 0.35);
  --on-accent: #FFFFFF;

  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 18px 40px -18px rgb(0 0 0 / 0.18);
  --shadow-lg: 0 40px 80px -30px rgb(0 0 0 / 0.28), 0 12px 28px -12px rgb(0 0 0 / 0.16);
}

html {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* The old doc-page hover border is white at 24%, invisible on Light. */
:root[data-theme="light"] .btn-ghost:hover {
  border-color: var(--border-strong);
}

/* The updates page sets its body text in fixed light greys. */
:root[data-theme="light"] .lede,
:root[data-theme="light"] .release-note {
  color: var(--muted);
}

:root[data-theme="light"] .release li {
  color: var(--text);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgb(var(--accent-rgb) / 0.35);
  color: var(--text);
}

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

code,
kbd {
  font-family: var(--code);
}

/* --- Doc pages -------------------------------------------------------
   Headings were Staatliches at weight 400 with open tracking. Inter
   wants the opposite: real weight, slightly tight. */
h1,
h2 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.022em;
}

h2 {
  letter-spacing: -0.015em;
}

h3 {
  letter-spacing: -0.01em;
}

nav {
  background: var(--nav-bg);
  border-bottom-color: var(--border);
}

footer {
  background: var(--surface);
  border-top-color: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}