/* Svara — delade designtokens (B33). Ägs av G-sajt. Länkas av sajten (sajt/*.html) och appen (/tokens.css i public/*.html).
   Innehåller BARA variabler + typsnittsimport: inga elementregler, så att den kan läggas före vilken stil.css som helst.
   Typpar (B21): Schibsted Grotesk (text/UI) + Newsreader (rubriker/siffror). Inter/Geist används inte. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

:root{
  /* färger — ljust */
  --bg:#ffffff; --yta:#ffffff; --panel:#f4f5f8; --panel2:#eceef4;
  --ink:#0b1533; --text:#1d2433; --mut:#5d6578; --linje:#e3e6ee; --linje2:#d5d9e4;
  --acc:#2c5cff; --acc-fg:#ffffff; --acc-svag:#eaf0ff;
  --ok:#0f8a55; --ok-svag:#e3f5ec; --var:#b26a00; --var-svag:#fbf0dc; --fel:#c4321f; --fel-svag:#fbe6e2;
  --knapp:#0b1533; --knapp-fg:#ffffff; --knapp2:#f1f2f6; --knapp2-fg:#0b1533;
  --natt:#0b1533; --natt2:#16214a; --natt-text:#dfe4f2; --natt-mut:#a6afc8;
  --hero1:#0a1a4f; --hero2:#1e4fff; --hero3:#1aa7a0; --hero4:#05091d;

  /* typografi — skala 1.25 (mobil) mot ~1.333 (dator) via clamp, brödtext ≥17 px (B18) */
  --disp:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-liten:14px; --fs-text:17px; --fs-stor:clamp(18px,2vw,21px);
  --fs-h3:20px; --fs-h2:clamp(34px,5vw,60px); --fs-h1:clamp(44px,7.4vw,92px); --fs-siffra:clamp(30px,3.4vw,40px);
  --lh-text:1.6; --lh-rubrik:1.04; --sparr-rubrik:-.03em;

  /* form */
  --r1:28px; --r2:20px; --r3:14px; --r4:10px; --rund:999px;
  --rytm:clamp(72px,10vw,128px);

  /* djup: mjuka skuggor i lager */
  --sk-1:0 1px 2px rgba(11,21,51,.06),0 1px 1px rgba(11,21,51,.04);
  --sk-2:0 1px 2px rgba(11,21,51,.05),0 8px 24px -8px rgba(11,21,51,.12);
  --sk-3:0 2px 4px rgba(11,21,51,.04),0 24px 60px -24px rgba(11,21,51,.28),0 60px 120px -60px rgba(44,92,255,.22);
  --kant-ljus:inset 0 1px 0 rgba(255,255,255,.7);

  /* kornighet (lägg som background-image över ytor, opacitet via --korn-styrka) */
  --korn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --korn-styrka:.05;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#070b18; --yta:#0d1224; --panel:#0f1529; --panel2:#151c34;
  --ink:#eef1fb; --text:#dfe4f2; --mut:#9aa3bb; --linje:#1f2742; --linje2:#2a3456;
  --acc:#7d9bff; --acc-fg:#0b1533; --acc-svag:#16204a;
  --ok:#4fd39a; --ok-svag:#0f2a20; --var:#f2b35c; --var-svag:#2c2110; --fel:#ff8a78; --fel-svag:#2e1512;
  --knapp:#eef1fb; --knapp-fg:#0b1533; --knapp2:#161d36; --knapp2-fg:#eef1fb;
  --natt:#111a3a; --natt2:#1a2650;
  --sk-1:0 1px 2px rgba(0,0,0,.4);
  --sk-2:0 1px 2px rgba(0,0,0,.35),0 10px 28px -10px rgba(0,0,0,.6);
  --sk-3:0 2px 4px rgba(0,0,0,.3),0 30px 70px -28px rgba(0,0,0,.75),0 60px 120px -60px rgba(125,155,255,.18);
  --kant-ljus:inset 0 1px 0 rgba(255,255,255,.06);
  --korn-styrka:.07; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070b18; --yta:#0d1224; --panel:#0f1529; --panel2:#151c34;
  --ink:#eef1fb; --text:#dfe4f2; --mut:#9aa3bb; --linje:#1f2742; --linje2:#2a3456;
  --acc:#7d9bff; --acc-fg:#0b1533; --acc-svag:#16204a;
  --ok:#4fd39a; --ok-svag:#0f2a20; --var:#f2b35c; --var-svag:#2c2110; --fel:#ff8a78; --fel-svag:#2e1512;
  --knapp:#eef1fb; --knapp-fg:#0b1533; --knapp2:#161d36; --knapp2-fg:#eef1fb;
  --natt:#111a3a; --natt2:#1a2650;
  --sk-1:0 1px 2px rgba(0,0,0,.4);
  --sk-2:0 1px 2px rgba(0,0,0,.35),0 10px 28px -10px rgba(0,0,0,.6);
  --sk-3:0 2px 4px rgba(0,0,0,.3),0 30px 70px -28px rgba(0,0,0,.75),0 60px 120px -60px rgba(125,155,255,.18);
  --kant-ljus:inset 0 1px 0 rgba(255,255,255,.06);
  --korn-styrka:.07; color-scheme:dark}