/*
  TrafiCal design tokens.
  Nøytral skala er rangordna 1:1 mot den gamle gråskalaen som var hardkoda
  i kvar mal (sjå trafiCal_fargar&kalender.pdf for referanse-paletten).
*/

:root {
  /* Nøytral skala (lysast -> mørkast) */
  --c-neutral-50: #f8f7f2;
  --c-neutral-100: #eeece4;
  --c-neutral-200: #e2dfd3;
  --c-neutral-300: #c7c4b6;
  --c-neutral-400: #a3a29b;
  --c-neutral-500: #6b6a63;
  --c-neutral-600: #45443f;
  --c-neutral-700: #292824;

  /* Aksent (gul) */
  --c-accent: #fcf792;
  --c-accent-soft: #fdfcd3;
  --c-accent-border: #eae371;

  /* Lenker – uendra frå gamal palett, berre tokenisert */
  --c-link: #2563eb;
  --c-link-hover: #1d4ed8;
  --c-link-light: #3b82f6;
  --c-link-soft: #eff6ff;

  /* Status – uendra frå gamal palett, berre tokenisert */
  --c-danger: #ef4444;
  --c-danger-bg: #fee2e2;
  --c-danger-text: #991b1b;
  --c-danger-border: #fca5a5;
  --c-success: #16a34a;
  --c-success-bg: #ecfdf5;
  --c-success-text: #065f46;
  --c-success-border: #6ee7b7;
  --c-warning: #f59e0b;
  --c-warning-bg: #fef3c7;
  --c-warning-text: #92400e;
  --c-warning-border: #fcd34d;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-sans);
  background: var(--c-neutral-100);
  color: var(--c-neutral-700);
}

.btn-primary {
  background: var(--c-accent);
  color: var(--c-neutral-700);
  border: 1px solid var(--c-accent-border);
  border-radius: 999px;
}
.btn-primary:hover {
  background: var(--c-accent-border);
}

.btn-secondary {
  background: var(--c-neutral-200);
  color: var(--c-neutral-700);
  border: 1px solid var(--c-neutral-300);
  border-radius: 999px;
}
.btn-secondary:hover {
  background: var(--c-neutral-300);
}

/* ── Sideskifte (2026-10-25) ─────────────────────────────────────────
   Lastelinja og sirkelen i menyknappen kjem frå static/js/sideskifte.js.
   NB: @view-transition (krysstoning mellom sider) vart prøvd og fjerna att:
   Chrome plasserte biletet av den gamle sida forskove (dobbel, skeiv
   menylinje òg ved «neste veke» i kalenderen). Nettlesaren held uansett den
   gamle sida synleg til den nye er klar, så det vert ikkje kvitt imellom. */
/* Hald av plass til rullefeltet på alle sider (Mac med mus, Windows): elles
   vert sida nokre pikslar breiare på korte sider, og menyen hoppar. */
html { scrollbar-gutter: stable; }

.page-progress {
  position: fixed; top: 0; left: 0; z-index: 10000; height: 3px; width: 0;
  background: var(--c-accent-border); box-shadow: 0 0 6px rgba(0, 0, 0, .12);
  opacity: 0; pointer-events: none;
  transition: width 6s cubic-bezier(.08, .6, .2, 1), opacity .2s;
}
.is-navigating .page-progress { opacity: 1; width: 88%; }
.is-navigating, .is-navigating a { cursor: progress; }

/* Sirkel i staden for ikonet på knappen som vart trykt (topp- og botnmeny). */
.is-loading > .ico, .is-loading .mtab-pill > .ico { visibility: hidden; }
.nav-link.is-loading, .mtab.is-loading .mtab-pill { position: relative; }
.nav-link.is-loading::after, .mtab.is-loading .mtab-pill::after,
.nav-dropdown-item.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; opacity: .7;
  animation: trafical-spin .6s linear infinite;
}
.nav-link.is-loading::after { left: .85rem; top: calc(50% - 8px); }
.mtab.is-loading .mtab-pill::after { left: calc(50% - 8px); top: calc(50% - 8px); }
.nav-dropdown-item.is-loading { position: relative; }
.nav-dropdown-item.is-loading::after { right: .75rem; top: calc(50% - 8px); }
@keyframes trafical-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .nav-link.is-loading::after, .mtab.is-loading .mtab-pill::after, .nav-dropdown-item.is-loading::after { animation-duration: 1.5s; }
}