/* GENERERT AV build/build.mjs — IKKE REDIGER.
 * Kilde: tokens/tokens.json. Kjør `node build/build.mjs` etter endring.
 * Konsern Design System v0.5.0
 */

:root {
  /* ---- avstand (navnet er pikselverdien) ---- */
  --kd-space-2: 2px;
  --kd-space-4: 4px;
  --kd-space-6: 6px;
  --kd-space-8: 8px;
  --kd-space-12: 12px;
  --kd-space-16: 16px;
  --kd-space-20: 20px;
  --kd-space-24: 24px;
  --kd-space-32: 32px;
  --kd-space-40: 40px;
  --kd-space-48: 48px;
  --kd-space-64: 64px;
  --kd-space-80: 80px;
  --kd-space-96: 96px;

  /* ---- hjørneradius ---- */
  --kd-radius-xs: 6px;
  --kd-radius-sm: 8px;
  --kd-radius-md: 10px;
  --kd-radius-lg: 14px;
  --kd-radius-xl: 20px;
  --kd-radius-pill: 999px;

  /* ---- typografi ---- */
  --kd-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --kd-font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
  --kd-font-heading: var(--kd-font-sans);   /* produktet kan sette sin egen */
  --kd-ikon: 1.25em;
  --kd-text-2xs: 0.6875rem;        /* eyebrow/versalstikkord */
  --kd-leading-2xs: 1.35;
  --kd-text-xs: 0.75rem;        /* badge, bildetekst */
  --kd-leading-xs: 1.4;
  --kd-text-sm: 0.875rem;        /* sekundærtekst, feltetikett */
  --kd-leading-sm: 1.45;
  --kd-text-md: 1rem;        /* brødtekst, input */
  --kd-leading-md: 1.55;
  --kd-text-lg: 1.125rem;        /* korttittel */
  --kd-leading-lg: 1.4;
  --kd-text-xl: 1.375rem;        /* seksjonsoverskrift */
  --kd-leading-xl: 1.3;
  --kd-text-2xl: 1.75rem;        /* sidetittel */
  --kd-leading-2xl: 1.25;
  --kd-text-3xl: 2.25rem;        /* nøkkeltall */
  --kd-leading-3xl: 1.15;
  --kd-text-4xl: 3rem;        /* kiosk-/tavletall */
  --kd-leading-4xl: 1.05;
  --kd-weight-normal: 400;
  --kd-weight-medium: 500;
  --kd-weight-semibold: 600;
  --kd-weight-bold: 700;

  /* ---- lagdeling ---- */
  --kd-z-base: 0;
  --kd-z-sticky: 20;
  --kd-z-nav: 30;
  --kd-z-dropdown: 40;
  --kd-z-overlay: 50;
  --kd-z-toast: 60;
  --kd-z-modal: 70;
  --kd-z-host-modal: 10000;

  /* ---- bevegelse ---- */
  --kd-motion-fast: 120ms;
  --kd-motion-base: 180ms;
  --kd-motion-slow: 260ms;
  --kd-motion-ease: cubic-bezier(.2, 0, .2, 1);

  /* ---- strekbredder, treffområde og fokus ---- */
  --kd-stroke-hairline: 1px;
  --kd-stroke-control: 1.5px;
  --kd-stroke-emphasis: 2px;
  --kd-stroke-signal: 4px;
  --kd-target-min: 44px;
  --kd-focus-width: 2px;
  --kd-focus-offset: 2px;

  /* ---- tetthet: standard (se karakterblokkene under) ---- */
  --kd-control-h: var(--kd-target-min);
  --kd-control-py: var(--kd-space-12);
  --kd-control-px: var(--kd-space-20);
  --kd-control-text: var(--kd-text-md);
  --kd-iconbtn: var(--kd-space-40);
  --kd-pad: var(--kd-space-20);
  --kd-row-py: var(--kd-space-12);
  --kd-cell-px: var(--kd-space-12);
  --kd-gap-sm: var(--kd-space-12);
  --kd-gap: var(--kd-space-16);
  --kd-gap-lg: var(--kd-space-20);
}

/* ════ Karakter — produktets akser, ikke merkevarens (tokens.json → karakter) ════ */

/* data-tetthet: kompakt | standard | romslig | tavle */
[data-tetthet="standard"] {
  --kd-control-h: var(--kd-target-min);
  --kd-control-py: var(--kd-space-12);
  --kd-control-px: var(--kd-space-20);
  --kd-control-text: var(--kd-text-md);
  --kd-iconbtn: var(--kd-space-40);
  --kd-pad: var(--kd-space-20);
  --kd-row-py: var(--kd-space-12);
  --kd-cell-px: var(--kd-space-12);
  --kd-gap-sm: var(--kd-space-12);
  --kd-gap: var(--kd-space-16);
  --kd-gap-lg: var(--kd-space-20);
}
[data-tetthet="kompakt"] {
  --kd-control-h: var(--kd-space-40);
  --kd-control-py: var(--kd-space-6);
  --kd-control-px: var(--kd-space-12);
  --kd-control-text: var(--kd-text-sm);
  --kd-iconbtn: var(--kd-space-32);
  --kd-pad: var(--kd-space-16);
  --kd-row-py: var(--kd-space-6);
  --kd-cell-px: var(--kd-space-8);
  --kd-gap-sm: var(--kd-space-8);
  --kd-gap: var(--kd-space-12);
  --kd-gap-lg: var(--kd-space-16);
}
[data-tetthet="romslig"] {
  --kd-control-h: var(--kd-space-48);
  --kd-control-py: var(--kd-space-12);
  --kd-control-px: var(--kd-space-24);
  --kd-control-text: var(--kd-text-lg);
  --kd-iconbtn: var(--kd-space-48);
  --kd-pad: var(--kd-space-24);
  --kd-row-py: var(--kd-space-16);
  --kd-cell-px: var(--kd-space-16);
  --kd-gap-sm: var(--kd-space-16);
  --kd-gap: var(--kd-space-20);
  --kd-gap-lg: var(--kd-space-24);
}
[data-tetthet="tavle"] {
  --kd-control-h: var(--kd-space-48);
  --kd-control-py: var(--kd-space-12);
  --kd-control-px: var(--kd-space-24);
  --kd-control-text: var(--kd-text-lg);
  --kd-iconbtn: var(--kd-space-48);
  --kd-pad: var(--kd-space-32);
  --kd-row-py: var(--kd-space-16);
  --kd-cell-px: var(--kd-space-16);
  --kd-gap-sm: var(--kd-space-16);
  --kd-gap: var(--kd-space-24);
  --kd-gap-lg: var(--kd-space-32);
  --kd-text-2xs: 0.875rem;
  --kd-text-xs: 1rem;
  --kd-text-sm: 1.125rem;
  --kd-text-md: 1.25rem;
  --kd-text-lg: 1.5rem;
  --kd-text-xl: 1.875rem;
  --kd-text-2xl: 2.25rem;
  --kd-text-3xl: 3rem;
  --kd-text-4xl: 4.5rem;
  --kd-stroke-signal: var(--kd-space-8);
}

/* data-flate: kort | linje | luft — «initial» lar komponenten bruke sin egen standard */
[data-flate="kort"] {
  --kd-card-bg: initial;
  --kd-card-border: initial;
  --kd-card-shadow: initial;
  --kd-card-pad: initial;
  --kd-card-head-rule: initial;
  --kd-card-head-pad: initial;
}
[data-flate="linje"] {
  --kd-card-bg: initial;
  --kd-card-border: initial;
  --kd-card-shadow: none;
  --kd-card-pad: initial;
  --kd-card-head-rule: initial;
  --kd-card-head-pad: initial;
}
[data-flate="luft"] {
  --kd-card-bg: transparent;
  --kd-card-border: transparent;
  --kd-card-shadow: none;
  --kd-card-pad: var(--kd-space-8) 0;
  --kd-card-head-rule: var(--kd-stroke-hairline) solid var(--kd-border-hairline);
  --kd-card-head-pad: var(--kd-space-8);
}

/* data-knapp: myk | pille | kantet — knappenes form, uavhengig av hjørnene ellers. */
[data-knapp="myk"] {
  --kd-knapp-radius: initial;
}
[data-knapp="pille"] {
  --kd-knapp-radius: var(--kd-radius-pill);
}
[data-knapp="kantet"] {
  --kd-knapp-radius: var(--kd-radius-xs);
}

/* data-overskrift: system | display | smal | serif — skriften i overskriftene.
   Bare skrifter som finnes uten nedlasting, med reserve per plattform. */
[data-overskrift="system"] { --kd-font-heading: var(--kd-font-sans); }
[data-overskrift="display"] { --kd-font-heading: 'Segoe UI Variable Display', 'SF Pro Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-overskrift="smal"] { --kd-font-heading: 'Bahnschrift', 'DIN Alternate', 'Avenir Next Condensed', 'Roboto Condensed', sans-serif-condensed, 'Arial Narrow', sans-serif; }
[data-overskrift="serif"] { --kd-font-heading: 'Cambria', 'Iowan Old Style', 'Georgia', 'Noto Serif', 'Times New Roman', serif; }

/* data-form: skarp | myk | rund — hjørnene. myk er standardskalaen. */
[data-form="myk"] {
  --kd-radius-xs: 6px;
  --kd-radius-sm: 8px;
  --kd-radius-md: 10px;
  --kd-radius-lg: 14px;
  --kd-radius-xl: 20px;
}
[data-form="skarp"] {
  --kd-radius-xs: 2px;
  --kd-radius-sm: 3px;
  --kd-radius-md: 4px;
  --kd-radius-lg: 6px;
  --kd-radius-xl: 8px;
}
[data-form="rund"] {
  --kd-radius-xs: 8px;
  --kd-radius-sm: 12px;
  --kd-radius-md: 14px;
  --kd-radius-lg: 18px;
  --kd-radius-xl: 24px;
}