/* ==========================================================================
   Fælles designtokens for de indlejrede værktøjer.

   Værktøjerne kører i iframes og arver derfor hverken sidens Tailwind eller
   dens CSS. Denne fil er den ene kilde til sandhed: hvert værktøj linker den,
   og globals.css importerer den samme fil, så app og iframes ikke kan skride
   fra hinanden.

       <link rel="stylesheet" href="/design-tokens.css">

   Farverne er sidens egne — plum, mauve og guld — plus statusfarver, der er
   udledt til at stå i den varme palet frem for at være Bootstrap-defaults.
   Alle kontrastforhold er målt mod --vk-papir.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --vk-plum: #512c43;        /* 11.3:1 · overskrifter, primær tekst        */
  --vk-mauve: #864b6e;       /*  6.3:1 · sekundær, labels, links           */
  --vk-guld: #d6b772;        /*  1.9:1 · ALDRIG tekst. Kun flade og streg. */

  /* --- Flader ----------------------------------------------------------- */
  --vk-papir: #fdfbf7;       /* kortflade                                   */
  --vk-papir-varm: #faf6ee;  /* sideflade, indlejrede felter                */
  --vk-papir-dyb: #f4efe6;   /* nedtonede felter                            */
  --vk-linje: rgba(81, 44, 67, 0.14);
  --vk-linje-svag: rgba(81, 44, 67, 0.08);

  /* --- Tekst ------------------------------------------------------------ */
  --vk-ink: #2e2630;         /* 14.2:1 · brødtekst                          */
  --vk-ink-svag: #6b5f68;    /*  5.9:1 · sekundær tekst. Tonet, ikke grå.   */

  /* --- Status ----------------------------------------------------------- */
  /* Udledt til den varme palet. Rød må råbe, grøn må falde til ro.         */
  --vk-fare: #a13527;        /*  6.7:1 · røde flag, akut handling           */
  --vk-fare-dyb: #8f2d20;    /*  7.9:1 · fyldte flader                      */
  --vk-fare-flade: #f7ebe7;
  --vk-advarsel: #8a6420;    /*  5.2:1 · afventer, ikke endnu               */
  --vk-advarsel-flade: #f7f0e0;
  --vk-ok: #416b52;          /*  5.9:1 · intet fund, færdigudredt           */
  --vk-ok-flade: #ecf2ed;

  /* --- Typografi -------------------------------------------------------- */
  /* Sitet sætter overskrifter i Georgia. Sans falder tilbage på en systemstak,
     så den også holder inde i en iframe; appen sætter --vk-sans-app og får
     dermed Geist forrest. Fallback'en opløses ved brug, så filernes
     indlæsningsrækkefølge er uden betydning. */
  --vk-serif: Georgia, "Times New Roman", "Palatino Linotype", serif;
  --vk-sans: var(--vk-sans-app, "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif);

  /* --- Typeskala --------------------------------------------------------
     Fire trin, hvert mindst 1,25 gange det forrige. Flere trin giver ikke
     mere hierarki, kun mindre forskel mellem dem: et værktøj med tretten
     størrelser mellem 11 og 20px har reelt kun én.

     Brug vægt og farve til at skelne inden for et trin, ikke en halv
     pixel. */
  --vk-tekst-mikro: 12px;       /* etiketter, kildeangivelser, hjælpetekst */
  --vk-tekst-brod: 15px;        /* brødtekst, felter, listepunkter        */
  --vk-tekst-overskrift: 19px;  /* sektionsoverskrifter                    */
  --vk-tekst-display: 24px;     /* det ene, man skal se først              */

  /* --- Rytme ------------------------------------------------------------ */
  --vk-radius-sm: 8px;
  --vk-radius: 14px;
  --vk-radius-lg: 20px;

  /* Skygger har både forskydning og blød sløring — en farvet glorie uden
     forskydning er dekoration, ikke dybde. Tonet i plum, ikke sort. */
  --vk-skygge-sm: 0 1px 2px rgba(81, 44, 67, 0.06), 0 4px 10px -6px rgba(81, 44, 67, 0.18);
  --vk-skygge: 0 2px 4px rgba(81, 44, 67, 0.05), 0 14px 32px -18px rgba(81, 44, 67, 0.32);
  --vk-skygge-lg: 0 4px 8px rgba(81, 44, 67, 0.05), 0 24px 56px -26px rgba(81, 44, 67, 0.4);
}