/* ==========================================================
   root.css – färgpalett och designvariabler
   Palett från Color Hunt: #FAF7F3, #F0E4D3, #DCC5B2, #D9A299
   Ändra värdena här så uppdateras hela sajten.
   ========================================================== */

:root {
  /* Grundpalett (Color Hunt) */
  --color-cream: #faf7f3;
  --color-sand: #f0e4d3;
  --color-tan: #dcc5b2;
  --color-rose: #d9a299;

  /* Härledda mörkare nyanser (för läsbar text och knappar) */
  --color-brown: #3d2b25;       /* brödtext, mörk */
  --color-brown-muted: #7a6458; /* sekundär text */
  --color-rose-deep: #9c5a50;   /* länkar och knappar */
  --color-rose-darker: #7a463e; /* hover */

  /* Rollfärger som sidan använder */
  --color-bg: var(--color-cream);
  --color-surface: #ffffff;
  --color-surface-soft: var(--color-sand);
  --color-text: var(--color-brown);
  --color-muted: var(--color-brown-muted);
  --color-primary: var(--color-rose-deep);
  --color-primary-dark: var(--color-rose-darker);
  --color-accent: var(--color-rose);
  --color-border: var(--color-tan);
  --color-header-bg: var(--color-tan);
  --color-header-text: var(--color-brown);

  /* Typsnitt */
  --font-body: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  /* Avstånd och former */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --radius: 8px;
  --max-width: 1000px;
  --shadow: 0 2px 8px rgba(61, 43, 37, 0.1);
}