/*
  diggs.no – designtokens, retning A «Åpen arbeidsbok»
  Eier: designer. Utvikler kopierer filen uendret til static/css/tokens.css.
  Begrunnelser og kontrasttall: design/DESIGN.md, avsnitt 3.
  Sist endret: 2026-10-31
*/

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-roman.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Source Code Pro, nedkuttet og omdøpt (OFL: «Source» er reservert navn). */
@font-face {
  font-family: "Diggs Mono";
  src: url("../fonts/diggs-mono.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Farger, lys modus (standard) */
  --c-paper: #f8f6f1;        /* bunn: papirhvit, ikke ren hvit */
  --c-raised: #efebe2;       /* flater: statusboks, tabellhode, kodeblokk */
  --c-ink: #1b1a17;          /* tekst */
  --c-ink-2: #55514a;        /* sekundær tekst og metadata */
  --c-rule: #d9d3c7;         /* skillelinjer (pynt, ikke informasjon) */
  --c-rule-strong: #77716a;  /* kant på skjemafelt: minst 3:1 (WCAG 1.4.11) */
  --c-accent: #1f4a9e;       /* blekkblå: lenker, fokus, primærknapp */
  --c-accent-strong: #16367a;/* hover på lenker og knapp */
  --c-on-accent: #f8f6f1;
  --c-focus: #1f4a9e;

  /* Status og merking: alltid sammen med tekst og form (WCAG 1.4.1) */
  --c-ok: #1d6b3c;      --c-ok-bg: #e2eee4;      /* byttet */
  --c-warn: #7a5200;    --c-warn-bg: #f4e9cf;    /* står */
  --c-err: #a32a1c;     --c-err-bg: #f7e4df;     /* feil i skjema */
  --c-neutral: #55514a; --c-neutral-bg: #e9e5dc; /* i dag, fjernet */

  /* Skrift */
  --font-serif: "Source Serif 4", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Diggs Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Skala (rem følger leserens innstilling, WCAG 1.4.4) */
  --step--1: 0.875rem;                               /* 14 px: metadata i mono */
  --step-0: 1.125rem;                                /* 18 px: brødtekst */
  --step-1: 1.3125rem;                               /* 21 px: h3 */
  --step-2: 1.625rem;                                /* 26 px: h2 */
  --step-3: clamp(1.875rem, 1.45rem + 1.4vw, 2.5rem);/* 30–40 px: h1 */
  --step-4: clamp(2rem, 1.35rem + 2.3vw, 3rem);      /* 32–48 px: forsidetittel */
  --ui-size: 1rem;                                   /* meny, knapper, skjemaetiketter */

  --leading: 1.6;
  --leading-ui: 1.4;
  --leading-tight: 1.18;

  /* Linjelengde: 33em ved 18 px gir 66–72 tegn i Source Serif 4 (målt, DESIGN.md 3.4) */
  --measure: 33em;

  /* Avstand: 4 px-trinn */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Rutenett */
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --margin-col: 10.5rem;  /* venstre marg: metadata, merking, innhold */
  --col-gap: 2.5rem;
  --bp-wide: 62rem;       /* dokumentasjon: media queries kan ikke lese variabler */

  /* Form */
  --radius: 2px;
  --rule-w: 1px;
  --focus-w: 3px;

  /* Bevegelse: bare ved hover og fokus, aldri ved scrolling */
  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-paper: #171613;
    --c-raised: #211f1b;
    --c-ink: #e8e4da;          /* ikke ren hvit: mindre utsmøring av hårstreker */
    --c-ink-2: #aaa499;
    --c-rule: #3a3830;
    --c-rule-strong: #8c877c;
    --c-accent: #9fb8ff;
    --c-accent-strong: #c3d2ff;
    --c-on-accent: #171613;
    --c-focus: #9fb8ff;

    --c-ok: #8fd3a5;      --c-ok-bg: #1d2e22;
    --c-warn: #e6c27a;    --c-warn-bg: #33291a;
    --c-err: #ffaa9c;     --c-err-bg: #3a201b;
    --c-neutral: #aaa499; --c-neutral-bg: #2a2924;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}