/* =====================================================================
   Mattepuls · designtokens · iterasjon 1.1
   Kilde: designsystem-artifactet «Ett kort designsystem».
   Regler og begrunnelser står i docs/design/DESIGN.md. Les den før du bruker disse.
   ===================================================================== */

/* ---------- Fonter: serveres fra egen server ----------
   Aldri fra fonts.googleapis.com / fonts.gstatic.com (sender elevens IP til Google).
   Alle tre er SIL Open Font License (lisensene ligger i public/fonts/OFL-*.txt).
   Filene er variable woff2 fra Fontsource 5.3.0 (@fontsource-variable/*), latin-utvalget,
   som dekker æ ø å, − U+2212, · U+00B7 og U+2009. Akser:
   Archivo wght 100–900 + wdth 62–125 · Bricolage wght 200–800 + opsz 12–96 · Atkinson wght 200–800. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-var-latin.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-var-latin.woff2") format("woff2-variations"),
       url("/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next-var-latin.woff2") format("woff2-variations"),
       url("/fonts/atkinson-hyperlegible-next-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farger: lyst tema (standard) ---------- */
:root,
.tema-lys {
  --grunn:        #F3F1FA; /* sluttskjerm, nøytral bakgrunn */
  --blekk:        #120E2B; /* all primærtekst + den ene fylte flaten per skjerm */
  --blekk-2:      #3F3A5E; /* etiketter, «Avslutt», «Regn ut». Aldri svar. */

  /* Kortflater. Roterer fra kort til kort. Har INGEN semantisk betydning. */
  --f-kobolt:     #B7C3FF;
  --f-fiol:       #D5C4FF; /* også åpningsskjermen */
  --f-petrol:     #9EE2D5;
  --f-rosa:       #FFC1E0;

  --knapp:        #120E2B; /* fylt flate: primærknapp, riktig-felt, valgt alternativ */
  --knapp-tekst:  #FFFFFF;

  /* Felt (svarfelt, alternativer, taster) avledes fra flaten, se .felt nedenfor */
  --felt-base:    #FFFFFF;
  --felt-andel:   60%;

  color-scheme: light;
}

/* ---------- Farger: mørkt tema ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grunn:       #110F1D;
    --blekk:       #FFFFFF;
    --blekk-2:     #D6D2EE;
    --f-kobolt:    #2334A6;
    --f-fiol:      #4A21A0;
    --f-petrol:    #0C5A54;
    --f-rosa:      #7F1D5B;
    --knapp:       #FFFFFF;
    --knapp-tekst: #120E2B;
    --felt-base:   #000000;
    --felt-andel:  30%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"],
.tema-mork {
  --grunn:       #110F1D;
  --blekk:       #FFFFFF;
  --blekk-2:     #D6D2EE;
  --f-kobolt:    #2334A6;
  --f-fiol:      #4A21A0;
  --f-petrol:    #0C5A54;
  --f-rosa:      #7F1D5B;
  --knapp:       #FFFFFF;
  --knapp-tekst: #120E2B;
  --felt-base:   #000000;
  --felt-andel:  30%;
  color-scheme: dark;
}

/* Målte kontraster (WCAG), alle ≥ 4.5:1:
   Lyst:  blekk på flater 10.9–16.7 · blekk-2 på flater 6.2–9.5 · knapp-tekst på knapp 18.7
   Mørkt: blekk på flater 8.1–18.9  · blekk-2 på flater 5.5–12.9 · knapp-tekst på knapp 18.7
   Laveste: blekk-2 på petrol i mørkt tema (5.5:1). */

/* ---------- Skala, typografi, bevegelse ---------- */
:root {
  /* Spacing (4-rutenett) */
  --s1: 4px;   /* markør mot tall */
  --s2: 8px;   /* mellom taster */
  --s3: 12px;  /* i en gruppe */
  --s4: 16px;  /* mellom soner */
  --s5: 24px;  /* skjermkant */
  --s6: 32px;  /* seksjoner (dokumentasjon) */
  --s7: 48px;  /* åpning og slutt */
  --s8: 72px;  /* kun dokumentasjon */

  /* Radius: formen sier hva du kan gjøre */
  --r-flate: 0;      /* kortet: kant til kant */
  --r-felt:  16px;   /* ting du skriver i eller velger mellom */
  --r-pille: 999px;  /* ting du trykker for å gå videre */

  /* Varighet */
  --t-rask:    150ms;
  --t-middels: 200ms;
  --t-lang:    250ms;

  /* Easing */
  --e-fjaer: cubic-bezier(.34, 1.5, .6, 1);  /* alt som kommer inn (overshoot) */
  --e-myk:   cubic-bezier(.2, .8, .2, 1);    /* farge, tekst, fyll */
  --e-ut:    cubic-bezier(.45, 0, .9, .5);   /* alt som går ut (akselererer) */

  /* Familier */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif; /* ord som skal bety noe */
  --font-matte:   "Archivo", "Helvetica Neue", Arial, sans-serif;              /* all matematikk */
  --font-prosa:   "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Verdana, system-ui, sans-serif; /* oppgavetekst */

  /* Typeskala: størrelse / linjehøyde / vekt */
  --type-stor:       800 58px/0.98 var(--font-display);  /* åpning, slutt. tracking −0.04em */
  --type-uttrykk-xl: 800 66px/1.1  var(--font-matte);    /* oppgave i symbolform. wdth 108, −0.02em */
  --type-resultat:   800 60px/1.1  var(--font-matte);    /* siste linje i løsningen */
  --type-felt:       800 42px/1    var(--font-matte);    /* det hun skriver */
  --type-uttrykk-m:  800 40px/1.1  var(--font-matte);    /* regnestykkelinjer. 38px i kompakt oppgave */
  --type-alternativ: 800 28px/1.1  var(--font-matte);
  --type-prosa:      500 27px/1.3  var(--font-prosa);    /* 20px i kompakt oppgave */
  --type-kvittering: 800 30px/1.1  var(--font-display);  /* «Riktig.» tracking −0.03em */
  --type-knapp:      800 21px/1    var(--font-display);  /* tracking −0.015em */
  --type-melding:    500 19px/1.35 var(--font-prosa);
  --type-etikett:    800 15px/1.2  var(--font-display);  /* versaler, +0.06em, alltid blekk-2 */
  --type-avslutt:    700 17px/1    var(--font-display);

  /* Mål */
  --hoyde-knapp: 60px;
  --hoyde-felt:  78px;
  --hoyde-tast:  54px;
  --hoyde-alt:   96px;   /* min-høyde, alternativ-knapp */
  --min-touch:   44px;
}

/* Kortflater som klasser */
/* Klassen setter både --flate (for avledede farger) og bakgrunn/tekst. */
.flate-kobolt { --flate: var(--f-kobolt); }
.flate-fiol   { --flate: var(--f-fiol); }
.flate-petrol { --flate: var(--f-petrol); }
.flate-rosa   { --flate: var(--f-rosa); }
.flate-grunn  { --flate: var(--grunn); }
.flate-kobolt, .flate-fiol, .flate-petrol, .flate-rosa, .flate-grunn {
  background: var(--flate);
  color: var(--blekk);
}

/* Avledede flater. Faller tilbake til --grunn hvis ingen flateklasse er satt. */
.felt, .alt {
  background: color-mix(in srgb, var(--felt-base) var(--felt-andel), var(--flate, var(--grunn)));
  color: var(--blekk);
}
.tast {
  background: color-mix(in srgb, var(--felt-base) calc(var(--felt-andel) - 20%), var(--flate, var(--grunn)));
  color: var(--blekk);
}

/* Felttilstander */
.felt.bom .verdi { background: color-mix(in srgb, var(--blekk) 14%, transparent); border-radius: 8px; }
.felt.riktig     { background: var(--knapp); color: var(--knapp-tekst); }
.felt.levert     { box-shadow: inset 0 0 0 2.5px var(--blekk); }   /* hentingskort: riktig og feil ser like ut */
.felt .markor    { display: inline-block; width: 3px; height: 44px; background: var(--blekk); border-radius: 2px;
                   animation: markor-blink 1.05s steps(1) infinite; }
@keyframes markor-blink { 50% { opacity: 0; } }

/* ---------- Matematikk ---------- */
.m {
  font-family: var(--font-matte);
  font-variation-settings: "wdth" 108;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.m .o    { font-weight: 500; margin: 0 .2em; font-variation-settings: "wdth" 100; } /* operator */
.m .o.av { font-family: var(--font-display); font-weight: 600; font-size: .72em; margin: 0 .32em; }
.m .p    { font-weight: 300; font-size: 1.08em; }                                    /* parentes */
.m .ukjent { display: inline-block; width: .72em; height: .86em; border: .08em solid currentColor; border-radius: .12em; }
.m .brok { display: inline-grid; text-align: center; font-size: .7em; line-height: 1; }
.m .brok > :first-child { border-bottom: .1em solid currentColor; }
.m .x .var { font-style: italic; font-weight: 600; font-variation-settings: "wdth" 100; margin-left: .04em; } /* den ukjente i en likning */
.m .pot sup { font-size: .58em; line-height: 0; vertical-align: .55em; font-weight: 700; margin-left: .04em; }   /* eksponent */

/* ---------- Datasett ---------- */
/* Tallrekke: ett tall per celle, aldri komma som skilletegn (komma er desimaltegn). */
.tallrekke {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));  /* bruk .fire hvis et tall har > 3 tegn */
  gap: var(--s3) var(--s2);
  font: 800 34px/1.1 var(--font-matte);
  font-variation-settings: "wdth" 100;
  font-variant-numeric: tabular-nums;
  list-style: none; margin: 0; padding: 0;
}
.tallrekke.fire { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tallrekke > * { text-align: right; white-space: nowrap; }
.kompakt .tallrekke { font-size: 24px; }

/* Frekvenstabell: står direkte på flaten, ingen ramme, ingen sebra. */
.tabell { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabell th {
  font: var(--type-etikett); letter-spacing: .06em; text-transform: uppercase;
  color: var(--blekk-2); text-align: right; vertical-align: bottom; padding: 0 0 var(--s2) var(--s3);
}
.tabell th:first-child, .tabell td:first-child { padding-left: 0; }
.tabell td {
  height: 52px; padding: 0 0 0 var(--s3); text-align: right;
  font: 800 30px/1 var(--font-matte); font-variation-settings: "wdth" 100;
  border-top: 2px solid color-mix(in srgb, var(--blekk) 14%, transparent);
}
.tabell tr.sum td { border-top: 3px solid var(--blekk); }
.kompakt .tabell td { height: 40px; font-size: 22px; }

/* Tall inne i prosa: ankre */
.tall {
  font-family: var(--font-matte);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Redusert bevegelse ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 120ms !important;
    transition-duration: 120ms !important;
  }
  /* All forflytning erstattes av kort toning. Ingen overshoot. */
  .felt .markor { animation: none; opacity: 1; }
}