/*
 * Design tokens shared by the public outputs, the app and the marketing site (docs/08 §1, §6.2).
 * Values follow the design mockup "Landingsside F-farver + E-former": warm paper, deep ink,
 * four shape colours, Unbounded headings, Atkinson Hyperlegible text, pill buttons.
 * Kommune branding overrides --brand* from /branding.css (FR-52).
 *
 * Contrast: --ink on --paper 15.0:1 and on --surface 16.9:1; --muted on --paper 9.3:1;
 * --subtle on --surface 7.5:1; --cta with white text 5.3:1; --cta-dark on --paper 5.4:1;
 * --success/--warning/--danger on their -bg 5.3:1 / 6.7:1 / 6.3:1; --line 5.1:1. Shape colours
 * (--red, --yellow, --teal) are decoration; text on them is large and bold (3:1 minimum).
 */
:root {
  --paper: #fbefe8;
  --surface: #ffffff;
  --surface-alt: #f6ece6;
  --ink: #22163a;
  --muted: #46395a;
  --subtle: #5b4f6e;
  --line: #6b6378;
  --hairline: #e3c9bb;
  --ink-hairline: #45375f;
  --ink-muted: #e5ddf0;
  --code: #fff4e6;

  --red: #e4472e;
  --yellow: #ffc845;
  --teal: #1e9a8e;

  --cta: #c8361f;
  --cta-dark: #b8321c;
  --brand: var(--cta);
  --brand-ink: #ffffff;
  --brand-dark: var(--cta-dark);
  --focus: #22163a;

  --success: #1e6f66;
  --success-bg: #e6f4f2;
  --warning: #7a4d00;
  --warning-bg: #fff4dc;
  --danger: #a32a17;
  --danger-bg: #fdecea;

  --font: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-s: 0.875rem;
  --text-m: 1.0625rem;
  --text-l: 1.375rem;
  --text-xl: clamp(1.75rem, 3vw, 2.5rem);
  --leading: 1.55;
  --display-tracking: -0.05em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-s: 12px;
  --radius: 12px;
  --radius-m: 18px;
  --radius-l: 22px;
  --pill: 999px;
  --shadow-card: 0 18px 40px rgb(34 22 58 / 12%);

  /* WCAG 2.5.8: 44 px on public outputs (NFR-8); the app lowers this to 32 px. */
  --target: 44px;
  /* Height of a sticky action bar; scroll-padding keeps focus visible above it (2.4.11). */
  --sticky-bar: 0px;
}