/* Krengo tokens, retning A «Film stock, strammet» (Ulrik 03.10, KRN-304: «A er best»). Én kilde for hele site/: lastes før style.css/pages.css/play/analyse.
   Kilder: media/inspo/2026-10-03-krengo-pro.md og media/inspo/2026-10-03-papir.md. Ankre = dagens verdier (målt til OKLCH i tmp/t384/ramps.mjs). */
:root{
  /* primitiver: nøytral (hue ~80) */
  --neutral-50:oklch(97.1% .002 68);  --neutral-100:oklch(92.9% .003 68); --neutral-200:oklch(87% .006 85);
  --neutral-300:oklch(78.1% .010 78); --neutral-400:oklch(67.9% .012 72); --neutral-500:oklch(60% .016 74);
  --neutral-600:oklch(52% .016 78);   --neutral-700:oklch(43% .013 76);   --neutral-800:oklch(32% .009 67);
  --neutral-900:oklch(23.1% .006 92); --neutral-950:oklch(16.9% .004 85);
  /* dagens ankre (beholdes eksakt) */
  --film:oklch(19.6% .010 89);        /* #171510 */
  --film-2:oklch(23.7% .010 81);      /* #211E19 */
  --paper:oklch(92.1% .024 86);       /* #ECE4D3 */
  --paper-2:oklch(88.7% .027 86);     /* #E2D9C6 */
  --cream:oklch(90.6% .027 86);       /* #E8DFCC */
  --ink:oklch(22.8% .009 75);         /* #1F1C18 */
  --muted-dark:oklch(66.6% .021 83);  /* #9A9386 */
  --muted-paper:oklch(44.5% .021 81); /* #5A5347 */
  /* primitiver: aksent (hue 38-40) */
  --lean-100:oklch(92.9% .036 39); --lean-200:oklch(87% .067 39); --lean-300:oklch(77.9% .105 40);
  --lean-400:oklch(68.5% .165 40);    /* #EC7044 tekst på film */
  --lean-500:oklch(61.6% .176 37);    /* #D9542B fyll/linje på film */
  --lean-600:oklch(57.7% .170 37);    /* #C94A23 fyll på papir, aldri tekst */
  --lean-700:oklch(47.1% .142 38);    /* #9A3513 tekst på papir */
  --lean-900:oklch(23% .065 38);

  --duration-micro:80ms; --duration-quick:150ms; --duration-fast:250ms; --duration-medium:350ms; --duration-slow:400ms; --stagger:40ms;
  --ease-out:cubic-bezier(.22,1,.36,1);

  --font-serif:'Newsreader',Georgia,serif;          /* OFL, Google Fonts */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace; /* OFL, Google Fonts */
  --step--1:.75rem; --step-0:1.125rem; --step-1:1.4rem; --step-2:1.75rem; --step-3:2.2rem; --step-4:2.75rem; /* ratio 1.25 fra 18 px */
  --measure:64ch; --tap:44px; --marg:clamp(20px,5vw,72px);
}
/* ---- T386: ekstra primitiver ---- */
:root{
  --film-rgb:23,21,16;           /* film som rgb for rgba(): vignett, hint-bokser */
  --ink-rgb:31,28,24;            /* ink som rgb: skygger og blekk på papir */
  --edge:#8C857A;                /* kantlinje på film (kontrollene; 3,2:1 mot film, ikke-tekst >=3) */
  --halation:#FF6A3A;            /* lys glød rundt den oransje linja, aldri tekst */
  --duration-very-slow:500ms;
  --ink-soft:oklch(26% .010 75); /* blekk som trekker inn: aldri ren svart */
  /* papir (media/inspo/2026-10-03-papir.md): tre statiske lag, ingen ekstern last. Tegnes bak innhold, aldri over tekst. */
  --paper-tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .22 0 0 0 0 .16 0 0 0 0 .09 0 0 0 .45 -.18'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23t)'/%3E%3C/svg%3E");
  --paper-fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .9' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .55 -.29'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23f)'/%3E%3C/svg%3E");
  --paper-cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .38 -.16'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23c)'/%3E%3C/svg%3E");
  /* papirflate = farge + variasjon. Brukes som `background:var(--paper-surface)`. Alfaene er målt mot kontrast (tmp/t386/contrast.mjs). */
  --paper-surface:
    var(--paper-tooth) 0 0/200px 200px,
    var(--paper-fibre) 0 0/320px 320px,
    var(--paper-cloud) 0 0/640px 640px,
    radial-gradient(120% 70% at 18% 0%,oklch(95.5% .020 88/.55),transparent 62%),
    radial-gradient(110% 60% at 100% 100%,oklch(88% .028 82/.35),transparent 65%),
    var(--paper);
  --paper-surface-2:
    var(--paper-tooth) 0 0/200px 200px,
    var(--paper-fibre) 0 0/320px 320px,
    var(--paper-2);
  /* papirets vekt: lett og tungt lag under, kant lyser øverst */
  --paper-lift:0 1px 0 oklch(97% .012 88/.7) inset,0 1px 2px rgba(var(--ink-rgb),.16),0 8px 18px -10px rgba(var(--ink-rgb),.38);
  --paper-shade:inset 0 16px 14px -14px rgba(var(--film-rgb),.42),inset 0 -16px 14px -14px rgba(var(--film-rgb),.34);
}
@media (prefers-contrast:more){:root{--paper-surface:var(--paper);--paper-surface-2:var(--paper-2);--paper-lift:0 0 0 1px var(--ink);--paper-shade:none;--ink-soft:var(--ink)}}
/* semantiske tokens: komponenter bruker kun disse */
:root,[data-ground="film"]{
  color-scheme:dark;
  --bg:var(--film); --bg-raised:var(--film-2); --text:var(--cream); --text-muted:var(--muted-dark);
  --accent-text:var(--lean-400); --accent-fill:var(--lean-500); --rule:oklch(90.6% .027 86/.18); --focus:var(--lean-400);
}
[data-ground="paper"]{
  color-scheme:light;
  --bg:var(--paper); --bg-raised:var(--paper-2); --text:var(--ink); --text-muted:var(--muted-paper);
  --accent-text:var(--lean-700); --accent-fill:var(--lean-600); --rule:oklch(22.8% .009 75/.22); --focus:var(--lean-700);
}
@media (prefers-reduced-motion:reduce){:root{--duration-micro:0ms;--duration-quick:0ms;--duration-very-slow:0ms;--duration-fast:0ms;--duration-medium:0ms;--duration-slow:0ms;--stagger:0ms}}