/* ==========================================================
   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-face finns i fonts.css) */
  --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;                 /* titlar */
  --font-body: "DM sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;       /* main och navbar */
  --font-post: "Stylish Handwriting", "Segoe Script", "Brush Script MT", cursive;        /* inläggstext */
  --font-wiki: "Flanker Griffo", Georgia, "Times New Roman", serif;                      /* wiki */

  /* Flytande textstorlekar (växer och krymper med skärmen) */
  --font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-size-h1: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  --font-size-h2: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);

  /* Flytande avstånd */
  --space-1: clamp(0.4rem, 0.3rem + 0.5vw, 0.5rem);
  --space-2: clamp(0.75rem, 0.5rem + 1vw, 1rem);
  --space-3: clamp(1rem, 0.6rem + 2vw, 1.5rem);
  --space-4: clamp(1.5rem, 1rem + 3vw, 2.5rem);
  --gutter: clamp(1rem, 4vw, 3rem);  /* sidmarginal vänster/höger */

  /* Former */
  --radius: 8px;
  --shadow: 0 2px 8px rgba(61, 43, 37, 0.1);
}