/* Grunnstil: farger, typografi, lys og mørk modus */

:root {
  color-scheme: light dark;

  --vin: #6b1f33;
  --vin-lys: #b8324f;
  --rav: #c98a2b;

  --bakgrunn: #faf6f1;
  --flate: #ffffff;
  --flate-2: #f2ebe3;
  --tekst: #2a1d20;
  --tekst-dempet: #6f6064;
  --kant: #e3d8cd;
  --aksent: var(--vin);
  --aksent-tekst: #ffffff;
  --fare: #b3261e;
  --ok: #2e7d4f;

  --radius: 12px;
  --radius-liten: 8px;
  --skygge: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-tittel: ui-serif, Georgia, "Times New Roman", serif;

  --nav-hoyde: 64px;
  --nav-bredde: 232px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="lys"]) {
    --bakgrunn: #1b1416;
    --flate: #251b1e;
    --flate-2: #302428;
    --tekst: #f1e8e2;
    --tekst-dempet: #b3a3a6;
    --kant: #3d2f33;
    --aksent: #d4566f;
    --aksent-tekst: #1b1416;
    --skygge: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
  }
}

:root[data-tema="mork"] {
  --bakgrunn: #1b1416;
  --flate: #251b1e;
  --flate-2: #302428;
  --tekst: #f1e8e2;
  --tekst-dempet: #b3a3a6;
  --kant: #3d2f33;
  --aksent: #d4566f;
  --aksent-tekst: #1b1416;
  --skygge: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bakgrunn);
  color: var(--tekst);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-tittel);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 1em; }

a { color: var(--aksent); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--aksent);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.skjult-visuelt {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}