/* The design tokens — the one copy, for every page: the server-rendered ones (templates/
   layout.html) and the map app's shell (templates/app/app.html) both load this first, so
   header.css, pages.css and the React app's index.css all draw on it and define none of their
   own (ADR-0012). A value off its scales is a design decision: add a step or take the
   nearest. The Android theme carries the same palette, fonts and scales (IMPLEMENTATION.md
   §4.19), so a change here needs the matching change in its res/values.

   Two palettes: the light one below, and a dark one further down that replaces only the
   colors. Which one applies is data-theme on <html> — "light" or "dark", set by theme.html's
   script from the hmt_theme localStorage key Settings' Theme control writes — and, with no
   data-theme (the "System" choice), the OS's prefers-color-scheme. The Android app's
   res/values/colors.xml and res/values-night/colors.xml carry the same two palettes.

   The *-rgb tokens exist for opacity tints — rgb(var(--fm-ink-rgb) / N%) — so a border, text
   or hover can take the palette's hue at whatever alpha it needs, instead of a hand-picked hex
   per element. Ink tints flip with the theme, as text and hover tints should; shadows and
   backdrops use --fm-shadow-rgb instead, which stays dark in both, since a light shadow would
   glow rather than lift. */
:root {
  color-scheme: light;
  --fm-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm-font-serif: 'Fraunces', serif;
  --fm-font-wordmark: 'Fraunces', serif;

  --fm-bg: #f7f4ec;
  --fm-surface: #fff;
  --fm-surface-rgb: 255 255 255;
  --fm-surface-tint: #f6f3e9;
  --fm-surface-tint-strong: #f1eee3;
  --fm-divider-tint: #efead9;

  --fm-ink: #202b25;
  --fm-ink-rgb: 32 43 37;
  --fm-ink-secondary: #6c7a70;
  --fm-ink-muted: #8b9186;
  --fm-ink-faint: #b7af9a;

  /* Text and icons on a filled accent, danger or ink button. */
  --fm-on-accent: #fff;

  --fm-shadow-rgb: 32 43 37;

  /* The "new version available" banner (index.css .version-banner). */
  --fm-notice-bg: rgb(255 244 214 / 96%);

  /* MapLibre's control icons are dark SVGs; the dark palette inverts them. */
  --fm-control-icon-filter: none;

  --fm-border: #e6e1d2;
  --fm-border-strong: #dcd6c4;
  --fm-border-panel: #e2dcc8;

  --fm-accent: #b07e2e;
  --fm-accent-rgb: 176 126 46;
  --fm-accent-strong: #93691f;
  --fm-accent-hover: #8a611f;

  --fm-donate: #b0532f;
  --fm-donate-hover: #96431f;
  --fm-donate-text: #fff7ee;

  --fm-danger: #a33;
  --fm-danger-rgb: 170 51 51;
  --fm-danger-hover: #8a2a2a;

  --fm-success: #2f8a4e;
  --fm-success-strong: #2e7d32;

  /* Scales — every spacing, radius, type size, weight and elevation in this file comes from
     these (a few deliberate exceptions stay literal: 1px hairlines, layout dimensions like the
     phone sheet's 76px reserve, and the wordmark/flag/initials, which are sized to their shape).
     Drafted from the values this file used most, so snapping onto them moved nothing by more
     than 2px. */
  --fm-space-2: 2px;
  --fm-space-4: 4px;
  --fm-space-6: 6px;
  --fm-space-8: 8px;
  --fm-space-10: 10px;
  --fm-space-12: 12px;
  --fm-space-16: 16px;
  --fm-space-20: 20px;
  --fm-space-24: 24px;
  --fm-space-32: 32px;

  --fm-radius-xs: 2px; /* chart bars, grid cells, progress bars */
  --fm-radius-sm: 6px; /* menu items, inputs, small buttons, segmented toggles */
  --fm-radius-md: 8px; /* header buttons, menus, map toggles */
  --fm-radius-lg: 12px; /* popovers, panels, dialogs */
  --fm-radius-pill: 999px;

  --fm-text-3xs: 9px; /* chart labels */
  --fm-text-2xs: 10px;
  --fm-text-xs: 11px;
  --fm-text-sm: 12px;
  --fm-text-md: 13px; /* the interface's own text: buttons, menus, panel controls */
  --fm-text-lg: 14px; /* form inputs */
  --fm-text-xl: 16px; /* dialog and panel titles */
  --fm-text-2xl: 20px; /* page titles, stat values */

  --fm-weight-regular: 400;
  --fm-weight-semibold: 600;
  --fm-weight-bold: 700;
  --fm-weight-heavy: 800;

  --fm-shadow-sm: 0 1px 4px rgb(var(--fm-shadow-rgb) / 25%); /* small raised controls */
  --fm-shadow-md: 0 2px 10px rgb(var(--fm-shadow-rgb) / 22%); /* floating toolbars, chips */
  --fm-shadow-lg: 0 12px 32px rgb(var(--fm-shadow-rgb) / 18%); /* dropdowns, popovers */
  --fm-shadow-xl: 0 24px 60px rgb(var(--fm-shadow-rgb) / 25%); /* dialogs */
}

/* The dark palette — colors only; every scale above is shared. It is written twice, once per
   way of asking for it: data-theme="dark" (the account menu's explicit choice) and the OS's
   dark preference when no explicit choice overrides it. Keep the two copies identical.
   "Strong" and "hover" accents go lighter here, not darker: on a dark surface, more emphasis
   means more light. */
:root[data-theme='dark'] {
  color-scheme: dark;

  --fm-bg: #141b17;
  --fm-surface: #1c2520;
  --fm-surface-rgb: 28 37 32;
  --fm-surface-tint: #212b25;
  --fm-surface-tint-strong: #26312a;
  --fm-divider-tint: #2a352e;

  --fm-ink: #ece6d8;
  --fm-ink-rgb: 236 230 216;
  --fm-ink-secondary: #a8b2a9;
  --fm-ink-muted: #8e968c;
  --fm-ink-faint: #646d63;

  --fm-on-accent: #1a1509;

  --fm-shadow-rgb: 0 0 0;

  --fm-notice-bg: rgb(66 52 22 / 96%);

  --fm-control-icon-filter: invert(0.9);

  --fm-border: #2e3932;
  --fm-border-strong: #3a463e;
  --fm-border-panel: #34403a;

  --fm-accent: #d6a553;
  --fm-accent-rgb: 214 165 83;
  --fm-accent-strong: #e4b867;
  --fm-accent-hover: #e9c27a;

  --fm-donate: #b0532f;
  --fm-donate-hover: #c2613a;
  --fm-donate-text: #fff7ee;

  --fm-danger: #e27272;
  --fm-danger-rgb: 226 114 114;
  --fm-danger-hover: #ea8a8a;

  --fm-success: #5fc382;
  --fm-success-strong: #6fcf90;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --fm-bg: #141b17;
    --fm-surface: #1c2520;
    --fm-surface-rgb: 28 37 32;
    --fm-surface-tint: #212b25;
    --fm-surface-tint-strong: #26312a;
    --fm-divider-tint: #2a352e;

    --fm-ink: #ece6d8;
    --fm-ink-rgb: 236 230 216;
    --fm-ink-secondary: #a8b2a9;
    --fm-ink-muted: #8e968c;
    --fm-ink-faint: #646d63;

    --fm-on-accent: #1a1509;

    --fm-shadow-rgb: 0 0 0;

    --fm-notice-bg: rgb(66 52 22 / 96%);

    --fm-control-icon-filter: invert(0.9);

  --fm-control-icon-filter: invert(0.9);

    --fm-border: #2e3932;
    --fm-border-strong: #3a463e;
    --fm-border-panel: #34403a;

    --fm-accent: #d6a553;
    --fm-accent-rgb: 214 165 83;
    --fm-accent-strong: #e4b867;
    --fm-accent-hover: #e9c27a;

    --fm-donate: #b0532f;
    --fm-donate-hover: #c2613a;
    --fm-donate-text: #fff7ee;

    --fm-danger: #e27272;
    --fm-danger-rgb: 226 114 114;
    --fm-danger-hover: #ea8a8a;

    --fm-success: #5fc382;
    --fm-success-strong: #6fcf90;
  }
}

/* Fraunces has no Cyrillic, so a Russian page's headings take Source Serif 4 instead: a whole
   heading in one face, rather than Fraunces for its Latin letters and a fallback for the rest.
   The wordmark is Latin in every language, so it keeps Fraunces through its own token. */
:root:lang(ru) {
  --fm-font-serif: 'Source Serif 4', serif;
}