:root {
  

  
  --bg: #0c0b09;
  
  --surface: #14110d;
  
  --raised: #1b1712;
  
  --text: #f3efe7;
  
  --muted: #b3ab9d;
  
  
  --dim: #857e6e;

  
  --hairline: rgba(243, 239, 231, 0.09);
  
  --hairline-soft: rgba(243, 239, 231, 0.05);
  --hairline-width: 1px;

  

  
  --live: #2bd98f;
  
  --demo: #c9a24b;
  
  --dissonans: #d95940;

  
  

  
  --glod-karna: #fbd9a6;
  
  --glod-het: #f2b36b;
  
  --glod: #e8953f;
  
  --glod-vilande: #8a5a2e;

  
  

  
  --narvaro-nat: #d84a2a;
  
  --narvaro-karna: #ffa878;
  
  --narvaro-hard: #c43a20;
  
  --narvaro-guld: #c9a24b;

  
  
  --utanfor: #050505;

  
  

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
    Georgia, serif;
  --font-ui: "Instrument Sans", "Segoe UI Variable Text", "Segoe UI",
    "Helvetica Neue", sans-serif;
  
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-34: 34px;
  
  --fs-eyebrow: 10.5px;
  --tracking-eyebrow: 0.18em;
  --lh-brod: 1.55;
  --lh-display: 1.16;

  
  --kvot-display: 2;
  --kvot-rubrik: 1.5;
  --viktspann-min: 250;

  
  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-9: 36px;

  --pad-kort: 16px;
  --pad-kort-max: 20px;
  --rytm-sektion: 32px;

  --radius-kort: 8px;
  --radius-inre: 6px;
  --radius-piller: 999px;

  
  --bas-bredd: 390px;
  --bas-hojd: 844px;
  
  --platt-marginal: 14px;
  
  --max-yield: 560px;
  
  --traffyta-min: 44px;
  
  --tabs-hojd: 70px;

  
  
  --dur-snabb: 150ms;
  --dur-langsam: 250ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  
  --dur-andetag: 4200ms;
  
  --dur-flimmer: 1900ms;
}

.yta-djup {
  background: var(--surface);
  border: var(--hairline-width) solid var(--hairline);
  border-radius: var(--radius-kort);
}
.yta-lyft {
  background: var(--raised);
  border: var(--hairline-width) solid var(--hairline);
  border-radius: var(--radius-kort);
}

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