/* ============================================================
   portal.css — DELT stilark for innbyggerflaten (Jean 2026-07-07).
   EN kilde for portal-tokens + felleskomponenter som foer var
   duplisert i booking/kulturkalender/tempportal/ekstern.

   Tokens: --p-* med det MARITIME temaet som default (hovedsidens
   identitet). Kommunens egne farger settes i LIGHTHOUSE (per
   nettsted, /api/websites/:slug/config) og paafoeres runtime av
   portal-theme.js — som overstyrer disse defaultene.
   ============================================================ */

:root {
  /* Base (Lighthouse: primaryColor/secondaryColor/accentColor/textColor/bgColor) */
  --p-primary: #0077B6;        /* ocean */
  --p-primary-dark: #005f92;   /* avledes av portal-theme.js ved tema */
  --p-secondary: #091a2a;      /* abyss */
  --p-accent: #2D9B6E;         /* kelp */
  --p-accent-dark: #1f7a55;
  --p-bg: #f0f7ff;             /* sand — tonet side, ikke hvit */
  --p-card: #ffffff;
  --p-border: #d5dbe3;
  --p-text: #1f2733;
  --p-muted: #5b6472;
  --p-ok: #16a34a;   --p-ok-bg: #dcfce7;
  --p-warn: #d97706; --p-warn-bg: #fef3c7;
  --p-err: #dc2626;  --p-err-bg: #fee2e2;
}

/* ---- Felleskomponenter (dedup fra undersidene) ---- */
.p-btn, .portal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; min-height: 44px; padding: 9px 18px;
  border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  background: var(--p-primary); color: #fff;
  text-decoration: none; transition: background 0.15s;
}
.p-btn:hover { background: var(--p-primary-dark); }
.p-btn.p-btn-accent { background: var(--p-accent-dark); }
.p-btn.p-btn-ghost { background: transparent; color: var(--p-primary); border: 1px solid var(--p-border); }
.p-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.p-ok-box, .p-err-box, .p-info-box {
  padding: 12px 15px; border-radius: 9px; font-size: 0.9rem; margin: 10px 0;
  border: 1px solid transparent;
}
.p-ok-box   { background: var(--p-ok-bg);   color: #14532d; border-color: #bbf7d0; }
.p-err-box  { background: var(--p-err-bg);  color: #7f1d1d; border-color: #fecaca; }
.p-info-box { background: #eff6ff; color: #1e3a5f; border-color: #bfdbfe; }

.p-loading { display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--p-border); border-top-color: var(--p-primary);
  animation: p-spin 0.8s linear infinite; }
@keyframes p-spin { to { transform: rotate(360deg); } }

.p-card {
  background: var(--p-card); border: 1px solid var(--p-border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.05);
}