/* ============================================================
   LAWO – Designtokens
   Sentrale CSS-variabler for farge, font, spacing, radius og
   knappestiler. ALL annen CSS skal bruke disse variablene, slik
   at én endring her slår gjennom over hele siden.
   ============================================================ */

:root {
  /* ---------- Farge (LAWO-palett, utgangspunkt) ---------- */
  --color-ink:        #1a1a1a;   /* hovedtekst / nær-svart */
  --color-ink-soft:   #555555;   /* dempet tekst, metadata */
  --color-paper:      #ffffff;   /* bakgrunn / "papir" */
  --color-paper-warm: #f6f3ee;   /* varm seksjonsbakgrunn */
  --color-line:       #e3ded6;   /* hårfine streker / kanter */

  --color-accent:       #8a1c2b;  /* LAWO-aksent, dyp rød */
  --color-accent-hover: #6f1623;  /* aksent ved hover */
  --color-on-accent:    #ffffff;  /* tekst oppå aksentfarge */
  --color-success:       #1f6f43;  /* bekreftende handling (.btn--success) + lwx «utgitt»-pill, mørk grønn (egen token) */
  --color-success-hover: #185737;  /* grønn ved hover */
  --color-danger:        #b00020;  /* destruktiv handling (.btn--danger, .foto-admin__knapp--fare/--slett): RØD FLATE, alltid; også rød varseltekst */
  --color-danger-hover:  #8c0019;  /* destruktiv ved hover */

  /* ---------- Typografi ---------- */
  /* Seriff-display til overskrifter, ren sans-serif til brødtekst.
     Fraunces matcher artister.lawo.no; bytt fritt her senere. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  --fs-300: 0.875rem;   /* 14px – small/metadata */
  --fs-400: 1rem;       /* 16px – brødtekst */
  --fs-500: 1.25rem;    /* 20px */
  --fs-600: 1.563rem;   /* 25px */
  --fs-700: 1.953rem;   /* 31px */
  --fs-800: 2.441rem;   /* 39px */
  --fs-900: 3.052rem;   /* 49px – hero/display */

  --lh-tight: 1.15;
  --lh-base:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---------- Spacing (4px-skala) ---------- */
  --space-1:  0.25rem;  /* 4px  */
  --space-2:  0.5rem;   /* 8px  */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */

  /* ---------- Layout ---------- */
  --container-max:   1200px;
  --container-text:  68ch;    /* lesbar tekstkolonne */
  --container-pad:   var(--space-5);

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Skygger ---------- */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.10);

  /* ---------- Knapper ---------- */
  --btn-padding-y:   var(--space-3);
  --btn-padding-x:   var(--space-5);
  --btn-radius:      var(--radius-pill);
  --btn-font:        var(--font-body);
  --btn-font-weight: var(--fw-medium);
  --btn-font-size:   var(--fs-400);

  /* Primærknapp (NIVÅ 1 — dempet FYLT flate; fargedisiplin: aldri aksent-/state-fyll på handling).
     Varm lysgrå — bevisst ett hakk mørkere enn paper-warm-seksjoner (#f6f3ee) så fyllet skiller
     N1 fra den transparente N2 også OPPÅ en varm seksjon. */
  --btn-primary-bg:       #e8e2d5;
  --btn-primary-bg-hover: #ddd5c5;
  --btn-primary-fg:       var(--color-ink);
  --btn-primary-border:   var(--color-line);

  /* Sekundærknapp (kant) */
  --btn-ghost-bg:       transparent;
  --btn-ghost-bg-hover: var(--color-paper-warm);
  --btn-ghost-fg:       var(--color-ink);
  --btn-ghost-border:   var(--color-line);

  /* ---------- Transition ---------- */
  --transition-fast: 0.15s ease;
}