/*
 * Designtokens for Appgarten, variant A (docs/specs/ux-forside/PLAN.md, mockups/a-forside.html).
 * Skrifter: Big Shoulders Display (overskrifter i versaler), Nunito (brødtekst),
 * JetBrains Mono (tall, status og små etiketter).
 * Alle farger, skrifter og avstander står her og bare her. Resten av CSS-en,
 * også PDF-en, bruker variablene. Ingen mørk modus.
 *
 * Skriftene ligger på vår egen server (fonts/KILDER.txt). Ingenting hentes
 * fra Google Fonts eller andre vertsnavn.
 */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/big-shoulders-display-latin-800.2f9aec33f07c.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("fonts/big-shoulders-display-latin-900.9ec6b61a9765.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-latin-400.54ef89211626.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/nunito-latin-400-italic.4c2d0a606f05.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/nunito-latin-600.b770df7528a1.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/nunito-latin-700.28a2cf182b19.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-400.caf0dfde4e44.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-600.075ec35bc15b.woff2") format("woff2");
}

:root {
  /* Paletten fra mockupen */
  --farge-marine: #22324A;        /* tekst, logo, rammer */
  --farge-marine-mork: #0F1A2B;   /* hover på lenker */
  --farge-krem: #FBF7F0;          /* bakgrunn */
  --farge-lysbla: #E9EEF5;        /* flater, hylla */
  --farge-honerod: #C03B21;       /* hovedknapp */
  --farge-solgul: #F2C14E;        /* bare aksent og fokus på mørk bunn, aldri status */
  --farge-skifer: #3A4A61;        /* brødtekst */
  --farge-skifer-lys: #4A5870;    /* hjelpetekst */
  --farge-stiplet: #6B778C;       /* bare rammer og ikoner, ikke tekst */
  --farge-linje: #E3E0D8;         /* skillelinjer */
  --farge-linje-sterk: #CFCAC0;   /* skillelinjer, sterkere */
  --farge-hvit: #FFFFFF;
  --farge-sand: #F3EDE2;          /* bare rundt e-posten (mockups/a-epost.html) */
  --farge-bla: #2F5DA8;           /* «Endret med svarene» og ventingen i rapporten, samme blå som «Selg inn drift» */

  /* Bruk av paletten */
  --farge-bakgrunn: var(--farge-krem);
  --farge-kort: var(--farge-hvit);
  --farge-flate: var(--farge-lysbla);
  --farge-tekst: var(--farge-marine);
  --farge-brodtekst: var(--farge-skifer);
  --farge-tekst-dempet: var(--farge-skifer-lys);
  --farge-lenke: var(--farge-marine);
  --farge-lenke-hover: var(--farge-marine-mork);
  --farge-knapp: var(--farge-honerod);
  --farge-knapp-tekst: var(--farge-hvit);
  --farge-knapp-sekundaer: var(--farge-marine);
  --farge-fokus: var(--farge-marine);
  --farge-fokus-mork-bunn: var(--farge-solgul);

  /* Statusfarger i rapporten. Alltid med ikon og ord, aldri farge alene.
     Teksten i merket er marine. */
  --status-rod-flate: #F8DDD6;
  --status-rod-ikon: #A8331B;
  --status-gul-flate: #FBEFC8;
  --status-gul-ikon: #8A6200;
  --status-gronn-flate: #DCEFDF;
  --status-gronn-ikon: #2E6B3A;
  --status-gra-flate: #E9EEF5;
  --status-gra-ikon: #6B778C;
  --status-tekst: var(--farge-marine);

  /* Skrift */
  --skrift-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --skrift-overskrift: var(--skrift-display);
  --skrift: "Nunito", "Trebuchet MS", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --skrift-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --skrift-str-mini: 0.8125rem;   /* 13 px, merker og meta */
  --skrift-str-liten: 0.9375rem;  /* 15 px, hjelpetekst */
  --skrift-str: 1.0625rem;        /* 17 px, brødtekst */
  --skrift-str-stor: 1.125rem;    /* 18 px, ingress */
  /* Big Shoulders er smal, så overskriftene er større enn med en vanlig skrift. */
  --skrift-str-h3: 1.625rem;      /* 26 px */
  --skrift-str-h2: 2.125rem;      /* 34 px */
  --skrift-str-h1: 2.75rem;       /* 44 px mobil */
  --skrift-str-h1-stor: 3.75rem;  /* 60 px PC */
  --skrift-str-hero: clamp(3.25rem, 8vw, 5.75rem);      /* 52–92 px, overskriften i hero */
  --skrift-str-seksjon: clamp(2.75rem, 6.4vw, 4.5rem);  /* 44–72 px, overskrift på seksjon */
  --skrift-str-hero-ingress: 1.3rem;                    /* ca. 21 px */
  --skrift-str-seksjon-ingress: 1.25rem;                /* 20 px */
  --skrift-vekt-overskrift: 900;
  --skrift-vekt-underoverskrift: 800;
  --linjehoyde: 1.55;
  --linjehoyde-overskrift: 0.97;
  --sporing-overskrift: 0.005em;
  --strek-omriss: 2px;            /* omriss-bokstaver i overskrifter */

  /* Avstander og form */
  --rom-1: 0.25rem;   /* 4 px */
  --rom-2: 0.5rem;    /* 8 px */
  --rom-3: 1rem;      /* 16 px */
  --rom-4: 1.5rem;    /* 24 px */
  --rom-5: 2.5rem;    /* 40 px */
  --rom-6: 4rem;      /* 64 px */
  --rom-seksjon: clamp(4rem, 9vw, 6.5rem);   /* 64–104 px over og under seksjoner */
  --bredde-innhold: 46rem;
  --bredde-side: 77.5rem;     /* 1240 px, header og bunntekst */
  --kant-side: clamp(1rem, 4vw, 2rem);  /* 16–32 px sidemarg */
  --trykkflate: 2.75rem;     /* 44 px, minste trykkflate */
  --radius-liten: 6px;
  --radius: 14px;
  --radius-stor: 20px;
  --radius-pille: 999px;
  --strek: 1.5px;
  --skygge-kort: 0 20px 50px rgba(34, 50, 74, 0.14);
  --skygge-rapportkort: 0 18px 44px rgba(34, 50, 74, 0.18);
  --skygge-fast-knapp: 0 -10px 28px rgba(34, 50, 74, 0.12);  /* fast knapp på mobil, skygge oppover */

  /* Admin (docs/design/admin-ux-regler.md, vedtatt 5.11.2026). Admin bruker bare tokens herfra. */
  --farge-felt-kant: #8B8579;     /* kant på felt, 3:1 mot hvitt */
  --farge-knapp-trykket: #8E2A15; /* hovedknappen mens den trykkes */
  --farge-graf-lys: #D5DAE3;      /* tom søyle i grafene på Oversikt */
  --farge-graf-retting: #B5651D;  /* retting i søylene på Oversikt (drift er --farge-bla) */
  --farge-bakteppe: rgba(34, 50, 74, 0.35);
  --skygge-dra: 0 8px 24px rgba(34, 50, 74, 0.18);
  --skygge-dialog: 0 24px 60px rgba(34, 50, 74, 0.3);
  --skrift-str-admin: 0.875rem;   /* 14 px, brødtekst i admin (Anders 5.11) */
  --radius-kort: 10px;            /* panel og kort i admin */
  --hoyde-knapp: 2.5rem;          /* 40 px */
  --hoyde-knapp-liten: 2rem;      /* 32 px */
}

/* Bug 3 (Anders 8.11): rutenettene med nivåene får like mange kolonner som nivåer som vises (tre med NIVAA4_SKJULT).
   Malen setter data-antall, og CSS-en bruker repeat(var(--antall, 4), …). Mobil og nettbrett er som før. */
[data-antall="1"] { --antall: 1; }
[data-antall="2"] { --antall: 2; }
[data-antall="3"] { --antall: 3; }