/*
 * VærgeGuiden — Design tokens ("Digital Tryghed")
 * Disse tokens er den ENESTE kilde til farver, typografi og spacing.
 * Komponenter må aldrig hardcode hex eller font-navne — de skal altid
 * referere variabler herfra.
 */

:root {
  /* === Farver — primary palette === */
  --vg-color-primary:        #1F3A2E;   /* skovgrøn - autoritet, ro */
  --vg-color-primary-hover:  #2A4D3E;
  --vg-color-primary-soft:   #3D6650;   /* dæmpet variant til subtitler */
  --vg-color-primary-pale:   #DDE7DE;   /* lys salviegrøn - til "rolige" notitser */

  /* === Farver — baggrund og overflader === */
  --vg-color-bg:             #FAF8F5;   /* varm offwhite - aldrig rent hvid */
  --vg-color-surface:        #EFE9DC;   /* blød beige - cards, citater */
  --vg-color-surface-strong: #E4DCC8;   /* lidt dybere beige til hover */

  /* === Farver — tekst === */
  --vg-color-text:           #2D2A26;   /* mørk varm grå - brødtekst */
  --vg-color-text-muted:     #6B6258;   /* metadata, captions */
  --vg-color-text-on-dark:   #F5F1E8;   /* tekst på primary baggrund */

  /* === Farver — accent (sjælden brug) === */
  --vg-color-accent:         #B8593A;   /* brændt terracotta - CTAs */
  --vg-color-accent-hover:   #9E4830;

  /* === Farver — strukturelle === */
  --vg-color-border:         #D9D2C0;   /* tabeller, kortrammer */
  --vg-color-border-strong:  #B8AE94;
  --vg-color-focus:          #B8593A;   /* fokus-ring */

  /* === Typografi === */
  --vg-font-serif:           'Lora', Georgia, 'Times New Roman', serif;
  --vg-font-sans:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vg-font-mono:            ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Skala (bevidst stor brødtekst — målgruppen er ældre) */
  --vg-fs-h1:                2.5rem;     /* 40px */
  --vg-fs-h2:                1.875rem;   /* 30px */
  --vg-fs-h3:                1.375rem;   /* 22px */
  --vg-fs-h4:                1.125rem;   /* 18px */
  --vg-fs-body:              1.125rem;   /* 18px - bevidst */
  --vg-fs-large:             1.25rem;    /* 20px - lead-paragraf */
  --vg-fs-small:             0.9375rem;  /* 15px - aldrig under */

  --vg-lh-tight:             1.2;
  --vg-lh-normal:            1.5;
  --vg-lh-relaxed:           1.65;       /* brødtekst - god luftighed */

  /* === Spacing-skala === */
  --vg-space-xs:             0.25rem;    /* 4px */
  --vg-space-sm:             0.5rem;     /* 8px */
  --vg-space-md:             1rem;       /* 16px */
  --vg-space-lg:             1.5rem;     /* 24px */
  --vg-space-xl:             2rem;       /* 32px */
  --vg-space-2xl:            3rem;       /* 48px */
  --vg-space-3xl:            4rem;       /* 64px */
  --vg-space-4xl:            6rem;       /* 96px */

  /* === Radii === */
  --vg-radius-sm:            4px;
  --vg-radius-md:            8px;
  --vg-radius-lg:            16px;

  /* === Shadows (varme, dæmpede) === */
  --vg-shadow-sm:            0 1px 2px rgba(45, 42, 38, 0.06);
  --vg-shadow-md:            0 4px 12px rgba(45, 42, 38, 0.08);
  --vg-shadow-lg:            0 12px 32px rgba(45, 42, 38, 0.12);

  /* === Transitions === */
  --vg-transition-fast:      150ms ease-out;
  --vg-transition-base:      250ms ease-out;

  /* === Layout === */
  --vg-prose-width:          720px;      /* tekstindhold max-bredde */
  --vg-site-width:           1200px;
  --vg-header-height:        72px;
}

/* Respekter brugerens reduce-motion-præference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vg-transition-fast: 0ms;
    --vg-transition-base: 0ms;
  }
}