/*
 * Designtokens for Norges Ukraina-støttedashboard.
 *
 * Forankret i M6.3-designdokumentene under docs/m6.3/:
 * - Farger: 01-principles.md § 1.3 og 03-components-and-charts.md § 3.4
 * - Typografi: 01-principles.md § 1.3 (skriftskala 1,25)
 * - Layout: 02-information-architecture.md § 2.5 og § 2.6
 * - Tilstandsfarger: 01-principles.md § 1.5
 *
 * Denne fila er én sannhet for alle visuelle valg. styles.css og
 * dashboard.js skal alltid lese herfra (via var() eller getComputedStyle).
 *
 * Importeres først i index.html slik at variablene er tilgjengelige
 * for resten av stilfilene og JavaScript.
 */

:root {
  /* === Farger - blå palett (primær) ============================= */
  --blue-900: #0b2545;
  --blue-700: #13315c;
  --blue-500: #1d3557;  /* Primær aksent: Norge i grafer, knapper */
  --blue-300: #5d8aaa;  /* Sammenligningsland i grafer (WCAG 1.4.11: 3,70:1 mot hvit) */
  --blue-50:  #eef2f7;  /* Norge-bakgrunn i tabell og rangering */

  /* === Farger - nøytrale ======================================== */
  --neutral-900: #1a1a1a;  /* Forgrunn på lys bakgrunn */
  --neutral-600: #555555;  /* Etiketter, metode-notat */
  --neutral-200: #e0e0e0;  /* Linjer, kortkanter, gridlinjer */
  --neutral-50:  #f8f9fa;  /* Lys side- og kort-bakgrunn */

  /* === Farger - semantiske (status) ============================ */
  --positive: #2e7d32;     /* Økning siden forrige release */
  --negative: #c62828;     /* Minskning siden forrige release */
  --warning:  #ef6c00;     /* Datakvalitetsadvarsler */

  /* === Farger - kategorier (sekvensiell, ColorBrewer "Blues") ==
     Brukes i stablet horisontal stolpe for fordeling
     militær/finansiell/humanitær (jf. 03-3.4.2).
  */
  --kategori-militaer:    #08306b;  /* WCAG: 12,76:1 mot hvit */
  --kategori-finansiell:  #2171b5;  /* WCAG: 5,13:1 mot hvit */
  --kategori-humanitaer:  #4292c6;  /* WCAG: 3,41:1 mot hvit. Segmenter trenger 1 px --blue-900-ramme i Plotly for inter-segment definisjon. */

  /* === Farger - aliaser brukt av komponenter ==================== */
  --bg:           var(--neutral-50);
  --fg:           var(--neutral-900);
  --muted:        var(--neutral-600);
  --accent:       var(--blue-500);
  --card-bg:      #ffffff;
  --border:       var(--neutral-200);
  --focus-ring:   var(--blue-500);

  /* === Typografi - font-stakk =================================== */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* === Typografi - skriftskala (1,25 = major third) ============= */
  --fs-hero:    3rem;       /* Norges hovednøkkeltall */
  --fs-h1:      1.75rem;
  --fs-h2:      1.375rem;
  --fs-h3:      1.125rem;
  --fs-body-lg: 1.0625rem;  /* Endringstekst */
  --fs-body:    1rem;
  --fs-caption: 0.875rem;   /* Etiketter, metode-merknad */
  --fs-micro:   0.8125rem;  /* Kildehenvisning */

  /* === Typografi - vekter ====================================== */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* === Typografi - linjehøyde =================================== */
  --lh-hero:    1.1;
  --lh-heading: 1.2;
  --lh-body:    1.5;

  /* === Layout - container ====================================== */
  --container-max:         1200px;
  --container-pad-mobile:  1rem;
  --container-pad-tablet:  1.5rem;
  --container-pad-desktop: 2rem;

  /* === Layout - grid ============================================ */
  --gutter:      1.5rem;
  --section-gap: 3rem;

  /* === Layout - radius ========================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* === Layout - skygge (bare ved behov) ========================= */
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 2px 8px rgba(11, 37, 69, 0.08);

  /* === Breakpoints (kun referanse - mediaqueries bruker tall) === */
  /* Tablet:  ≥ 768px
     Desktop: ≥ 1100px */

  /* === Z-index ================================================== */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-toast:   2000;
}

/*
 * Redusert bevegelse - WCAG 2.3.3 og 01-1.5.
 * Alle animasjoner og transisjoner deaktiveres når brukeren har
 * satt prefers-reduced-motion: reduce i operativsystemet.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}