/* Molslinjen brand tokens — fra CVI.
   Korolev loades via Adobe/Typekit i index.html (use.typekit.net/izc7his.js).
   Lokal @font-face fjernet — vi har ikke Core Rhino i repo'et. */

:root {
  /* Primary palette */
  --color-dyb-havblaa: #002547;
  --color-dyb-havblaa-80: #33516c;
  --color-dyb-havblaa-60: #667c91;
  --color-dyb-havblaa-40: #99a8b5;
  --color-dyb-havblaa-20: #ccd3da;
  --color-dyb-havblaa-08: rgba(0, 37, 71, 0.08);

  --color-havskum: #ffffff;
  --color-sand: #f5f3ee;     /* warm light bg, not pure white */

  /* Secondary palette */
  --color-havblaa: #005ba9;
  --color-havblaa-soft: #1e7ac4;

  /* Accent (CTA only) */
  --color-cta: #00b5ed;
  --color-cta-hover: #33c4f0;

  /* Special — only for lavpris-tilbud */
  --color-lavpris: #f18700;

  /* Typography — Korolev (Adobe Fonts) med Core Rhino som lokal substitut */
  --font-display: "Korolev", "Core Rhino", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: var(--font-display);
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Layout */
  --max-w: 1400px;
  --gutter: 20px;
  --radius-card: 0.5rem;
  --radius-pill: 99rem;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  color: var(--color-dyb-havblaa);
  background: var(--color-havskum);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn-cta {
  background: var(--color-cta);
  color: var(--color-havskum);
  border-color: var(--color-cta);
  font-weight: 600;
}
.btn-cta:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }

.btn-secondary {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-dark-bg.btn-secondary { color: var(--color-havskum); border-color: var(--color-havskum); }
.btn-dark-bg.btn-secondary:hover { background: var(--color-havskum); color: var(--color-dyb-havblaa); }
.btn-light-bg.btn-secondary { color: var(--color-dyb-havblaa); border-color: var(--color-dyb-havblaa); }
.btn-light-bg.btn-secondary:hover { background: var(--color-dyb-havblaa); color: var(--color-havskum); }

/* Small inline play disc — for "Hør sangen" pattern */
.play-disc {
  width: 20px; height: 20px;
  border-radius: 99rem;
  background: var(--color-cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dyb-havblaa);
  flex: 0 0 auto;
}
.play-disc svg { width: 9px; height: 9px; display: block; }

/* Loading-spinner i play-disc mens Vimeo buffrer */
.play-spinner {
  width: 10px; height: 10px;
  border-radius: 99rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: play-spin 0.6s linear infinite;
}
@keyframes play-spin { to { transform: rotate(360deg); } }
.btn.is-loading { cursor: progress; }