/* ==========================================================================
   Designtokens — Tinas Kropp & Själ
   Färgpalett inspirerad av torkad hortensia: varmvitt, linne och sand som
   bas, med dov gammelrosa, ljung och dämpad plommon/lila som accenter.
   Byt gärna toner här om Tina vill justera — allt annat ärver från dessa.
   ========================================================================== */
:root {
  /* ---- Bas: varma, ljusa naturtoner ---- */
  --clr-cream:        #FBF7F2; /* varmvit — sidans grundbakgrund */
  --clr-linen:         #F4ECE1; /* linne — sektionsbakgrund, växlar med cream */
  --clr-sand:          #E9DECD; /* sand — kort, kantlinjer, delare */
  --clr-sand-dark:     #DCCEB8;

  /* ---- Text ---- */
  --clr-ink:           #3B332F; /* varm nästan-svart — brödtext */
  --clr-ink-soft:      #574C46;
  --clr-muted:         #857A72; /* dämpad text, bildtexter, metadata */
  --clr-on-dark:       #FBF7F2;

  /* ---- Accent: dov rosa / ljung / plommon / lila ---- */
  --clr-rose:          #C79CA0; /* dov gammelrosa */
  --clr-rose-deep:     #A9767C; /* mörkare rosa, för kontrast/text på ljust */
  --clr-heather:       #A79BB6; /* ljung */
  --clr-plum:          #7C5A6E; /* mjuk plommon — primär accent, rubriker/knappar */
  --clr-plum-deep:     #5B3F4F; /* djup plommon — hover, stark text-accent */
  --clr-lilac:         #9A85AB; /* dämpad lila */

  /* Ytor byggda på accenterna, mycket ljusa — för mjuka bakgrunder/badges */
  --clr-rose-wash:      #F3E4E2;
  --clr-lilac-wash:     #EDE5ED;
  --clr-plum-wash:      #EFE6EC;

  /* ---- Typsnitt ---- */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Flytande typsnittsstorlekar */
  --fs-h1: clamp(2.15rem, 4.5vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2.6vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.2rem, 1vw + 1rem, 1.45rem);
  --fs-lead: clamp(1.05rem, 0.6vw + 0.95rem, 1.2rem);
  --fs-body: 1rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.85rem;

  /* ---- Spacing (flytande) ---- */
  --space-2xs: 0.5rem;
  --space-xs: 0.85rem;
  --space-sm: 1.25rem;
  --space-md: clamp(2rem, 3vw, 2.75rem);
  --space-lg: clamp(3.25rem, 6vw, 5.5rem);
  --space-xl: clamp(4.5rem, 9vw, 8rem);

  /* ---- Form & djup ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 6px 24px -8px rgba(91, 63, 79, 0.18);
  --shadow-lift: 0 16px 40px -12px rgba(91, 63, 79, 0.28);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;

  --max-width: 1180px;
  --max-width-narrow: 760px;
}