/**
 * TRoA Portal — design tokens (single source of truth).
 * Portal-styles og design-preview skal kun referere til disse variabler.
 * Kontrastforhold for centrale par: se contrast.md (opdater ved token-ændring).
 * Slutlig UI med opacity, billeder m.m. skal altid efterprøves.
 */

:root {
  /* ----- Farver: brand ----- */
  --color-brand-primary: #355538;
  --color-brand-primary-dark: #253c27;

  /* ----- Farver: flader ----- */
  --color-surface-page: #f9fafb;
  --color-surface-card: #ffffff;
  --color-surface-subtle: #e8eee9;

  /* ----- Farver: tekst ----- */
  --color-text-primary: #1b2013;
  --color-text-secondary: #3d4a40;
  --color-text-on-primary: #f9fafb;

  /* ----- Farver: accent, grænser, feedback ----- */
  /* Tekstlinks og sekundære tekst-CTA’er — afstemt mod brand-grøn (undgår “browser-blå”) */
  --color-accent: #2d6a42;
  --color-accent-hover: #245536;
  --color-accent-on-brand: #e7f3c3;

  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);
  /* Besøgte links: stadig grønlig, tydeligt adskilt fra lilla browser-standard */
  --color-link-visited: #3d5f4a;

  /* Varm sekundær accent (komplementær til grøn) — badges, “nyt”, events, valgfri CTAs */
  --color-accent-warm: #b45309;
  --color-accent-warm-hover: #92400e;
  --color-accent-warm-subtle: #fff7ed;
  --color-accent-warm-text: #7c2d12;

  --color-border: #c5d0b3;
  --color-border-strong: #a3b587;
  --color-danger: #c41e1e;
  --color-danger-bg: #fef2f2;
  --color-danger-border: #f5c6c6;

  /* ----- Fokus (synligt, ikke kun farve) ----- */
  --color-focus-outline: #355538;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;

  /* ----- Typografi: familier ----- */
  --font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", "Roboto Mono", monospace;

  /* ----- Typografi: størrelser (fluid hvor det giver mening) ----- */
  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.125rem;
  --font-size-h3: clamp(1.125rem, 1rem + 0.5vw, 1.35rem);
  --font-size-h2: clamp(1.35rem, 1.15rem + 1vw, 1.65rem);
  --font-size-h1: clamp(1.65rem, 1.35rem + 1.25vw, 2.1rem);
  --font-size-display: clamp(2rem, 1.5rem + 2vw, 2.5rem);

  --line-height-body: 1.55;
  --line-height-heading: 1.2;
  --line-height-tight: 1.35;

  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-heading: 600;

  /* ----- Layout-hjælp (kan bruges i portal og preview) ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.08);
  --content-max-width: 40rem;
}