/*
  Kanonisk design-tokens for hele njolstad-apps-økosystemet.

  Dette er IKKE en fil som lastes inn på tvers av deploys (hver app er en egen
  Cloudflare Pages-deploy med egen root directory, uten byggsteg - se
  AGENTS.md "Ingen build-steg (bevisst valg)"). Den er en referansekopi:
  når du lager en ny app eller endrer fargepaletten, kopiér verdiene herfra
  inn i den enkelte appens egen <style>/style.css, og oppdater denne filen
  samtidig så den forblir sannheten.

  Alle fire eksisterende apper (homepage, hotwheels, bilsammenligning,
  treningslogg) bruker akkurat disse verdiene i dag.
*/

:root {
  --bg: #0b0f14;       /* sidebakgrunn */
  --surface: #11161d;  /* kort / paneler (kalles --card i noen eldre filer) */
  --border: #232b36;
  --ink: #d6e0ea;       /* hovedtekst (kalles --dark i hotwheels av historiske årsaker) */
  --muted: #7c8a9a;     /* sekundærtekst */
  --accent: #3fd98a;    /* grønn aksentfarge - primærhandling/lenker */
  --accent-dim: rgba(63, 217, 138, .12);
  --red: #ff5f56;       /* kun til titlebar-prikken, ikke feilmeldinger */
  --yellow: #ffbd2e;
  --green: #27c93f;
  --rad: 10px;          /* standard border-radius for kort/knapper/input. Bruk 999px kun for genuint runde/pill-formede elementer (badges, sirkulære knapper). */
  font-family: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
}

/*
  "Terminal-titlebar"-komponenten (macOS-vindu med rød/gul/grønn prikk + $-prompt)
  brukes øverst i homepage, hotwheels og bør brukes i alle nye apper for visuell
  gjenkjennelse på tvers av økosystemet. HTML-mønster:

  <div class="jn-titlebar">
    <span class="jn-dot r"></span>
    <span class="jn-dot y"></span>
    <span class="jn-dot g"></span>
    <span>~/joar/<appnavn></span>
  </div>
*/
.jn-titlebar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.jn-titlebar .jn-dot { width: 11px; height: 11px; border-radius: 50%; }
.jn-titlebar .jn-dot.r { background: var(--red); }
.jn-titlebar .jn-dot.y { background: var(--yellow); }
.jn-titlebar .jn-dot.g { background: var(--green); }
.jn-titlebar span:last-child { margin-left: 10px; color: var(--muted); font-size: .8rem; }