/* Material 3 design-tokens.
 *
 * GENERERT av scripts/bygg_m3_tokens.py — ikke rediger for hånd.
 * Kilde: Material 3 Design Kit i Figma, se skriptets docstring.
 *
 * Lys er default under :root. Mørk ligger under .dark — IKKE under
 * [data-theme="dark"], som ellers ville vært det opplagte valget.
 *
 * Grunnen er at de to attributtene betyr forskjellige ting her:
 * data-theme holder brukerens VALG (light/dark/system), mens .dark
 * holder RESULTATET. Står valget på 'system' og operativsystemet er
 * mørkt, er data-theme="system" mens .dark er satt. Hadde tokenene
 * hengt på [data-theme="dark"], ville de brukerne fått mørke
 * Tailwind-farger og lyse M3-tokens samtidig.
 *
 * .dark er dessuten det Tailwind selv bruker (darkMode: 'class'), så
 * de to lagene følger hverandre automatisk.
 */

:root {
  /* --- farge --- */
  --md-sys-color-error: #b3261e;
  --md-sys-color-error-container: #f9dedc;
  --md-sys-color-inverse-on-surface: #f5eff7;
  --md-sys-color-inverse-primary: #d0bcff;
  --md-sys-color-inverse-surface: #322f35;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-on-error-container: #852221;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-on-primary-container: #4f378a;
  --md-sys-color-on-primary-fixed: #21005d;
  --md-sys-color-on-primary-fixed-variant: #4f378b;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-on-secondary-container: #4a4459;
  --md-sys-color-on-secondary-fixed: #1d192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-on-surface: #1d1b20;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-on-tertiary-container: #633b48;
  --md-sys-color-on-tertiary-fixed: #31111d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-primary: #6750a4;
  --md-sys-color-primary-container: #eaddff;
  --md-sys-color-primary-fixed: #eaddff;
  --md-sys-color-primary-fixed-dim: #d0bcff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-secondary: #625b71;
  --md-sys-color-secondary-container: #e8def8;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #ccc2dc;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface: #fef7ff;
  --md-sys-color-surface-bright: #fef7ff;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-dim: #ded8e1;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-tertiary-container: #ffd8e4;
  --md-sys-color-tertiary-fixed: #ffd8e4;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;

  /* --- elevation --- */
  --md-sys-elevation-level1: 0px 1px 3px 1px #00000026, 0px 1px 2px 0px #0000004D;
  --md-sys-elevation-level2: 0px 2px 6px 2px #00000026, 0px 1px 2px 0px #0000004D;
  --md-sys-elevation-level3: 0px 1px 3px 0px #0000004D, 0px 4px 8px 3px #00000026;
  --md-sys-elevation-level4: 0px 2px 3px 0px #0000004D, 0px 6px 10px 4px #00000026;
  --md-sys-elevation-level5: 0px 4px 4px 0px #0000004D, 0px 8px 12px 6px #00000026;
  --md-sys-elevation-level0: none;

  /* --- shape --- */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-extra-extra-large: 48px;
  --md-sys-shape-corner-full: 9999px;

  /* --- typografi --- */
  --md-sys-typescale-font-family: "Roboto", "Inter", ui-sans-serif, system-ui, sans-serif;
  --md-sys-typescale-body-large-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-body-large-size: 16px;
  --md-sys-typescale-body-large-line-height: 24px;
  --md-sys-typescale-body-large-tracking: 0.5px;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-medium-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-line-height: 20px;
  --md-sys-typescale-body-medium-tracking: 0.25px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-small-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-body-small-size: 12px;
  --md-sys-typescale-body-small-line-height: 16px;
  --md-sys-typescale-body-small-tracking: 0.4px;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-display-large-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-display-large-size: 57px;
  --md-sys-typescale-display-large-line-height: 64px;
  --md-sys-typescale-display-large-tracking: -0.25px;
  --md-sys-typescale-display-large-weight: 400;
  --md-sys-typescale-display-medium-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-display-medium-size: 45px;
  --md-sys-typescale-display-medium-line-height: 52px;
  --md-sys-typescale-display-medium-tracking: 0px;
  --md-sys-typescale-display-medium-weight: 400;
  --md-sys-typescale-display-small-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-display-small-size: 36px;
  --md-sys-typescale-display-small-line-height: 44px;
  --md-sys-typescale-display-small-tracking: 0px;
  --md-sys-typescale-display-small-weight: 400;
  --md-sys-typescale-headline-large-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-headline-large-size: 32px;
  --md-sys-typescale-headline-large-line-height: 40px;
  --md-sys-typescale-headline-large-tracking: 0px;
  --md-sys-typescale-headline-large-weight: 400;
  --md-sys-typescale-headline-medium-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-headline-medium-size: 28px;
  --md-sys-typescale-headline-medium-line-height: 36px;
  --md-sys-typescale-headline-medium-tracking: 0px;
  --md-sys-typescale-headline-medium-weight: 400;
  --md-sys-typescale-headline-small-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-headline-small-size: 24px;
  --md-sys-typescale-headline-small-line-height: 32px;
  --md-sys-typescale-headline-small-tracking: 0px;
  --md-sys-typescale-headline-small-weight: 400;
  --md-sys-typescale-label-large-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-line-height: 20px;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-medium-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-label-medium-size: 12px;
  --md-sys-typescale-label-medium-line-height: 16px;
  --md-sys-typescale-label-medium-tracking: 0.5px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-small-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-label-small-size: 11px;
  --md-sys-typescale-label-small-line-height: 16px;
  --md-sys-typescale-label-small-tracking: 0.5px;
  --md-sys-typescale-label-small-weight: 500;
  --md-sys-typescale-title-large-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-title-large-size: 22px;
  --md-sys-typescale-title-large-line-height: 28px;
  --md-sys-typescale-title-large-tracking: 0px;
  --md-sys-typescale-title-large-weight: 400;
  --md-sys-typescale-title-medium-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-line-height: 24px;
  --md-sys-typescale-title-medium-tracking: 0.15px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-small-font: var(--md-sys-typescale-font-family);
  --md-sys-typescale-title-small-size: 14px;
  --md-sys-typescale-title-small-line-height: 20px;
  --md-sys-typescale-title-small-tracking: 0.1px;
  --md-sys-typescale-title-small-weight: 500;
}

.dark {
  /* --- farge --- */
  --md-sys-color-error: #f2b8b5;
  --md-sys-color-error-container: #8c1d18;
  --md-sys-color-inverse-on-surface: #322f35;
  --md-sys-color-inverse-primary: #6750a4;
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-on-error: #601410;
  --md-sys-color-on-error-container: #f9dedc;
  --md-sys-color-on-primary: #381e72;
  --md-sys-color-on-primary-container: #eaddff;
  --md-sys-color-on-primary-fixed: #21005d;
  --md-sys-color-on-primary-fixed-variant: #4f378b;
  --md-sys-color-on-secondary: #332d41;
  --md-sys-color-on-secondary-container: #e8def8;
  --md-sys-color-on-secondary-fixed: #1d192b;
  --md-sys-color-on-secondary-fixed-variant: #4a4458;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-on-tertiary: #492532;
  --md-sys-color-on-tertiary-container: #ffd8e4;
  --md-sys-color-on-tertiary-fixed: #31111d;
  --md-sys-color-on-tertiary-fixed-variant: #633b48;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-primary: #d0bcfe;
  --md-sys-color-primary-container: #4f378b;
  --md-sys-color-primary-fixed: #eaddff;
  --md-sys-color-primary-fixed-dim: #d0bcff;
  --md-sys-color-scrim: #000000;
  --md-sys-color-secondary: #ccc2dc;
  --md-sys-color-secondary-container: #4a4458;
  --md-sys-color-secondary-fixed: #e8def8;
  --md-sys-color-secondary-fixed-dim: #ccc2dc;
  --md-sys-color-shadow: #000000;
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-tertiary: #efb8c8;
  --md-sys-color-tertiary-container: #633b48;
  --md-sys-color-tertiary-fixed: #ffd8e4;
  --md-sys-color-tertiary-fixed-dim: #efb8c8;

  /* --- elevation --- */
  --md-sys-elevation-level1: 0px 1px 2px 0px #0000004D, 0px 1px 3px 1px #00000026;
  --md-sys-elevation-level2: 0px 1px 2px 0px #0000004D, 0px 2px 6px 2px #00000026;
  --md-sys-elevation-level3: 0px 1px 3px 0px #0000004D, 0px 4px 8px 3px #00000026;
  --md-sys-elevation-level4: 0px 2px 3px 0px #0000004D, 0px 6px 10px 4px #00000026;
  --md-sys-elevation-level5: 0px 4px 4px 0px #0000004D, 0px 8px 12px 6px #00000026;
}