/* gulspejder_test: kopieret uændret fra De Gule Spejderes designsystem (project/tokens.css, genereret fra tokens.json).
   Kun @font-face-reglerne er flyttet til base.css (med font-stretch-intervallet fra bundle.css). Ret ikke værdier her — ret tokens.json og regenerér. */
/* De Gule Spejdere Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --red-50: #fdf1f0;
  --red-100: #fbdcda;
  --red-200: #f5b2ae;
  --red-300: #ec7d77;
  --red-400: #df4440;
  --red-500: #d41316;
  --red-600: #b80f12;
  --red-700: #960c0f;
  --red-800: #70090b;
  --red-900: #4a0607;
  --yellow-100: #fff4cc;
  --yellow-300: #ffd966;
  --yellow-500: #f5b700;
  --yellow-700: #b88600;
  --forest-100: #e3ece5;
  --forest-300: #9db8a4;
  --forest-500: #3f6b4e;
  --forest-700: #24402e;
  --forest-900: #14261b;
  --paper-0: #ffffff;
  --paper-50: #fbf8f3;
  --paper-100: #f4efe6;
  --paper-200: #e8e0d2;
  --paper-300: #d3c8b5;
  --ink-400: #8a8378;
  --ink-500: #6b655c;
  --ink-600: #4d4842;
  --ink-800: #26231f;
  --ink-900: #16140f;
  --branch-baever: #b8742b;
  --branch-ulve: #5f6b78;
  --branch-stifinder: #2f7a55;
  --branch-spejder: #d41316;
  --branch-pioner: #1f5a8a;
  --branch-rover: #5b3f7a;
  --success-500: #2f7a55;
  --success-100: #e1f0e8;
  --warning-500: #b88600;
  --warning-100: #fff4cc;
  --danger-500: #b3261e;
  --danger-100: #fbe3e1;
  --info-500: #1f5a8a;
  --info-100: #e1ecf5;
  --brand: var(--red-500);
  --brand-hover: var(--red-600);
  --brand-press: var(--red-700);
  --brand-tint: var(--red-50);
  --on-brand: #ffffff;
  --accent: var(--yellow-500);
  --on-accent: var(--ink-900);
  --surface-page: var(--paper-50);
  --surface-card: var(--paper-0);
  --surface-sunken: var(--paper-100);
  --surface-inverse: var(--forest-900);
  --surface-brand: var(--red-500);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-400);
  --text-inverse: #ffffff;
  --text-link: var(--red-600);
  --text-link-hover: var(--red-800);
  --border-subtle: var(--paper-200);
  --border-default: var(--paper-300);
  --border-strong: var(--ink-800);
  --focus-ring: var(--yellow-500);
  --scrim: rgba(20,38,27,.55);
  --shadow-1: 0 1px 2px rgba(22,20,15,.06), 0 1px 1px rgba(22,20,15,.04);
  --shadow-2: 0 4px 14px rgba(22,20,15,.08), 0 1px 3px rgba(22,20,15,.06);
  --shadow-3: 0 18px 40px rgba(22,20,15,.16), 0 4px 10px rgba(22,20,15,.08);
  --shadow-sheet: 0 -12px 40px rgba(22,20,15,.18);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-w: 1.5px;
  --border-w-strong: 2px;
  --gutter-mobile: 20px;
  --gutter-desktop: 40px;
  --content-max: 1200px;
  --text-max: 680px;
  --tap-min: 48px;
  --header-h: 64px;
  --header-h-desktop: 80px;
  --bottomnav-h: 68px;
  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
}
.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.95; font-weight: 850; letter-spacing: -0.01em; }
.display-l { font-family: var(--font-display); font-size: 64px; line-height: 0.95; font-weight: 850; letter-spacing: -0.01em; }
.h1 { font-family: var(--font-display); font-size: 48px; line-height: 1.08; font-weight: 850; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 36px; line-height: 1.08; font-weight: 850; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.08; font-weight: 850; letter-spacing: -0.01em; }
.h4 { font-family: var(--font-display); font-size: 18px; line-height: 1.08; font-weight: 850; letter-spacing: -0.01em; }
.lead { font-family: var(--font-body); font-size: 19px; line-height: 1.5; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 17px; line-height: 1.55; font-weight: 400; }
.small { font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; }
.ui { font-family: var(--font-body); font-size: 16px; line-height: 1.25; font-weight: 600; }
.caption { font-family: var(--font-body); font-size: 13px; line-height: 1.25; font-weight: 600; }
.overline { font-family: var(--font-body); font-size: 12px; line-height: 1.25; font-weight: 700; letter-spacing: 0.12em; }