/* ============================================================
   Design tokens — Real American Steakhouse
   Alt av farger, typografi og avstander defineres her.
   Endre verdier her for å endre utseendet på hele siden.
   ============================================================ */

:root {
  /* Farger — klassisk steakhouse: mørk espresso, krem, gull, vinrød */
  --color-bg-dark: #211a16;
  --color-bg-dark-raised: #2b231e;
  /* Gjennomskinnelig variant av --color-bg-dark: slipper bakgrunnsgrafikken
     svakt gjennom uten å endre opplevd bakgrunnsfarge (body er like mørk) */
  --color-bg-dark-veil: rgba(33, 26, 22, 0.55);
  --color-bg-light: #f7f1e6;
  --color-bg-light-raised: #fffaf0;

  --color-text-on-dark: #f5ede0;
  --color-text-muted-on-dark: #cdbfa9;
  --color-text-on-light: #2b2118;
  --color-text-muted-on-light: #5c4f41;

  --color-gold: #d4a95c;
  --color-gold-deep: #a16207;
  --color-red: #8b2c2c;

  --color-border-on-dark: #4a3d33;
  --color-border-on-light: #ddd2bf;

  /* Typografi */
  --font-heading: "Playfair Display", "Georgia", serif;
  --font-body: "Karla", "Helvetica Neue", Arial, sans-serif;

  --text-base: 1rem;        /* 16px */
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 4vw, 2.75rem);
  --text-display: clamp(2.5rem, 7vw, 4.5rem);

  --leading-body: 1.6;
  --leading-heading: 1.15;

  /* Avstander — 8px-rytme */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;

  /* Layout */
  --content-width: 70rem;
  --prose-width: 42rem;

  /* Lagdeling (z-index-skala) */
  --z-grill: 0;
  --z-content: 1;
  --z-quicknav: 20;
  --z-header: 30;

  /* Effekter og bevegelse */
  --transition-fast: 200ms ease-out;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-reveal: 600ms;
  --radius: 2px;
  --shadow-lift: 0 10px 28px rgba(43, 33, 24, 0.14);
  --shadow-header: 0 2px 18px rgba(22, 14, 9, 0.5);
}