/* Designtokens: «Rosemaling» – norsk folkekunst, slitt malt treverk. Dokumentert i docs/designsystem.md. */

@font-face {
  font-family: 'Alegreya';
  src: url('/assets/fonts/alegreya-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya';
  src: url('/assets/fonts/alegreya-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/assets/fonts/alegreya-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/assets/fonts/alegreya-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}

:root {
  /* Farger – målt kontrast mot --c-paper: blekk 12.7, blå 9.3, rød 6.6, grønn 5.6, dempet 6.5.
     Oker er dekor på lys bunn (2.4) – brukes bare som flate med mørk tekst (5.3) eller på blått (3.9, store elementer). */
  --c-paper: #efe3c8;          /* slitt linoljemalt kremhvitt */
  --c-paper-deep: #e4d3b0;
  --c-surface: #f7efdc;
  --c-ink: #2a1e16;            /* umbra */
  --c-ink-muted: #5e4b3a;
  --c-primary: #1e3a4c;        /* rosemalingsblå */
  --c-primary-deep: #152b39;
  --c-primary-soft: #dce3e1;
  --c-accent: #8e2a1f;         /* oksblodrød */
  --c-accent-deep: #6e1f16;
  --c-accent-soft: #f1ddd2;
  --c-ochre: #c08a2c;
  --c-ochre-light: #d9a845;
  --c-leaf: #4e5d2e;
  --c-cream: #f2e6cc;
  --c-line: #cbb48a;
  --c-line-strong: #8a7658;
  --c-focus: #1e3a4c;
  --c-shop: #bc0000;
  --c-jul: #8b2219;            /* julerød ull (topptekst) – krem 7.2, oker-lys 4.1 (bare stor tekst) */
  --c-jul-deep: #5e140f;
  --c-warn-bg: #f6e3c4;
  --c-warn-line: #a4652a;

  /* Tekstur: fin støy som gir slitt papir/malt tre (ren SVG, ingen bildefil). */
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .4' numOctaves='3' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .9  0 0 0 0 .86  0 0 0 0 .76  0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='400' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
  --orn-band: url('/assets/img/rose-band.svg');
  --orn-corner: url('/assets/img/rose-corner.webp');
  --orn-corner-br: url('/assets/img/rose-corner-br.webp');
  --orn-divider: url('/assets/img/rose-divider.webp');
  --jul-strikk: url('/assets/img/jul/strikk.svg');
  --jul-bord: url('/assets/img/jul/selburose-bord.svg');
  --jul-lys: url('/assets/img/jul/lysslynge.svg');
  --jul-sno: url('/assets/img/jul/sno.svg');

  /* Typografi */
  --f-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --f-sans: 'Alegreya Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-xs: 0.9rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-md: 1.25rem;
  --fs-lg: clamp(1.45rem, 1.25rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(1.85rem, 1.5rem + 1.6vw, 2.5rem);
  --fs-xxl: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);
  --lh-tight: 1.12;
  --lh-base: 1.55;

  /* Avstander (4px-skala) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --gutter: 1rem;

  /* Form: litt ujevne, håndmalte hjørner */
  --r-sm: 4px;
  --r-md: 7px 10px 8px 11px;
  --r-lg: 10px 16px 12px 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(42, 30, 22, 0.08), 0 3px 10px rgba(42, 30, 22, 0.08);
  --shadow-2: 0 8px 28px rgba(21, 43, 57, 0.28);
  --focus-ring: 0 0 0 3px var(--c-surface), 0 0 0 6px var(--c-focus);
  --frame: inset 0 0 0 2px var(--c-surface), inset 0 0 0 4px var(--c-ochre);

  /* Berøring og bredder */
  --tap: 44px;
  --w-read: 42rem;
  --w-page: 72rem;

  /* Brytepunkter (brukes i media queries, dokumentert her): 40rem, 56rem, 72rem */
  --motion: 180ms ease;
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}
@media (min-width: 72rem) {
  :root { --gutter: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms linear; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}