/* Lag 1 av 3 i designsystemet (claudeai, 4a, 10.10.2026): fonter og tokens. Farger, typografi, radius, avstand og temaene. Komponentene bruker bare disse. */
/* =====================================================================
   Verdi-portalen – «Nordlys over polarnatt»
   Display: TeX Gyre Adventor (geometrisk, fet) · Tekst: Carlito (humanistisk)
   ===================================================================== */

@font-face { font-family: 'Verdi Display'; src: url('fonts/adventor-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Verdi Display'; src: url('fonts/adventor-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Verdi Tekst'; src: url('fonts/carlito-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Verdi Tekst'; src: url('fonts/carlito-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Verdi Tekst'; src: url('fonts/carlito-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --f-display: 'Verdi Display', 'Avenir Next', 'Century Gothic', 'Futura', system-ui, sans-serif;
  --f-tekst: 'Verdi Tekst', 'Lato', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-xs: .8125rem;   /* 13 */
  --t-s: .9375rem;    /* 15 */
  --t-m: 1.0625rem;   /* 17 */
  --t-l: 1.25rem;     /* 20 */
  --t-xl: 1.625rem;   /* 26 */
  --t-helt: clamp(2.9rem, 6.2vw, 4.6rem);

  --r-helt: 30px; --r-panel: 22px; --r-kort: 18px; --r-kontroll: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-sprett: cubic-bezier(.34, 1.56, .64, 1);
  --rail-b: 252px;
  --topp-h: 72px;
  --fane-h: 68px;
  --gutter: clamp(16px, 3.2vw, 40px);
  /* 4a.2: merket (likt i alle temaer) */
  --merke-1: #52E5B0; --merke-2: #5CC8FF; --merke-3: #FF7AB0; --merke-4: #9C86FF; --merke-stjerne: #FFCF5C;
  --logo-glod: rgba(82, 229, 176, .22); --logo-glod-sterk: rgba(82, 229, 176, .45);
}

:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A1030;
  --bg-2: #0D143A;
  --flate: #111945;
  --flate-2: #172053;
  --flate-3: #1F2A63;
  --pop-bg: #141C4B;
  --kant: rgba(160, 176, 255, .13);
  --kant-2: rgba(160, 176, 255, .24);
  --blekk: #EEF2FF;
  --blekk-2: #B6BFE6;
  --blekk-3: #8F99CC;
  --mint: #52E5B0; --cyan: #5CC8FF; --fiol: #9C86FF; --rosa: #FF7AB0; --gull: #FFCF5C;
  --ok: #52E5B0; --warn: #FFB547; --bad: #FF6B7A; --info: #6FB8FF; --violet: #A993FF;
  --ok-tekst: #7DF0C6; --warn-tekst: #FFC978; --bad-tekst: #FF9AA5; --info-tekst: #9CCDFF; --violet-tekst: #C4B5FF; --rosa-tekst: #FF9CC4; --mint-tekst: #7DF0C6; --gull-tekst: #FFDA85;
  --ok-flate: rgba(82, 229, 176, .12); --warn-flate: rgba(255, 181, 71, .13); --bad-flate: rgba(255, 107, 122, .13);
  --info-flate: rgba(111, 184, 255, .13); --violet-flate: rgba(169, 147, 255, .14); --rosa-flate: rgba(255, 122, 176, .14);
  --primar-bg: linear-gradient(135deg, #52E5B0 0%, #5CC8FF 100%);
  --primar-blekk: #03241A;
  --primar-glod: rgba(82, 229, 176, .45);
  --fare-bg: #FF6B7A; --fare-blekk: #2A0409;
  --lenke: #7DF0C6;
  --fokus: #9AF7D5;
  --fokus-glod: rgba(82, 229, 176, .22);
  --input-bg: #0E1640;
  --scrim: rgba(3, 6, 22, .62);
  --glass: rgba(15, 22, 62, .62);
  --glass-kant: rgba(180, 196, 255, .18);
  --skygge: 0 24px 48px -30px rgba(0, 0, 0, .75);
  --skygge-stor: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .1);
  --skel-1: rgba(255, 255, 255, .045); --skel-2: rgba(255, 255, 255, .1);
  --spot: rgba(130, 170, 255, .11);
  --helt-bg: linear-gradient(165deg, #16205A 0%, #0F1743 58%, #0C1339 100%);
  --il-m1: #212C68; --il-m2: #19225A;
  /* diagram */
  --bar-topp: rgba(150, 166, 240, .55); --bar-bunn: rgba(150, 166, 240, .1);
  --hot-1: #72F4C6; --hot-2: #5CC8FF; --hot-3: rgba(156, 134, 255, .35);
  --glod: #52E5B0;
  --band-1: rgba(82, 229, 176, .17); --band-2: rgba(92, 200, 255, .02);
  --skravur: rgba(255, 255, 255, .22);
  --tip-bg: rgba(20, 28, 75, .94);
  /* kategorier (validert for CVD mot mørk flate) */
  --k-nettside: #17A077; --k-google: #3D8BEB; --k-meta: #E0663F; --k-seo: #9180F0;
  --k-some: #C88400; --k-bedriftsprofil: #DD5A92; --k-design: #5E9E2E; --k-annet: #7C84A8;
  --nordlys-styrke: 1;
  /* 4a.2: faste farger fra komponenter.css gjort til tokens (samme verdier) */
  --utvalg: rgba(82, 229, 176, .35);
  --nl-1: rgba(82, 229, 176, calc(.32 * var(--nordlys-styrke))); --nl-2: rgba(156, 134, 255, calc(.30 * var(--nordlys-styrke)));
  --nl-3: rgba(92, 200, 255, calc(.24 * var(--nordlys-styrke))); --nl-4: rgba(125, 240, 198, calc(.07 * var(--nordlys-styrke)));
  --logo-bg: #0B1235; --logo-kant: rgba(160, 176, 255, .22);
  --teller-blekk: #2A0015;
  --auth-skygge: 0 50px 110px -44px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #EDF1F9;
  --bg-2: #E4EAF6;
  --flate: #FFFFFF;
  --flate-2: #F5F7FD;
  --flate-3: #E9EEF9;
  --pop-bg: #FFFFFF;
  --kant: rgba(20, 32, 90, .10);
  --kant-2: rgba(20, 32, 90, .19);
  --blekk: #0F1638;
  --blekk-2: #3E4876;
  --blekk-3: #5A6392;
  --mint: #0B9E72; --cyan: #1B86D6; --fiol: #6D51E8; --rosa: #D6397A; --gull: #C98A00;
  --ok: #0A9468; --warn: #D98A00; --bad: #D0394A; --info: #1B7BD0; --violet: #6D51E8;
  --ok-tekst: #07754F; --warn-tekst: #8F5200; --bad-tekst: #B42837; --info-tekst: #1560A6; --violet-tekst: #5436C9; --rosa-tekst: #B02263; --mint-tekst: #07754F; --gull-tekst: #875A00;
  --ok-flate: rgba(10, 148, 104, .10); --warn-flate: rgba(217, 138, 0, .12); --bad-flate: rgba(208, 57, 74, .09);
  --info-flate: rgba(27, 123, 208, .09); --violet-flate: rgba(109, 81, 232, .09); --rosa-flate: rgba(214, 57, 122, .09);
  --primar-bg: linear-gradient(135deg, #087A58 0%, #0E6CAD 100%);
  --primar-blekk: #FFFFFF;
  --primar-glod: rgba(8, 122, 88, .35);
  --fare-bg: #C8323F; --fare-blekk: #FFFFFF;
  --lenke: #07754F;
  --fokus: #5B3FE0;
  --fokus-glod: rgba(91, 63, 224, .18);
  --input-bg: #FFFFFF;
  --scrim: rgba(22, 30, 70, .38);
  --glass: rgba(255, 255, 255, .7);
  --glass-kant: rgba(255, 255, 255, .9);
  --skygge: 0 20px 40px -28px rgba(22, 34, 90, .35);
  --skygge-stor: 0 30px 70px -24px rgba(22, 34, 90, .35), 0 0 0 1px rgba(20, 32, 90, .04);
  --skel-1: rgba(20, 32, 90, .05); --skel-2: rgba(20, 32, 90, .1);
  --spot: rgba(80, 110, 230, .07);
  --helt-bg: linear-gradient(165deg, #FFFFFF 0%, #F6F8FF 60%, #EEF2FD 100%);
  --il-m1: #D6DDF1; --il-m2: #E5EAF7;
  --bar-topp: rgba(52, 70, 150, .34); --bar-bunn: rgba(52, 70, 150, .06);
  --hot-1: #12C08B; --hot-2: #2A93E8; --hot-3: rgba(109, 81, 232, .28);
  --glod: #12C08B;
  --band-1: rgba(16, 180, 130, .14); --band-2: rgba(30, 140, 230, .02);
  --skravur: rgba(255, 255, 255, .5);
  --tip-bg: rgba(255, 255, 255, .97);
  --k-nettside: #10946B; --k-google: #2F7FDF; --k-meta: #D9582E; --k-seo: #7B68E0;
  --k-some: #C07E00; --k-bedriftsprofil: #D24E88; --k-design: #4F8F22; --k-annet: #8088A8;
  --nordlys-styrke: .8;
  /* 4a.2 */
  --utvalg: rgba(11, 158, 114, .22);
  --nl-1: rgba(18, 190, 140, .22); --nl-2: rgba(120, 90, 240, .18); --nl-3: rgba(40, 150, 240, .16); --nl-4: rgba(18, 170, 130, .06);
  --logo-bg: #0F1638; --logo-kant: none;
  --teller-blekk: #fff;
  --auth-skygge: 0 40px 90px -40px rgba(30, 40, 110, .45), inset 0 1px 0 #fff;
}


/* ---------- Moduser (K1a, claudeai) ----------
   En modus overstyrer bare tokens (og i Felt: størrelsen på trykkflater). Klassisk har ingen regler, den er tokenene over.
   Velges i «Visning» og settes som data-modus på <html> av theme.js før første tegning. Spesifikasjon: BRAINSTORM_claudeai.md del F. */
[data-modus="kontor"][data-theme="light"] {
  --bg: #F3F5F9; --bg-2: #EBEFF5; --flate: #FFFFFF; --flate-2: #F7F9FC; --flate-3: #EDF1F7; --pop-bg: #FFFFFF;
  --kant: rgba(15, 30, 60, .12); --kant-2: rgba(15, 30, 60, .22);
  --blekk: #101828; --blekk-2: #3B475C; --blekk-3: #556074;
  --primar-bg: linear-gradient(135deg, #1D5FD1 0%, #1A56BE 100%); --primar-blekk: #FFFFFF; --primar-glod: rgba(29, 95, 209, .28);
  --lenke: #1A56BE; --fokus: #1D5FD1; --fokus-glod: rgba(29, 95, 209, .2);
  --helt-bg: #FFFFFF; --spot: transparent; --glass: rgba(255, 255, 255, .92);
  --nl-1: transparent; --nl-2: transparent; --nl-3: transparent; --nl-4: transparent;
}
[data-modus="kontor"][data-theme="dark"] {
  --bg: #12161F; --bg-2: #161B26; --flate: #1B2130; --flate-2: #212839; --flate-3: #2A3245; --pop-bg: #1E2433;
  --kant: rgba(200, 210, 230, .12); --kant-2: rgba(200, 210, 230, .22);
  --blekk: #E8ECF4; --blekk-2: #B4BCCB; --blekk-3: #949DAF;
  --primar-bg: linear-gradient(135deg, #2F6BE0 0%, #2A62CF 100%); --primar-blekk: #FFFFFF; --primar-glod: rgba(47, 107, 224, .35);
  --lenke: #8DB5FF; --fokus: #8DB5FF; --fokus-glod: rgba(141, 181, 255, .22);
  --input-bg: #171C28; --glass: rgba(27, 33, 48, .82); --glass-kant: rgba(200, 210, 230, .14);
  --helt-bg: linear-gradient(165deg, #1E2534 0%, #191F2C 100%); --spot: transparent;
  --nl-1: transparent; --nl-2: transparent; --nl-3: transparent; --nl-4: transparent;
}
[data-modus="felt"][data-theme="light"] {
  --bg: #FFFFFF; --bg-2: #F4F6FA; --flate: #FFFFFF; --flate-2: #F4F6FA; --flate-3: #E6EAF2; --pop-bg: #FFFFFF;
  --kant: rgba(0, 0, 0, .28); --kant-2: rgba(0, 0, 0, .5);
  --blekk: #000814; --blekk-2: #1F2937; --blekk-3: #374151;
  --ok-tekst: #05603F; --warn-tekst: #7A4500; --bad-tekst: #9B1C2B; --info-tekst: #0E4F8A; --violet-tekst: #46289F;
  --primar-bg: #0047B3; --primar-blekk: #FFFFFF; --primar-glod: rgba(0, 71, 179, .3);
  --lenke: #0047B3; --fokus: #000814; --fokus-glod: rgba(0, 71, 179, .35);
  --helt-bg: #FFFFFF; --spot: transparent; --glass: #FFFFFF; --glass-kant: rgba(0, 0, 0, .28);
  --nl-1: transparent; --nl-2: transparent; --nl-3: transparent; --nl-4: transparent;
}
[data-modus="felt"][data-theme="dark"] {
  --bg: #000000; --bg-2: #05080F; --flate: #0B0F1A; --flate-2: #121826; --flate-3: #1B2333; --pop-bg: #0F1420;
  --kant: rgba(255, 255, 255, .35); --kant-2: rgba(255, 255, 255, .6);
  --blekk: #FFFFFF; --blekk-2: #E5E7EB; --blekk-3: #C9CED8;
  --primar-bg: #7CC4FF; --primar-blekk: #001226; --primar-glod: rgba(124, 196, 255, .35);
  --lenke: #9CD3FF; --fokus: #FFFFFF; --fokus-glod: rgba(255, 255, 255, .3);
  --input-bg: #05080F; --glass: #0B0F1A; --glass-kant: rgba(255, 255, 255, .35);
  --helt-bg: #0B0F1A; --spot: transparent;
  --nl-1: transparent; --nl-2: transparent; --nl-3: transparent; --nl-4: transparent;
}
/* Felt: prosjektkrav om trykkflater på minst 48 px (del F). :root løfter regelen over modulstiler som .vt-filter .chip. */
:root[data-modus="felt"] :is(.btn, .btn-ikon, .nav-lenke, .fane-lenke, .meny-valg, .mer-lenke, .chip, .pv-utvid, .seg-knapp, .avatar-knapp, .topp-logo, .hopp, .bryter, .kmd-knapp, .rail-logo) { min-height: 48px; }
[data-modus="felt"] :is(.avatar-knapp, .topp-logo, .rail-logo) { min-width: 48px; }
[data-modus="felt"] .btn-ikon { min-width: 48px; }
[data-modus="felt"] :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 48px; }

/* ---------- Tilgjengelighet (K1a): brytere som virker i alle moduser ---------- */
:root[data-tilgj-kontrast] { --blekk-2: var(--blekk); --blekk-3: var(--blekk); --nl-1: transparent; --nl-2: transparent; --nl-3: transparent; --nl-4: transparent; }
:root[data-tilgj-kontrast][data-theme="light"] { --kant: rgba(0, 0, 0, .38); --kant-2: rgba(0, 0, 0, .62); }
:root[data-tilgj-kontrast][data-theme="dark"] { --kant: rgba(255, 255, 255, .42); --kant-2: rgba(255, 255, 255, .66); }
:root[data-tilgj-tekst] { font-size: 112.5%; }
:root[data-tilgj-bevegelse] *, :root[data-tilgj-bevegelse] ::before, :root[data-tilgj-bevegelse] ::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important;
}
:root[data-tilgj-bevegelse] .nordlys { display: none; }