/*
 * Hluthafinn design tokens: THE one variables file (owner 9.11.2026). Served as /k8/tokens.css; public/k8/blocks.css starts with an
 * identical copy (built by scripts/build-k8-blocks-css.ts), so a page that loads blocks.css needs nothing else.
 * Light values = style sheet A (/root/design/markadir_stilblad_A.md). Dark values below.
 *
 * Dark mechanism (confirmed from the live Ghost theme, 9.11.2026): the "Dökkt" button sets <html data-user-color-scheme="dark|light">
 * and stores it in localStorage "user-color-scheme"; without a choice the theme follows prefers-color-scheme, but only while the
 * <html> element carries .is-darkModeAdminSetting-enabled. Our own pages (markaðir) set <html data-scheme="dark|light"> from the
 * cookie hf_scheme (Domain=.hluthafinn.is, light|dark), falling back to prefers-color-scheme. Both selectors are covered here.
 * [data-hf] marks our own wrappers (they redefine every token locally: Registur's globals.css also defines --bg, --ink, --rule on :root).
 *
 * Contrast (WCAG, text colours; script /root/scratch/design-tokens/contrast.py): dark ink 15.97 on bg / 13.84 on surface; muted 7.40 /
 * 6.41; up #2BB3BC 7.38 / 6.40; down #F07A3A 6.74 / 5.84 (all >= 4.5). --neutral is a non-text colour (bars, grid, fades, inactive tabs).
 * Adding a colour: add a named token here with a light AND a dark value; no other file may contain a raw colour (npm run test:colors).
 */
:root,
[data-hf] {
  --bg: #FFFFFF;
  --surface: #EEF4F9;
  --surface-rule: #D3DFEA;
  --surface-line: #C9D7E5;
  --surface-muted: #5E7489;
  --ink: #111111;
  --muted: #6B6B66;
  --rule: #E2E1DC;
  --neutral: #A3A39E;
  --up: #007D86;
  --upbar: #00868F;
  --down: #C24A0A;
  --downbar: #E0560B;
  --uptint: rgba(0, 134, 143, 0.13);
  --downtint: rgba(224, 86, 11, 0.11);
  --tab-on: #DDEFF7;
  --newtint: #DDEFF7;
  --ai-border: #D6D5CF;
  --on-accent: #FFFFFF;
  --ad-bg: #111111;
  --ad-ink: #FFFFFF;
  --ad-dim: #8A8A84;
  --ad-accent: #1AA89D;
  --ad-line: #444444;
  --ad-edge: #111111;
  --ad-slot-bg: #EEF4F9;
  --ad-card-bg: #FFFFFF;
  --ad-card-ink: #111111;
  --ad-card-muted: #6B6B66;
  /* Cards WE compose follow the theme (owner 10.11.2026): the ISNIC card has no white box in dark (transparent, ink/muted text); only image ads
     supplied by an advertiser keep their own light design. The Registur band: blue surface in light, the PAGE background in dark with the same
     3px rules (the bottom rule exists in dark only, --band-edge 0 in light) and rule-coloured inner lines. */
  --band-bg: #EEF4F9;
  --band-line: #C9D7E5;
  --band-rule: #D3DFEA;
  --band-sub: #5E7489;
  --band-edge: 0;
  /* Geist everywhere (owner 9.11.2026; weights 300-800 loaded from Google Fonts by the page or the Ghost header block's FAMILIES link). */
  --font-head: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  /* Hluthafinn's own articles (owner 10.11.2026): Merriweather 400, 700 and italic 400 from Google Fonts (markaðir: lib/markadir/GeistFonts.tsx; Ghost: the
     header block's FAMILIES, "Merriweather:ital,wght@0,400;0,700;1,400"). Used for post titles and standfirsts on the front-page tiles. Data, navigation
     and interface stay on --font-head / --font-body (Geist). */
  --font-head-article: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body-article: 'Merriweather', Georgia, 'Times New Roman', serif;
}

:root[data-user-color-scheme="dark"],
:root[data-scheme="dark"],
:root[data-user-color-scheme="dark"] [data-hf],
:root[data-scheme="dark"] [data-hf] {
  --bg: #121212;
  --surface: #1A2129;
  --surface-rule: #2A3440;
  --surface-line: #33404D;
  --surface-muted: #9FB2C4;
  --ink: #EDEDEA;
  --muted: #A3A39E;
  --rule: #2E2E2B;
  --neutral: #6B6B66;
  --up: #2BB3BC;
  --upbar: #2BB3BC;
  --down: #F07A3A;
  --downbar: #F07A3A;
  --uptint: rgba(43, 179, 188, 0.18);
  --downtint: rgba(240, 122, 58, 0.18);
  --tab-on: #22313D;
  --newtint: #22313D;
  --ai-border: #3A3A36;
  --on-accent: #FFFFFF;
  --ad-bg: #111111;
  --ad-ink: #FFFFFF;
  --ad-dim: #8A8A84;
  --ad-accent: #1AA89D;
  --ad-line: #444444;
  --ad-edge: #3A3A36;
  --ad-slot-bg: #EEF4F9;
  --ad-card-bg: transparent;
  --ad-card-ink: #EDEDEA;
  --ad-card-muted: #A3A39E;
  --band-bg: #121212;
  --band-line: #2E2E2B;
  --band-rule: #2E2E2B;
  --band-sub: #A3A39E;
  --band-edge: 3px;
}

@media (prefers-color-scheme: dark) {
:root.is-darkModeAdminSetting-enabled:not([data-user-color-scheme]):not([data-scheme]),
:root:not(.is-darkModeAdminSetting-enabled):not([data-user-color-scheme]):not([data-scheme]),
:root:not([data-user-color-scheme]):not([data-scheme]) [data-hf] {
  --bg: #121212;
  --surface: #1A2129;
  --surface-rule: #2A3440;
  --surface-line: #33404D;
  --surface-muted: #9FB2C4;
  --ink: #EDEDEA;
  --muted: #A3A39E;
  --rule: #2E2E2B;
  --neutral: #6B6B66;
  --up: #2BB3BC;
  --upbar: #2BB3BC;
  --down: #F07A3A;
  --downbar: #F07A3A;
  --uptint: rgba(43, 179, 188, 0.18);
  --downtint: rgba(240, 122, 58, 0.18);
  --tab-on: #22313D;
  --newtint: #22313D;
  --ai-border: #3A3A36;
  --on-accent: #FFFFFF;
  --ad-bg: #111111;
  --ad-ink: #FFFFFF;
  --ad-dim: #8A8A84;
  --ad-accent: #1AA89D;
  --ad-line: #444444;
  --ad-edge: #3A3A36;
  --ad-slot-bg: #EEF4F9;
  --ad-card-bg: transparent;
  --ad-card-ink: #EDEDEA;
  --ad-card-muted: #A3A39E;
  --band-bg: #121212;
  --band-line: #2E2E2B;
  --band-rule: #2E2E2B;
  --band-sub: #A3A39E;
  --band-edge: 3px;
}
}