/* ============================================================
   FLOSSHATT — Typography
   ============================================================
   xs / sm / md : faste verdier (UI-labels og brødtekst)
   lg → 6xl    : fluid via clamp() — skalerer jevnt
                 mellom 480px (sm) og 1280px (xl)
   ============================================================ */

:root {
  --font-family-base:    system-ui, -apple-system, sans-serif;
  --font-family-heading: system-ui, -apple-system, sans-serif;

  /* ── Faste størrelser ─────────────────────────────────── */
  --font-size-xs:  0.75rem;  /* 12px */
  --font-size-sm:  0.875rem; /* 14px */
  --font-size-md:  1rem;     /* 16px */

  /* ── Fluid størrelser (480px → 1280px) ────────────────── */
  --font-size-lg:  clamp(1.125rem, calc(1.05rem  + 0.25vw), 1.25rem);  /* 18px → 20px */
  --font-size-xl:  clamp(1.25rem,  calc(1.1rem   + 0.5vw),  1.5rem);   /* 20px → 24px */
  --font-size-2xl: clamp(1.5rem,   calc(1.275rem + 0.75vw), 1.875rem); /* 24px → 30px */
  --font-size-3xl: clamp(1.875rem, calc(1.5rem   + 1.25vw), 2.5rem);   /* 30px → 40px */
  --font-size-4xl: clamp(2.25rem,  calc(1.8rem   + 1.5vw),  3rem);     /* 36px → 48px */
  --font-size-5xl: clamp(3rem,     calc(2.4rem   + 2vw),    4rem);     /* 48px → 64px */
  --font-size-6xl: clamp(3.75rem,  calc(3rem     + 2.5vw),  5rem);     /* 60px → 80px */

  /* ── Vekt — råverdier ────────────────────────────────────── */
  --font-weight-thin:       100;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;
  --font-weight-black:      900;

  /* ── Semantiske vekter — juster per brand ────────────────── */
  /* Default:  Brukes typisk til mengdetekst.                    */
  /* Strong:   Brukes typisk til tekst som skal skille seg fra mengdetekst. */
  /* Display:  Brukes typisk til store overskrifter og store tekster. */
  /* Button:   Vekt brukt på knapper.                            */
  --font-weight-default: 400;
  --font-weight-strong:  600;
  --font-weight-display: 700;
  --font-weight-button:  500;

  /* ── Linjehøyde ───────────────────────────────────────── */
  --line-height-tight:  1.2;
  --line-height-normal: 1.5;
  --line-height-loose:  1.6;
}

/* ── Utility-klasser for tekststørrelse ──────────────────────
   Bruk på hvilken som helst tag — p, h1, span, div, osv.
   Eksempel: <p class="text-2xl">Stor tekst</p>
   ─────────────────────────────────────────────────────────── */

.text-xs  { font-size: var(--font-size-xs); }
.text-sm  { font-size: var(--font-size-sm); }
.text-md  { font-size: var(--font-size-md); }
.text-lg  { font-size: var(--font-size-lg); }
.text-xl  { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }

/* ── Utility-klasser for skriftvekt ──────────────────────────
   Semantisk bruk:  font-default / font-strong / font-display
   Eksempel: <p class="text-2xl font-display">Overskrift</p>
   ─────────────────────────────────────────────────────────── */

.font-default { font-weight: var(--font-weight-default); }
.font-strong  { font-weight: var(--font-weight-strong); }
.font-display { font-weight: var(--font-weight-display); }