/* ============================================================
   VERKTØY-TEMA – gir alle HTML-verktøy samme utseende som nettsiden
   ============================================================
   Slik kobler du et nytt verktøy til temaet:
   1. Legg HTML-filen i mappen /verktoy
   2. Lim inn disse linjene rett før </head> i filen:

      <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&family=Spectral:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="verktoy-tema.css">

   3. Lim inn denne linjen rett etter <body>:

      <a class="verktoy-tilbake" href="../verktoy.html">← Alle verktøy</a>

   4. Legg verktøyet til på siden «Verktøy» (verktoy.html) via /rediger
      – kopier et eksisterende verktøy i listen og endre tekst og lenke.

   Temaet overstyrer farger, skrift og hjørner. Verktøyets egen logikk
   og oppsett røres ikke.
   ============================================================ */

:root{
  /* Nettsidens farger */
  --skog:#1E3529; --mose:#3B5A45; --salvie:#9FB39B; --lys:#E3E8DA;
  --papir:#F4EFE4; --sennep:#C8932E; --rust:#B0582F; --blekk:#222A25; --dempet:#56625A;

  /* Vanlige variabelnavn i verktøyene – pekes mot nettsidens farger */
  --paper:var(--papir);   --bg:var(--papir);       --background:var(--papir);
  --surface:#FFFDF8;      --card:#FFFDF8;          --panel:#FFFDF8;
  --ink:var(--blekk);     --text:var(--blekk);     --fg:var(--blekk);
  --ink-soft:var(--dempet); --muted:var(--dempet); --text-soft:var(--dempet);
  --accent:var(--mose);   --primary:var(--mose);
  --accent-deep:var(--skog); --primary-dark:var(--skog);
  --accent-soft:var(--lys); --primary-soft:var(--lys);
  --border:#DCD8CB;       --border-strong:#C3C0B2;
  --gold:var(--sennep);   --warn:var(--rust);
  --radius:3px;
  --shadow:none;
}

body{
  font-family:"Karla",system-ui,sans-serif !important;
  background:var(--papir) !important;
  color:var(--blekk);
}
h1,h2,h3{
  font-family:"Spectral",Georgia,serif !important;
  font-weight:400 !important;
  color:var(--skog);
  letter-spacing:-.005em;
}
h1{font-weight:300 !important}

button,input,select,textarea{border-radius:3px !important}
input:focus,select:focus,textarea:focus,button:focus-visible{outline-color:var(--sennep) !important}

/* Lenke tilbake til verktøysiden */
.verktoy-tilbake{
  display:block;max-width:900px;margin:0 auto;padding:18px 20px 0;
  font-family:"Karla",system-ui,sans-serif;font-size:.95rem;
  color:var(--mose);text-decoration:none;
}
.verktoy-tilbake:hover{color:var(--skog);text-decoration:underline}

@media print{
  .verktoy-tilbake{display:none !important}
  body{background:#fff !important}
}