/*
 * mit-frie design tokens
 *
 * Alle tokens har --frie-*-prefiks. Modul-CSS bruger ALTID var(--frie-*, fallback)
 * for at undgå editor-iframe-friktion hvis tokens.css indlæses i forkert rækkefølge.
 */

:root {
  /* ─── Farver — brand ─────────────────────────────────────────── */
  --frie-blue: #0A5C7B;          /* Primær mørk blå — hero, accent-fyld */
  --frie-blue-light: #4BB8C9;    /* Primær lys blå — hover-state, sekundær accent */
  --frie-orange: #F39200;        /* Sekundær orange — CTA-knapper, highlights */
  --frie-pink: #EB5A7E;          /* Sekundær lyserød — unread-indikator */

  /* ─── Farver — tekst & overflader ────────────────────────────── */
  --frie-ink: #003F55;           /* Primær tekstfarve (heading + body) */
  --frie-ink-soft: rgba(0, 63, 85, 0.7);   /* Sekundær tekst */
  --frie-ink-mute: rgba(0, 63, 85, 0.5);   /* Metadata, timestamps */
  --frie-paper: #FFFFFF;         /* Card-baggrund */
  --frie-paper-warm: #F2F7F8;    /* Body-baggrund (Primær mørk 10%) */
  --frie-grey: #F0F0F0;          /* Disabled-state, subtle background */
  --frie-line: #D4D4D4;          /* Border, divider */
  --frie-line-soft: rgba(0, 63, 85, 0.10); /* Subtle indre border */

  /* ─── Spacing-skala ──────────────────────────────────────────── */
  --frie-space-1: 4px;
  --frie-space-2: 8px;
  --frie-space-3: 12px;
  --frie-space-4: 16px;
  --frie-space-5: 24px;
  --frie-space-6: 32px;
  --frie-space-7: 48px;
  --frie-space-8: 64px;
  --frie-space-9: 96px;

  /* ─── Border-radius ──────────────────────────────────────────── */
  --frie-radius-sm: 15px;        /* sub-kort, indre felt */
  --frie-radius-md: 20px;        /* primær kort-radius */
  --frie-radius-lg: 28px;        /* page-frame */
  --frie-radius-pill: 50px;      /* knapper, badges */
  --frie-radius-circle: 50%;     /* avatars, ikon-cirkler */

  /* ─── Typografi ──────────────────────────────────────────────── */
  --frie-heading: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --frie-body: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --frie-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* Font-vægte */
  --frie-weight-regular: 400;
  --frie-weight-semibold: 600;
  --frie-weight-bold: 700;

  /* Body-baseline */
  --frie-fontsize-body: 16px;
  --frie-fontsize-small: 14px;
  --frie-fontsize-meta: 12px;
  --frie-lineheight-body: 1.5;
  --frie-lineheight-tight: 1.2;

  /* ─── Layout ─────────────────────────────────────────────────── */
  --frie-container-max: 1440px;
  --frie-container-gutter: 24px;
  --frie-header-height: 80px;
  --frie-header-mobile-height: 64px;

  /* Breakpoint-værdier (til brug i calc() — selve @media-queries skrives manuelt) */
  --frie-bp-mobile: 960px;
  --frie-bp-tablet: 1100px;

  /* ─── Shadows ────────────────────────────────────────────────── */
  --frie-shadow-card: 0 1px 2px rgba(0, 63, 85, 0.04), 0 10px 30px -12px rgba(0, 63, 85, 0.15);
  --frie-shadow-lift: 0 1px 2px rgba(0, 63, 85, 0.05), 0 24px 60px -20px rgba(0, 63, 85, 0.22);
  --frie-shadow-header: 0 2px 8px rgba(0, 63, 85, 0.08);

  /* ─── Z-index hierarki ───────────────────────────────────────── */
  --frie-z-skip-link: 9999;      /* A11y skip-to-content */
  --frie-z-header: 50;           /* Fixed header */
  --frie-z-drawer: 48;           /* Mobile drawer */
  --frie-z-overlay: 45;          /* Search/menu-overlay */
  --frie-z-dim: 40;              /* Backdrop dim */
  --frie-z-card-hover: 2;        /* Card elevation */
  --frie-z-card: 1;              /* Card base */
}