/* ============================================================
   Designtokens — Familie-app
   Sannhetskilde for alle --fam-*-verdier. Eid av design-modulen
   (docs/modules/design.md).

   VIKTIG:
   - Lastes via egen <link> i index.html FØR app.css (cascade —
     ellers er var()-ene udefinerte når app.css leses).
   - Endring her = global blast radius (treffer alle views). Krever
     visuell regresjon på alle views + SW CACHE_VERSION-bump (BF-016).
   - Aldri dupliser disse verdiene i prosa-spec; prosa henviser hit.
   ============================================================ */

:root {
  /* Farger §3 */
  --fam-bg: #FFFFFF;
  --fam-surface: #F7F7F8;
  --fam-fg: #111418;
  --fam-muted: #5B616B;
  --fam-border: #E4E6EA;
  --fam-accent: #2563EB;
  --fam-accent-weak: #EFF4FF;
  --fam-accent-strong: #1D4ED8;   /* accent hover/pressed */
  --fam-success: #0F8B4F;
  --fam-danger: #B42318;
  --fam-danger-weak: #FEF3F2;     /* lys danger-bakgrunn */
  --fam-completed: #9098A1;
  --fam-surface-inverse: #1F2329; /* mørk flate (toast) */
  --fam-on-color: #FFFFFF;        /* tekst/ikon på farget flate */

  /* Overlays / scrim */
  --fam-scrim: rgba(17, 20, 24, 0.45);
  --fam-overlay-hover: rgba(0, 0, 0, 0.05);
  --fam-overlay-hover-inverse: rgba(255, 255, 255, 0.08);
  --fam-overlay-tint-inverse: rgba(255, 255, 255, 0.12);

  /* Familiemedlems-farger (alle WCAG AA mot hvit tekst) */
  --fam-user-1: #4F46E5; /* Bo — indigo */
  --fam-user-2: #DB2777; /* Fride — korall */
  --fam-user-3: #0F8B4F; /* June — ravgrønn */
  --fam-user-4: #B45309; /* Kristin — oker */
  --fam-user-5: #0E7490; /* Martin — teal */

  /* Liste-farger (5 valg, brukes i lister-velger og admin) */
  --fam-list-1: #2563EB;
  --fam-list-2: #DB2777;
  --fam-list-3: #0F8B4F;
  --fam-list-4: #B45309;
  --fam-list-5: #6D28D9;

  /* Typografi §2 */
  --fam-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fam-fs-h1: 1.25rem;       /* 20px */
  --fam-fs-h2: 1.0625rem;     /* 17px */
  --fam-fs-body: 1rem;        /* 16px */
  --fam-fs-caption: 0.8125rem;/* 13px */
  --fam-fs-button: 1rem;      /* 16px */

  /* Avstand §4 */
  --fam-space-1: 4px;
  --fam-space-2: 8px;
  --fam-space-3: 12px;
  --fam-space-4: 16px;
  --fam-space-5: 24px;
  --fam-space-6: 32px;
  --fam-space-7: 48px;

  /* Radii */
  --fam-radius-sm: 6px;
  --fam-radius-md: 10px;
  --fam-radius-lg: 14px;
  --fam-radius-pill: 999px;

  /* Animasjon §6 */
  --fam-dur: 200ms;
  --fam-ease: cubic-bezier(0.2, 0, 0, 1);
}