/* ============================================================================
   tokens.css — designtokens for appen.

   ALT av farge, radius, skrift og flate styres herfra. Komponentene i
   komponenter.css bruker KUN disse variablene, så én endring her slår gjennom i
   hele appen. Dette er «det ferdige, ryddige komponentbiblioteket» — nøytralt, så
   du legger din egen merkevare på det uten å røre komponentkoden.

   ┌────────────────────────────────────────────────────────────────────────┐
   │  ░░  BYTT DISSE for å gjøre appen til din  ░░                           │
   │  Endre --brand (primærfargen), --radius-base (hvor runde hjørner) og     │
   │  --font-sans. Resten er et nøytralt, tilgjengelig utgangspunkt.          │
   └────────────────────────────────────────────────────────────────────────┘
   ============================================================================ */

:root {
  /* ── Merkevare: det du mest sannsynlig vil endre ────────────────────────── */
  --brand: #2563eb;            /* primærfarge: knapper, lenker, fokusring */
  --brand-hover: #1d4ed8;
  --brand-contrast: #ffffff;   /* tekst oppå --brand */
  --radius-base: 10px;         /* grunnradius; skalaen under avledes av denne */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* ── Nøytral palett — LYST tema (default) ───────────────────────────────── */
  --bg: #f6f7f9;               /* sidebakgrunn */
  --surface: #ffffff;          /* kort, paneler, skjemafelt */
  --surface-2: #eef0f3;        /* hevet flate / hover */
  --border: #e3e6ea;
  --border-strong: #cbd1d9;
  --text: #1b1f27;             /* hovedtekst */
  --text-muted: #525a66;       /* dempet tekst, fortsatt WCAG AA */
  --text-subtle: #6b7380;      /* metalinjer/hint, AA mot --surface */

  /* ── Status ─────────────────────────────────────────────────────────────── */
  --success: #15803d;  --success-bg: #e8f6ec;
  --warning: #b45309;  --warning-bg: #fdf3e3;
  --danger:  #b91c1c;  --danger-bg:  #fdecec;
  --info:    #1d4ed8;  --info-bg:    #e9effd;

  /* ── Radius (avledet av --radius-base) ──────────────────────────────────── */
  --radius-sm: calc(var(--radius-base) - 4px);
  --radius-md: var(--radius-base);
  --radius-lg: calc(var(--radius-base) + 6px);
  --radius-pill: 999px;

  /* ── Skygge ─────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.12);

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

  --maxwidth: 1080px;
}

/* ── MØRKT tema ──────────────────────────────────────────────────────────────
   Standard: følg systemet. Et eksplisitt valg på <html data-theme="…"> vinner —
   data-theme="light" tvinger lyst i et mørkt system, data-theme="dark" omvendt.
   ⚠️ De to blokkene under har SAMME verdier med vilje (én for systemvalg, én for
   eksplisitt valg). Endrer du mørk-paletten, endre begge. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --surface: #171a21;
    --surface-2: #212631;
    --border: #2a303b;
    --border-strong: #3a4250;
    --text: #e7ebf1;
    --text-muted: #aab3c0;
    --text-subtle: #8b94a3;
    --brand: #6a94ff;
    --brand-hover: #87a9ff;
    --brand-contrast: #0f1115;
    --success: #4ade80;  --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #fbbf24;  --warning-bg: rgba(245, 158, 11, 0.15);
    --danger:  #f87171;  --danger-bg:  rgba(239, 68, 68, 0.15);
    --info:    #93b4ff;  --info-bg:    rgba(59, 130, 246, 0.15);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #171a21;
  --surface-2: #212631;
  --border: #2a303b;
  --border-strong: #3a4250;
  --text: #e7ebf1;
  --text-muted: #aab3c0;
  --text-subtle: #8b94a3;
  --brand: #6a94ff;
  --brand-hover: #87a9ff;
  --brand-contrast: #0f1115;
  --success: #4ade80;  --success-bg: rgba(34, 197, 94, 0.15);
  --warning: #fbbf24;  --warning-bg: rgba(245, 158, 11, 0.15);
  --danger:  #f87171;  --danger-bg:  rgba(239, 68, 68, 0.15);
  --info:    #93b4ff;  --info-bg:    rgba(59, 130, 246, 0.15);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5);
}