/* ==========================================================================
   Atelier — visuell overlay (Fase 1)
   Lastes ETTER style.css. Overstyrer eksisterende tokens og legger til nye
   komponenter — ingen markup er påkrevd for re-skinningen.
   Palett: navy ink, messing, eik, lin, kalkstein. Radius 0 / 16 / 999 px.
   Ingen eksterne fonter legges til her — mono bruker system-fallback.
   ========================================================================== */

:root {
  /* Atelier-palett overstyrer dagens variabler (re-skinner hele siden) */
  --color-primary: #15212E;   /* ink (navy) */
  --color-bg-dark: #15212E;
  --color-secondary: #7A5E3F; /* eik */
  --color-accent: #B48A4A;    /* messing */
  --color-bg: #F6F1E8;        /* lin */
  --color-border: #D8CFBA;    /* kalkstein */

  /* Nye Atelier-tokens */
  --ink: #15212E;
  --brass: #B48A4A;
  --brass-soft: #cda56a;
  --oak: #7A5E3F;
  --linen: #F6F1E8;
  --stone: #D8CFBA;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* 3-trinns radius */
  --r-frame: 0px;
  --r-card: 16px;
  --r-pill: 999px;

  /* oklch-harmoniserte statusfarger */
  --status-ok: oklch(0.70 0.13 150);
  --status-vent: oklch(0.78 0.13 85);
  --status-info: oklch(0.66 0.12 245);
  --status-varsel: oklch(0.62 0.20 33);
  --status-noytral: oklch(0.70 0.02 95);
}

/* bg-alt harmoniseres mot lin/kalkstein */
.bg-alt { background: #efe7d8; }

/* --------------------------------------------------------------------------
   Pille-knapper — ikke versaler
   -------------------------------------------------------------------------- */
.btn {
  border-radius: var(--r-pill);
  text-transform: none;
  letter-spacing: 0.3px;
  font-size: 0.9rem;
}
.btn-small { border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   Kort: 16 px radius
   -------------------------------------------------------------------------- */
.service-card,
.gallery-item,
.intro-image,
.partner-card,
.contact-form,
.project-card { border-radius: var(--r-card); }

/* Rammer/bånd holdes på 0 px */
.section-header .divider { border-radius: var(--r-frame); }

/* --------------------------------------------------------------------------
   Pille-hover på nav-lenker (erstatter underline-effekten)
   -------------------------------------------------------------------------- */
.site-header nav ul li a {
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  transition: background var(--transition), color var(--transition);
}
.site-header nav ul li a:hover,
.site-header nav ul li a[aria-current="page"] {
  background: rgba(180, 138, 74, 0.14);
  color: var(--brass);
}

/* --------------------------------------------------------------------------
   Kicker-pille over h2 (.overline / .kicker)
   -------------------------------------------------------------------------- */
.overline,
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(180, 138, 74, 0.12);
  border: 1px solid rgba(180, 138, 74, 0.35);
  padding: 0.25rem 0.8rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.bg-dark .overline,
.bg-dark .kicker { color: var(--brass-soft); }

/* --------------------------------------------------------------------------
   Hero — etablerings-pille (monospace messing)
   -------------------------------------------------------------------------- */
.hero__estab {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brass-soft);
  border: 1px solid rgba(180, 138, 74, 0.5);
  border-radius: var(--r-pill);
  padding: 0.3rem 1rem;
  margin-bottom: 1.4rem;
}

/* --------------------------------------------------------------------------
   Tjeneste-kort — nummer-meta (erstatter ornament-emoji)
   -------------------------------------------------------------------------- */
.service-card__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   Galleri-overlegg — alltid synlig meta med kicker + sted
   -------------------------------------------------------------------------- */
.gallery-overlay {
  opacity: 1;
  background: linear-gradient(to top, rgba(21, 33, 46, 0.88) 0%, rgba(21, 33, 46, 0.15) 55%, transparent 80%);
}
.gallery-overlay p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--brass-soft);
  order: -1;
  margin-bottom: 0.35rem;
}
.gallery-overlay h4 { font-family: var(--font-heading); font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   Verdi-seksjon — italic Playfair-ord i messing
   -------------------------------------------------------------------------- */
.value-item h3 {
  font-style: italic;
  color: var(--brass-soft);
}
.value-item .icon { color: var(--brass); }

/* --------------------------------------------------------------------------
   Fokusring i pille-form
   -------------------------------------------------------------------------- */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: var(--r-pill);
}
input:focus-visible,
textarea:focus-visible { border-radius: 8px; }