/* ============================================
   Flotte Bygårder — Design Tokens
   Se docs/design-guidelines.md for begrunnelse
   ============================================ */

:root {
  /* Farger */
  --color-primary: #1a2a3a;
  --color-primary-soft: #243648;
  --color-secondary: #82694c;   /* 4.86:1 mot bakgrunn — var #8b7355 med 4.23:1 */
  --color-accent: #c9a96e;
  --color-accent-soft: #e5d4a8;
  --color-bg: #faf8f5;
  --color-bg-alt: #f1ece4;
  --color-bg-dark: #1a2a3a;
  --color-text: #2c2c2c;
  --color-text-light: #6b6b6b;
  --color-text-on-dark: #faf8f5;
  --color-border: #e0d8ce;
  --color-success: #2e7d4f;
  --color-error: #c0392b;

  /* Typografi */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Layout */
  --max-width: 1200px;
  --read-width: 720px;
  --header-height: 80px;

  /* Effekter */
  --transition: 250ms ease;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10);
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* ============================================================
   Fargetemaer
   Settes med data-tema på <html>. Redaktøren velger blant disse
   i CMS — ikke frie farger, slik at kontrasten alltid holder.
   Alle kombinasjoner er målt mot WCAG AA (4.5:1 tekst, 3:1 grafikk).
   ============================================================ */

/* Kalkstein — varmere og roligere enn standard */
:root[data-tema="kalkstein"] {
  --color-primary: #3d3a34;
  --color-primary-soft: #4d4941;
  --color-secondary: #6f6252;
  --color-accent: #c98a4b;
  --color-accent-soft: #e8d3b4;
  --color-bg: #fbfaf7;
  --color-bg-alt: #f2efe8;
  --color-bg-dark: #3d3a34;
  --color-text: #2b2926;
  --color-text-light: #655f57;
  --color-text-on-dark: #fbfaf7;
  --color-border: #e2ddd2;
}

/* Skifer — kjøligere og mer dempet, lar bildene dominere */
:root[data-tema="skifer"] {
  --color-primary: #22262b;
  --color-primary-soft: #313740;
  --color-secondary: #5a6a74;
  --color-accent: #9fb0ba;
  --color-accent-soft: #d6dee3;
  --color-bg: #f7f8f8;
  --color-bg-alt: #eceef0;
  --color-bg-dark: #22262b;
  --color-text: #23262a;
  --color-text-light: #5c6469;
  --color-text-on-dark: #f7f8f8;
  --color-border: #dde1e4;
}

/* ---- Nettbrett ---- */
@media (max-width: 900px) {
  :root {
    --space-10: 3rem;
    --space-12: 4rem;
    --space-16: 5rem;
  }
}

/* ---- Mobil ----
   Store avstander krymper mest: 6rem luft mellom seksjoner er riktig på en
   1440px-skjerm, men spiser en fjerdedel av en iPhone. Små avstander holdes
   nesten uendret, ellers klistrer teksten seg sammen. */
@media (max-width: 600px) {
  :root {
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 3.5rem;
    --header-height: 64px;
  }
}