/* ==========================================================================
   Arche Design System — Design Tokens
   GENERATED FILE. Do not hand-edit.
   Source:    tokens/figma-tokens.json
              (Figma file (Arche Design System), read 2026-10-27 (after the link card, CTA band and page hero work))
   Generator: scripts/generate-tokens.mjs
   To change a value, change it in Figma, update the JSON, and run the generator.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Primitives (raw colors). Components never use these directly. ---------- */
  /* greece/blue */
  --arche-greece-blue-50: #E6ECF3;
  --arche-greece-blue-100: #CCDAE7;
  --arche-greece-blue-200: #9EB8D2;
  --arche-greece-blue-300: #7196BC;
  --arche-greece-blue-400: #396DA2;
  --arche-greece-blue-500: #014488;
  --arche-greece-blue-600: #013A74;
  --arche-greece-blue-700: #012E5C;
  --arche-greece-blue-800: #002244;
  --arche-greece-blue-900: #001429;

  /* sweden/yellow */
  --arche-sweden-yellow-50: #FFFAE6;
  --arche-sweden-yellow-100: #FFF5CC;
  --arche-sweden-yellow-200: #FFEC9E;
  --arche-sweden-yellow-300: #FFE370;
  --arche-sweden-yellow-400: #FFD838;
  --arche-sweden-yellow-500: #FFCD00;
  --arche-sweden-yellow-600: #D9AE00;
  --arche-sweden-yellow-700: #AD8B00;
  --arche-sweden-yellow-800: #806600;
  --arche-sweden-yellow-900: #4C3E00;

  /* norway/red */
  --arche-norway-red-50: #FAE7EB;
  --arche-norway-red-100: #F6CFD6;
  --arche-norway-red-200: #EEA4B2;
  --arche-norway-red-300: #E6798D;
  --arche-norway-red-400: #DC4561;
  --arche-norway-red-500: #D21034;
  --arche-norway-red-600: #B20E2C;
  --arche-norway-red-700: #8F0B23;
  --arche-norway-red-800: #69081A;
  --arche-norway-red-900: #3F0510;

  /* neutral */
  --arche-neutral-white: #FFFFFF;
  --arche-neutral-50: #F5F5F5;
  --arche-neutral-100: #E5E5E5;
  --arche-neutral-200: #CCCCCC;
  --arche-neutral-300: #B3B3B3;
  --arche-neutral-400: #999999;
  --arche-neutral-500: #808080;
  --arche-neutral-600: #666666;
  --arche-neutral-700: #4D4D4D;
  --arche-neutral-800: #333333;
  --arche-neutral-900: #1A1A1A;
  --arche-neutral-black: #000000;

  /* system/alert */
  --arche-alert-50: #FFE6E6;
  --arche-alert-100: #FFCCCC;
  --arche-alert-200: #FF9E9E;
  --arche-alert-300: #FF7070;
  --arche-alert-400: #FF3838;
  --arche-alert-500: #FF0000;
  --arche-alert-600: #D90000;
  --arche-alert-700: #AD0000;
  --arche-alert-800: #800000;
  --arche-alert-900: #4C0000;

  /* system/success */
  --arche-success-50: #EAF6EC;
  --arche-success-100: #D4EDDA;
  --arche-success-200: #ADDEB8;
  --arche-success-300: #87CE97;
  --arche-success-400: #57BA6E;
  --arche-success-500: #28A745;
  --arche-success-600: #228E3B;
  --arche-success-700: #1B722F;
  --arche-success-800: #145422;
  --arche-success-900: #0C3215;

  /* system/warning */
  --arche-warning-50: #FFF3E6;
  --arche-warning-100: #FFE7CC;
  --arche-warning-200: #FFD19E;
  --arche-warning-300: #FFBB70;
  --arche-warning-400: #FFA038;
  --arche-warning-500: #FF8500;
  --arche-warning-600: #D97100;
  --arche-warning-700: #AD5A00;
  --arche-warning-800: #804200;
  --arche-warning-900: #4C2800;

  /* neutral */
  --arche-black-alpha-50: rgb(0 0 0 / 50%);
  --arche-black-alpha-90: rgb(0 0 0 / 90%);

  /* norway/blue */
  --arche-norway-blue-50: #E5EBF5;
  --arche-norway-blue-100: #CCD7EA;
  --arche-norway-blue-200: #9EB3D8;
  --arche-norway-blue-300: #708EC5;
  --arche-norway-blue-400: #3862AF;
  --arche-norway-blue-500: #003698;
  --arche-norway-blue-600: #002E82;
  --arche-norway-blue-700: #002567;
  --arche-norway-blue-800: #001B4C;
  --arche-norway-blue-900: #00102D;

  /* sweden/blue */
  --arche-sweden-blue-50: #E5EEF4;
  --arche-sweden-blue-100: #CCDCE9;
  --arche-sweden-blue-200: #9EBDD6;
  --arche-sweden-blue-300: #709EC2;
  --arche-sweden-blue-400: #3878AB;
  --arche-sweden-blue-500: #005293;
  --arche-sweden-blue-600: #00467D;
  --arche-sweden-blue-700: #003763;
  --arche-sweden-blue-800: #00294A;
  --arche-sweden-blue-900: #00182C;

  /* swiss/red */
  --arche-swiss-red-web: #FF0000;
  --arche-swiss-red-print: #DA291C;

  /* ---------- Spacing and strokes ---------- */
  --arche-space-fine-4: 4px;
  --arche-space-fine-8: 8px;
  --arche-space-fine-12: 12px;
  --arche-space-fine-16: 16px;
  --arche-space-base-8: 8px;
  --arche-space-base-16: 16px;
  --arche-space-base-24: 24px;
  --arche-space-base-32: 32px;
  --arche-space-base-40: 40px;
  --arche-space-base-48: 48px;
  --arche-space-base-64: 64px;
  --arche-space-base-80: 80px;
  --arche-space-base-96: 96px;
  --arche-space-base-128: 128px;
  --arche-stroke-1: 1px;
  --arche-stroke-2: 2px;
  --arche-stroke-4: 4px;

  /* ---------- Role tokens, Light mode (default). Components use these. ---------- */
  /* surface */
  --arche-surface-neutral-base: var(--arche-neutral-white);
  --arche-surface-neutral-raised: var(--arche-neutral-white);
  --arche-surface-neutral-inverse: var(--arche-neutral-900);
  --arche-surface-brand-primary: var(--arche-greece-blue-500);
  --arche-surface-brand-primary-subtle: var(--arche-greece-blue-50);
  --arche-surface-brand-secondary: var(--arche-sweden-yellow-500);
  --arche-surface-brand-secondary-subtle: var(--arche-sweden-yellow-50);
  --arche-surface-system-alert: var(--arche-alert-50);
  --arche-surface-system-success: var(--arche-success-50);
  --arche-surface-system-warning: var(--arche-warning-50);

  /* border */
  --arche-border-neutral-default: var(--arche-neutral-200);
  --arche-border-neutral-strong: var(--arche-neutral-500);
  --arche-border-neutral-emphasis: var(--arche-neutral-800);
  --arche-border-brand-default: var(--arche-greece-blue-500);
  --arche-border-system-alert: var(--arche-alert-500);
  --arche-border-system-success: var(--arche-success-500);
  --arche-border-system-warning: var(--arche-warning-500);

  /* text */
  --arche-text-neutral-primary: var(--arche-neutral-900);
  --arche-text-neutral-secondary: var(--arche-neutral-600);
  --arche-text-neutral-disabled: var(--arche-neutral-400);
  --arche-text-neutral-inverse: var(--arche-neutral-white);
  --arche-text-brand-primary: var(--arche-greece-blue-500);
  --arche-text-brand-secondary: var(--arche-sweden-yellow-500);
  --arche-text-brand-tertiary-accent: var(--arche-norway-red-500);
  --arche-text-system-alert: var(--arche-alert-700);
  --arche-text-system-success: var(--arche-success-700);
  --arche-text-system-warning: var(--arche-warning-700);

  /* icon */
  --arche-icon-neutral-default: var(--arche-neutral-900);
  --arche-icon-neutral-muted: var(--arche-neutral-400);
  --arche-icon-neutral-inverse: var(--arche-neutral-white);
  --arche-icon-brand-default: var(--arche-greece-blue-500);
  --arche-icon-system-alert: var(--arche-alert-500);
  --arche-icon-system-success: var(--arche-success-500);
  --arche-icon-system-warning: var(--arche-warning-500);

  /* interactive */
  --arche-interactive-button-primary-fill-default: var(--arche-greece-blue-500);
  --arche-interactive-button-primary-fill-hover: var(--arche-greece-blue-400);
  --arche-interactive-button-primary-fill-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-primary-fill-disabled: var(--arche-neutral-200);
  --arche-interactive-button-secondary-fill-default: var(--arche-neutral-white);
  --arche-interactive-button-secondary-fill-hover: var(--arche-greece-blue-50);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-greece-blue-100);
  --arche-interactive-button-secondary-fill-disabled: var(--arche-neutral-white);
  --arche-interactive-button-secondary-border-default: var(--arche-greece-blue-500);
  --arche-interactive-button-secondary-border-disabled: var(--arche-neutral-400);
  --arche-interactive-button-secondary-border-inverse: var(--arche-neutral-white);
  --arche-interactive-link-text-nav-default: var(--arche-neutral-900);
  --arche-interactive-link-text-nav-hover: var(--arche-neutral-900);
  --arche-interactive-link-text-nav-pressed: var(--arche-neutral-black);
  --arche-interactive-link-text-nav-active: var(--arche-neutral-900);
  --arche-interactive-link-text-nav-disabled: var(--arche-neutral-300);
  --arche-interactive-button-primary-fill-active: var(--arche-greece-blue-700);
  --arche-interactive-button-secondary-fill-active: var(--arche-greece-blue-50);

  /* surface */
  --arche-surface-overlay-scrim: var(--arche-black-alpha-50);

  /* text */
  --arche-text-neutral-body: var(--arche-neutral-900);
  --arche-text-on-brand-primary: var(--arche-neutral-white);
  --arche-text-on-brand-body: var(--arche-greece-blue-50);
  --arche-text-on-brand-secondary: var(--arche-greece-blue-100);
  --arche-text-on-brand-name: var(--arche-sweden-yellow-500);

  /* border */
  --arche-border-focus-ring: var(--arche-neutral-black);
  --arche-border-focus-ring-on-brand: var(--arche-neutral-white);
  --arche-border-on-brand-divider: var(--arche-greece-blue-300);

  /* interactive */
  --arche-interactive-progress: var(--arche-greece-blue-500);
  --arche-interactive-link-nav-indicator: var(--arche-greece-blue-500);
  --arche-interactive-button-primary-label-default: var(--arche-neutral-white);
  --arche-interactive-button-primary-indicator: var(--arche-neutral-white);
  --arche-interactive-button-secondary-border-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-secondary-label-default: var(--arche-greece-blue-500);
  --arche-interactive-button-secondary-label-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-secondary-indicator: var(--arche-greece-blue-500);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-greece-blue-50);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-greece-blue-100);
  --arche-interactive-button-tertiary-fill-active: var(--arche-greece-blue-50);
  --arche-interactive-button-tertiary-label-default: var(--arche-greece-blue-500);
  --arche-interactive-button-tertiary-label-hover: var(--arche-greece-blue-600);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-tertiary-label-active: var(--arche-greece-blue-500);
  --arche-interactive-button-tertiary-indicator: var(--arche-greece-blue-500);
  --arche-interactive-button-secondary-on-brand-border: var(--arche-neutral-white);
  --arche-interactive-button-secondary-on-brand-label: var(--arche-neutral-white);
  --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-greece-blue-700);

  /* text */
  --arche-text-on-brand-switch-selected: var(--arche-greece-blue-500);

  /* surface */
  --arche-surface-on-brand-switch-selected: var(--arche-neutral-white);

  /* text */
  --arche-text-on-brand-title: var(--arche-sweden-yellow-500);

  /* surface */
  --arche-surface-brand-secondary-band: var(--arche-sweden-yellow-500);

  /* text */
  --arche-text-on-secondary-primary: var(--arche-neutral-900);
  --arche-text-on-secondary-body: var(--arche-neutral-800);

  /* border */
  --arche-border-focus-ring-on-secondary: var(--arche-neutral-900);

  /* logo */
  --arche-logo-on-page-primary-box: var(--arche-greece-blue-500);
  --arche-logo-on-page-primary-letters: var(--arche-neutral-white);
  --arche-logo-on-page-secondary-line: var(--arche-greece-blue-500);
  --arche-logo-on-brand-primary-box: var(--arche-neutral-white);
  --arche-logo-on-brand-primary-letters: var(--arche-greece-blue-500);
  --arche-logo-on-brand-secondary-line: var(--arche-neutral-white);
  --arche-logo-on-secondary-primary-box: var(--arche-greece-blue-500);
  --arche-logo-on-secondary-primary-letters: var(--arche-neutral-white);
  --arche-logo-on-secondary-secondary-line: var(--arche-greece-blue-500);

  /* icon */
  --arche-icon-on-brand-default: var(--arche-neutral-white);

  /* surface */
  --arche-surface-overlay-scrim-strong: var(--arche-black-alpha-90);
  --arche-surface-overlay-bar: var(--arche-neutral-800);
  --arche-surface-brand-accent: var(--arche-norway-red-500);

  /* selection */
  --arche-selection-background: var(--arche-sweden-yellow-500);
  --arche-selection-text: var(--arche-neutral-900);

  /* interactive */
  --arche-interactive-link-default: var(--arche-greece-blue-500);

  /* border */
  --arche-border-on-brand-cross-line: var(--arche-neutral-white);

  /* accent */
  --arche-accent-rule: var(--arche-norway-red-500);
  --arche-accent-numeral: var(--arche-greece-blue-500);

  /* interactive */
  --arche-interactive-button-primary-on-brand-fill: var(--arche-neutral-white);
  --arche-interactive-button-primary-on-brand-label: var(--arche-greece-blue-500);
  --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-greece-blue-400);
  --arche-interactive-button-primary-on-brand-fill-hover: var(--arche-greece-blue-50);
  --arche-interactive-button-primary-on-brand-fill-pressed: var(--arche-greece-blue-100);
  --arche-interactive-link-on-brand-default: var(--arche-neutral-white);
  --arche-interactive-link-on-brand-hover: var(--arche-neutral-white);
  --arche-interactive-link-on-brand-pressed: var(--arche-greece-blue-50);
  --arche-interactive-link-on-brand-disabled: var(--arche-greece-blue-100);
  --arche-interactive-button-primary-on-brand-indicator: var(--arche-greece-blue-300);

  /* ---------- Focus ring ---------- */
  --arche-focus-ring-width: var(--arche-stroke-4);
  --arche-focus-ring-offset: 2px;

  /* ---------- Motion: Quad ease-in-out ---------- */
  --arche-motion-ease: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --arche-motion-fast: 150ms;   /* hovers */
  --arche-motion-medium: 250ms; /* accordion, nav */
  --arche-motion-slow: 400ms;   /* menu overlay, theme switch */

  /* ---------- Type: fixed parts of each text style ---------- */
  --arche-font-head: 'Archivo', sans-serif;
  --arche-font-body: 'Work Sans', sans-serif;
  --arche-type-display-font: 'Archivo', sans-serif;
  --arche-type-display-weight: 700;
  --arche-type-display-letter-spacing: 0;
  --arche-type-display-text-transform: none;
  --arche-type-h1-font: 'Archivo', sans-serif;
  --arche-type-h1-weight: 700;
  --arche-type-h1-letter-spacing: 0;
  --arche-type-h1-text-transform: none;
  --arche-type-h2-font: 'Archivo', sans-serif;
  --arche-type-h2-weight: 700;
  --arche-type-h2-letter-spacing: 0;
  --arche-type-h2-text-transform: none;
  --arche-type-h3-font: 'Archivo', sans-serif;
  --arche-type-h3-weight: 600;
  --arche-type-h3-letter-spacing: 0;
  --arche-type-h3-text-transform: none;
  --arche-type-subhead-font: 'Archivo', sans-serif;
  --arche-type-subhead-weight: 500;
  --arche-type-subhead-letter-spacing: 0;
  --arche-type-subhead-text-transform: none;
  --arche-type-quote-font: 'Archivo', sans-serif;
  --arche-type-quote-weight: 500;
  --arche-type-quote-letter-spacing: 0;
  --arche-type-quote-text-transform: none;
  --arche-type-stat-font: 'Archivo', sans-serif;
  --arche-type-stat-weight: 700;
  --arche-type-stat-letter-spacing: 0;
  --arche-type-stat-text-transform: none;
  --arche-type-lead-font: 'Work Sans', sans-serif;
  --arche-type-lead-weight: 400;
  --arche-type-lead-letter-spacing: 0;
  --arche-type-lead-text-transform: none;
  --arche-type-body-font: 'Work Sans', sans-serif;
  --arche-type-body-weight: 400;
  --arche-type-body-letter-spacing: 0;
  --arche-type-body-text-transform: none;
  --arche-type-body-medium-font: 'Work Sans', sans-serif;
  --arche-type-body-medium-weight: 500;
  --arche-type-body-medium-letter-spacing: 0;
  --arche-type-body-medium-text-transform: none;
  --arche-type-body-semibold-font: 'Work Sans', sans-serif;
  --arche-type-body-semibold-weight: 600;
  --arche-type-body-semibold-letter-spacing: 0;
  --arche-type-body-semibold-text-transform: none;
  --arche-type-small-font: 'Work Sans', sans-serif;
  --arche-type-small-weight: 400;
  --arche-type-small-letter-spacing: 0;
  --arche-type-small-text-transform: none;
  --arche-type-button-font: 'Work Sans', sans-serif;
  --arche-type-button-weight: 600;
  --arche-type-button-letter-spacing: 0;
  --arche-type-button-text-transform: none;
  --arche-type-label-font: 'Work Sans', sans-serif;
  --arche-type-label-weight: 600;
  --arche-type-label-letter-spacing: 0.06em;
  --arche-type-label-text-transform: uppercase;
  --arche-type-fine-print-font: 'Work Sans', sans-serif;
  --arche-type-fine-print-weight: 400;
  --arche-type-fine-print-letter-spacing: 0;
  --arche-type-fine-print-text-transform: none;

  /* ---------- Type: sizes, Mobile (up to 767px) ---------- */
  --arche-type-display-size: 3rem;
  --arche-type-display-line: 3.5rem;
  --arche-type-h1-size: 2.25rem;
  --arche-type-h1-line: 2.75rem;
  --arche-type-h2-size: 1.75rem;
  --arche-type-h2-line: 2.25rem;
  --arche-type-h3-size: 1.375rem;
  --arche-type-h3-line: 1.75rem;
  --arche-type-subhead-size: 1.125rem;
  --arche-type-subhead-line: 1.5rem;
  --arche-type-quote-size: 1.5rem;
  --arche-type-quote-line: 2rem;
  --arche-type-stat-size: 2.5rem;
  --arche-type-stat-line: 2.75rem;
  --arche-type-lead-size: 1rem;
  --arche-type-lead-line: 1.5rem;
  --arche-type-body-size: 0.9375rem;
  --arche-type-body-line: 1.375rem;
  --arche-type-body-medium-size: 0.9375rem;
  --arche-type-body-medium-line: 1.375rem;
  --arche-type-body-semibold-size: 0.9375rem;
  --arche-type-body-semibold-line: 1.375rem;
  --arche-type-small-size: 0.875rem;
  --arche-type-small-line: 1.25rem;
  --arche-type-button-size: 1rem;
  --arche-type-button-line: 1.5rem;
  --arche-type-label-size: 0.75rem;
  --arche-type-label-line: 1rem;
  --arche-type-fine-print-size: 0.75rem;
  --arche-type-fine-print-line: 1.125rem;
}

/* ---------- Type: sizes, Tablet (768px to 1023px) ---------- */
@media (min-width: 768px) {
  :root {
    --arche-type-display-size: 4rem;
    --arche-type-display-line: 4.5rem;
    --arche-type-h1-size: 2.75rem;
    --arche-type-h1-line: 3.25rem;
    --arche-type-h2-size: 2rem;
    --arche-type-h2-line: 2.5rem;
    --arche-type-h3-size: 1.5rem;
    --arche-type-h3-line: 1.875rem;
    --arche-type-subhead-size: 1.125rem;
    --arche-type-subhead-line: 1.5rem;
    --arche-type-quote-size: 1.75rem;
    --arche-type-quote-line: 2.25rem;
    --arche-type-stat-size: 3rem;
    --arche-type-stat-line: 3.25rem;
    --arche-type-lead-size: 1.125rem;
    --arche-type-lead-line: 1.75rem;
    --arche-type-body-size: 1rem;
    --arche-type-body-line: 1.5rem;
    --arche-type-body-medium-size: 1rem;
    --arche-type-body-medium-line: 1.5rem;
    --arche-type-body-semibold-size: 1rem;
    --arche-type-body-semibold-line: 1.5rem;
    --arche-type-small-size: 0.875rem;
    --arche-type-small-line: 1.25rem;
    --arche-type-button-size: 1rem;
    --arche-type-button-line: 1.5rem;
    --arche-type-label-size: 0.8125rem;
    --arche-type-label-line: 1rem;
    --arche-type-fine-print-size: 0.75rem;
    --arche-type-fine-print-line: 1.125rem;
  }
}

/* ---------- Type: sizes, Desktop (1024px and up) ---------- */
@media (min-width: 1024px) {
  :root {
    --arche-type-display-size: 5.5rem;
    --arche-type-display-line: 6rem;
    --arche-type-h1-size: 3.5rem;
    --arche-type-h1-line: 4rem;
    --arche-type-h2-size: 2.5rem;
    --arche-type-h2-line: 3rem;
    --arche-type-h3-size: 1.5rem;
    --arche-type-h3-line: 1.875rem;
    --arche-type-subhead-size: 1.125rem;
    --arche-type-subhead-line: 1.5rem;
    --arche-type-quote-size: 2rem;
    --arche-type-quote-line: 2.5rem;
    --arche-type-stat-size: 3.5rem;
    --arche-type-stat-line: 3.75rem;
    --arche-type-lead-size: 1.125rem;
    --arche-type-lead-line: 1.75rem;
    --arche-type-body-size: 1rem;
    --arche-type-body-line: 1.5rem;
    --arche-type-body-medium-size: 1rem;
    --arche-type-body-medium-line: 1.5rem;
    --arche-type-body-semibold-size: 1rem;
    --arche-type-body-semibold-line: 1.5rem;
    --arche-type-small-size: 0.875rem;
    --arche-type-small-line: 1.25rem;
    --arche-type-button-size: 1rem;
    --arche-type-button-line: 1.5rem;
    --arche-type-label-size: 0.8125rem;
    --arche-type-label-line: 1rem;
    --arche-type-fine-print-size: 0.75rem;
    --arche-type-fine-print-line: 1.125rem;
  }
}

/* ---------- Dark mode, set in two places ----------
   Only tokens whose Dark value differs from Light are listed.
   1. Manual choice: <html data-theme="dark">
   2. Browser is set to dark and no manual "light" choice was made. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --arche-surface-neutral-base: var(--arche-neutral-900);
  --arche-surface-neutral-raised: var(--arche-neutral-800);
  --arche-surface-neutral-inverse: var(--arche-neutral-50);
  --arche-surface-brand-primary-subtle: var(--arche-greece-blue-700);
  --arche-surface-brand-secondary: var(--arche-sweden-yellow-800);
  --arche-surface-brand-secondary-subtle: var(--arche-sweden-yellow-900);
  --arche-surface-system-alert: var(--arche-alert-900);
  --arche-surface-system-success: var(--arche-success-900);
  --arche-surface-system-warning: var(--arche-warning-900);
  --arche-border-neutral-default: var(--arche-neutral-700);
  --arche-border-neutral-emphasis: var(--arche-neutral-100);
  --arche-border-brand-default: var(--arche-greece-blue-400);
  --arche-border-system-alert: var(--arche-alert-400);
  --arche-border-system-success: var(--arche-success-400);
  --arche-border-system-warning: var(--arche-warning-400);
  --arche-text-neutral-primary: var(--arche-neutral-white);
  --arche-text-neutral-secondary: var(--arche-neutral-300);
  --arche-text-neutral-inverse: var(--arche-neutral-900);
  --arche-text-brand-primary: var(--arche-greece-blue-200);
  --arche-text-brand-secondary: var(--arche-sweden-yellow-300);
  --arche-text-brand-tertiary-accent: var(--arche-norway-red-400);
  --arche-text-system-alert: var(--arche-alert-300);
  --arche-text-system-success: var(--arche-success-300);
  --arche-text-system-warning: var(--arche-warning-300);
  --arche-icon-neutral-default: var(--arche-neutral-white);
  --arche-icon-neutral-muted: var(--arche-neutral-600);
  --arche-icon-neutral-inverse: var(--arche-neutral-900);
  --arche-icon-brand-default: var(--arche-greece-blue-300);
  --arche-icon-system-alert: var(--arche-alert-400);
  --arche-icon-system-success: var(--arche-success-400);
  --arche-icon-system-warning: var(--arche-warning-400);
  --arche-interactive-button-primary-fill-default: var(--arche-greece-blue-200);
  --arche-interactive-button-primary-fill-hover: var(--arche-greece-blue-100);
  --arche-interactive-button-primary-fill-pressed: var(--arche-greece-blue-300);
  --arche-interactive-button-primary-fill-disabled: var(--arche-neutral-700);
  --arche-interactive-button-secondary-fill-default: var(--arche-neutral-900);
  --arche-interactive-button-secondary-fill-hover: var(--arche-greece-blue-800);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-secondary-fill-disabled: var(--arche-neutral-900);
  --arche-interactive-button-secondary-border-default: var(--arche-greece-blue-200);
  --arche-interactive-button-secondary-border-disabled: var(--arche-neutral-600);
  --arche-interactive-button-secondary-border-inverse: var(--arche-neutral-900);
  --arche-interactive-link-text-nav-default: var(--arche-neutral-white);
  --arche-interactive-link-text-nav-hover: var(--arche-neutral-white);
  --arche-interactive-link-text-nav-pressed: var(--arche-neutral-100);
  --arche-interactive-link-text-nav-active: var(--arche-neutral-white);
  --arche-interactive-link-text-nav-disabled: var(--arche-neutral-700);
  --arche-interactive-button-primary-fill-active: var(--arche-greece-blue-300);
  --arche-interactive-button-secondary-fill-active: var(--arche-greece-blue-800);
  --arche-text-neutral-body: var(--arche-neutral-100);
  --arche-border-focus-ring: var(--arche-neutral-white);
  --arche-interactive-progress: var(--arche-greece-blue-300);
  --arche-interactive-link-nav-indicator: var(--arche-greece-blue-200);
  --arche-interactive-button-primary-label-default: var(--arche-greece-blue-900);
  --arche-interactive-button-primary-indicator: var(--arche-greece-blue-900);
  --arche-interactive-button-secondary-border-pressed: var(--arche-greece-blue-100);
  --arche-interactive-button-secondary-label-default: var(--arche-greece-blue-200);
  --arche-interactive-button-secondary-label-pressed: var(--arche-greece-blue-100);
  --arche-interactive-button-secondary-indicator: var(--arche-greece-blue-200);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-greece-blue-800);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-greece-blue-700);
  --arche-interactive-button-tertiary-fill-active: var(--arche-greece-blue-800);
  --arche-interactive-button-tertiary-label-default: var(--arche-greece-blue-200);
  --arche-interactive-button-tertiary-label-hover: var(--arche-greece-blue-100);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-greece-blue-50);
  --arche-interactive-button-tertiary-label-active: var(--arche-greece-blue-200);
  --arche-interactive-button-tertiary-indicator: var(--arche-greece-blue-200);
  --arche-logo-on-page-secondary-line: var(--arche-greece-blue-200);
  --arche-surface-brand-accent: var(--arche-norway-red-400);
  --arche-interactive-link-default: var(--arche-greece-blue-200);
  --arche-accent-rule: var(--arche-norway-red-400);
  --arche-accent-numeral: var(--arche-greece-blue-200);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --arche-surface-neutral-base: var(--arche-neutral-900);
    --arche-surface-neutral-raised: var(--arche-neutral-800);
    --arche-surface-neutral-inverse: var(--arche-neutral-50);
    --arche-surface-brand-primary-subtle: var(--arche-greece-blue-700);
    --arche-surface-brand-secondary: var(--arche-sweden-yellow-800);
    --arche-surface-brand-secondary-subtle: var(--arche-sweden-yellow-900);
    --arche-surface-system-alert: var(--arche-alert-900);
    --arche-surface-system-success: var(--arche-success-900);
    --arche-surface-system-warning: var(--arche-warning-900);
    --arche-border-neutral-default: var(--arche-neutral-700);
    --arche-border-neutral-emphasis: var(--arche-neutral-100);
    --arche-border-brand-default: var(--arche-greece-blue-400);
    --arche-border-system-alert: var(--arche-alert-400);
    --arche-border-system-success: var(--arche-success-400);
    --arche-border-system-warning: var(--arche-warning-400);
    --arche-text-neutral-primary: var(--arche-neutral-white);
    --arche-text-neutral-secondary: var(--arche-neutral-300);
    --arche-text-neutral-inverse: var(--arche-neutral-900);
    --arche-text-brand-primary: var(--arche-greece-blue-200);
    --arche-text-brand-secondary: var(--arche-sweden-yellow-300);
    --arche-text-brand-tertiary-accent: var(--arche-norway-red-400);
    --arche-text-system-alert: var(--arche-alert-300);
    --arche-text-system-success: var(--arche-success-300);
    --arche-text-system-warning: var(--arche-warning-300);
    --arche-icon-neutral-default: var(--arche-neutral-white);
    --arche-icon-neutral-muted: var(--arche-neutral-600);
    --arche-icon-neutral-inverse: var(--arche-neutral-900);
    --arche-icon-brand-default: var(--arche-greece-blue-300);
    --arche-icon-system-alert: var(--arche-alert-400);
    --arche-icon-system-success: var(--arche-success-400);
    --arche-icon-system-warning: var(--arche-warning-400);
    --arche-interactive-button-primary-fill-default: var(--arche-greece-blue-200);
    --arche-interactive-button-primary-fill-hover: var(--arche-greece-blue-100);
    --arche-interactive-button-primary-fill-pressed: var(--arche-greece-blue-300);
    --arche-interactive-button-primary-fill-disabled: var(--arche-neutral-700);
    --arche-interactive-button-secondary-fill-default: var(--arche-neutral-900);
    --arche-interactive-button-secondary-fill-hover: var(--arche-greece-blue-800);
    --arche-interactive-button-secondary-fill-pressed: var(--arche-greece-blue-700);
    --arche-interactive-button-secondary-fill-disabled: var(--arche-neutral-900);
    --arche-interactive-button-secondary-border-default: var(--arche-greece-blue-200);
    --arche-interactive-button-secondary-border-disabled: var(--arche-neutral-600);
    --arche-interactive-button-secondary-border-inverse: var(--arche-neutral-900);
    --arche-interactive-link-text-nav-default: var(--arche-neutral-white);
    --arche-interactive-link-text-nav-hover: var(--arche-neutral-white);
    --arche-interactive-link-text-nav-pressed: var(--arche-neutral-100);
    --arche-interactive-link-text-nav-active: var(--arche-neutral-white);
    --arche-interactive-link-text-nav-disabled: var(--arche-neutral-700);
    --arche-interactive-button-primary-fill-active: var(--arche-greece-blue-300);
    --arche-interactive-button-secondary-fill-active: var(--arche-greece-blue-800);
    --arche-text-neutral-body: var(--arche-neutral-100);
    --arche-border-focus-ring: var(--arche-neutral-white);
    --arche-interactive-progress: var(--arche-greece-blue-300);
    --arche-interactive-link-nav-indicator: var(--arche-greece-blue-200);
    --arche-interactive-button-primary-label-default: var(--arche-greece-blue-900);
    --arche-interactive-button-primary-indicator: var(--arche-greece-blue-900);
    --arche-interactive-button-secondary-border-pressed: var(--arche-greece-blue-100);
    --arche-interactive-button-secondary-label-default: var(--arche-greece-blue-200);
    --arche-interactive-button-secondary-label-pressed: var(--arche-greece-blue-100);
    --arche-interactive-button-secondary-indicator: var(--arche-greece-blue-200);
    --arche-interactive-button-tertiary-fill-hover: var(--arche-greece-blue-800);
    --arche-interactive-button-tertiary-fill-pressed: var(--arche-greece-blue-700);
    --arche-interactive-button-tertiary-fill-active: var(--arche-greece-blue-800);
    --arche-interactive-button-tertiary-label-default: var(--arche-greece-blue-200);
    --arche-interactive-button-tertiary-label-hover: var(--arche-greece-blue-100);
    --arche-interactive-button-tertiary-label-pressed: var(--arche-greece-blue-50);
    --arche-interactive-button-tertiary-label-active: var(--arche-greece-blue-200);
    --arche-interactive-button-tertiary-indicator: var(--arche-greece-blue-200);
    --arche-logo-on-page-secondary-line: var(--arche-greece-blue-200);
    --arche-surface-brand-accent: var(--arche-norway-red-400);
    --arche-interactive-link-default: var(--arche-greece-blue-200);
    --arche-accent-rule: var(--arche-norway-red-400);
    --arche-accent-numeral: var(--arche-greece-blue-200);
  }
}

/* ---------- Color modes ----------
   <html data-mode="..."> picks a color mode. No data-mode means Canon.
   Light or Dark still follows data-theme or the browser setting.
   Each block lists only the roles that differ from Canon. These blocks must stay
   after Canon's Dark blocks above: same strength, so the later one wins. */
:root[data-mode="klarheit"] {
  --arche-surface-brand-primary: var(--arche-neutral-900);
  --arche-surface-brand-primary-subtle: var(--arche-neutral-50);
  --arche-border-brand-default: var(--arche-neutral-900);
  --arche-text-brand-primary: var(--arche-neutral-900);
  --arche-icon-brand-default: var(--arche-neutral-900);
  --arche-interactive-button-primary-fill-default: var(--arche-neutral-900);
  --arche-interactive-button-primary-fill-hover: var(--arche-neutral-800);
  --arche-interactive-button-primary-fill-pressed: var(--arche-neutral-black);
  --arche-interactive-button-secondary-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-neutral-100);
  --arche-interactive-button-secondary-border-default: var(--arche-neutral-900);
  --arche-interactive-button-primary-fill-active: var(--arche-neutral-black);
  --arche-interactive-button-secondary-fill-active: var(--arche-neutral-50);
  --arche-text-on-brand-body: var(--arche-neutral-white);
  --arche-text-on-brand-secondary: var(--arche-neutral-100);
  --arche-border-on-brand-divider: var(--arche-neutral-600);
  --arche-interactive-progress: var(--arche-neutral-900);
  --arche-interactive-link-nav-indicator: var(--arche-neutral-900);
  --arche-interactive-button-secondary-border-pressed: var(--arche-neutral-900);
  --arche-interactive-button-secondary-label-default: var(--arche-neutral-900);
  --arche-interactive-button-secondary-label-pressed: var(--arche-neutral-900);
  --arche-interactive-button-secondary-indicator: var(--arche-neutral-900);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-neutral-100);
  --arche-interactive-button-tertiary-fill-active: var(--arche-neutral-50);
  --arche-interactive-button-tertiary-label-default: var(--arche-neutral-900);
  --arche-interactive-button-tertiary-label-hover: var(--arche-neutral-900);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-neutral-900);
  --arche-interactive-button-tertiary-label-active: var(--arche-neutral-900);
  --arche-interactive-button-tertiary-indicator: var(--arche-neutral-900);
  --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-neutral-black);
  --arche-text-on-brand-switch-selected: var(--arche-neutral-900);
  --arche-interactive-link-default: var(--arche-neutral-900);
  --arche-accent-rule: var(--arche-swiss-red-web);
  --arche-accent-numeral: var(--arche-swiss-red-web);
  --arche-interactive-button-primary-on-brand-label: var(--arche-neutral-900);
  --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-neutral-800);
  --arche-interactive-button-primary-on-brand-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-primary-on-brand-fill-pressed: var(--arche-neutral-100);
  --arche-interactive-link-on-brand-pressed: var(--arche-neutral-white);
  --arche-interactive-link-on-brand-disabled: var(--arche-neutral-100);
  --arche-interactive-button-primary-on-brand-indicator: var(--arche-neutral-900);
}

:root[data-mode="ethos"] {
  --arche-selection-background: var(--arche-greece-blue-200);
  --arche-accent-rule: var(--arche-greece-blue-500);
  --arche-interactive-button-primary-on-brand-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-primary-on-brand-fill-pressed: var(--arche-neutral-100);
  --arche-interactive-button-primary-on-brand-indicator: var(--arche-greece-blue-500);
}

:root[data-mode="noktern"] {
  --arche-surface-brand-primary: var(--arche-norway-blue-500);
  --arche-surface-brand-primary-subtle: var(--arche-norway-blue-50);
  --arche-border-brand-default: var(--arche-norway-blue-500);
  --arche-text-brand-primary: var(--arche-norway-blue-500);
  --arche-icon-brand-default: var(--arche-norway-blue-500);
  --arche-interactive-button-primary-fill-default: var(--arche-norway-blue-500);
  --arche-interactive-button-primary-fill-hover: var(--arche-norway-blue-400);
  --arche-interactive-button-primary-fill-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-secondary-fill-hover: var(--arche-norway-blue-50);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-norway-blue-100);
  --arche-interactive-button-secondary-border-default: var(--arche-norway-blue-500);
  --arche-interactive-button-primary-fill-active: var(--arche-norway-blue-700);
  --arche-interactive-button-secondary-fill-active: var(--arche-norway-blue-50);
  --arche-text-on-brand-body: var(--arche-norway-blue-50);
  --arche-text-on-brand-secondary: var(--arche-norway-blue-100);
  --arche-border-on-brand-divider: var(--arche-norway-blue-300);
  --arche-interactive-progress: var(--arche-norway-blue-500);
  --arche-interactive-link-nav-indicator: var(--arche-norway-blue-500);
  --arche-interactive-button-secondary-border-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-secondary-label-default: var(--arche-norway-blue-500);
  --arche-interactive-button-secondary-label-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-secondary-indicator: var(--arche-norway-blue-500);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-norway-blue-50);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-norway-blue-100);
  --arche-interactive-button-tertiary-fill-active: var(--arche-norway-blue-50);
  --arche-interactive-button-tertiary-label-default: var(--arche-norway-blue-500);
  --arche-interactive-button-tertiary-label-hover: var(--arche-norway-blue-600);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-tertiary-label-active: var(--arche-norway-blue-500);
  --arche-interactive-button-tertiary-indicator: var(--arche-norway-blue-500);
  --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-norway-blue-700);
  --arche-text-on-brand-switch-selected: var(--arche-norway-blue-500);
  --arche-selection-background: var(--arche-norway-blue-200);
  --arche-interactive-link-default: var(--arche-norway-blue-500);
  --arche-accent-rule: var(--arche-norway-blue-500);
  --arche-accent-numeral: var(--arche-norway-blue-500);
  --arche-interactive-button-primary-on-brand-label: var(--arche-norway-blue-500);
  --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-norway-blue-400);
  --arche-interactive-button-primary-on-brand-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-primary-on-brand-fill-pressed: var(--arche-neutral-100);
  --arche-interactive-link-on-brand-pressed: var(--arche-norway-blue-50);
  --arche-interactive-link-on-brand-disabled: var(--arche-norway-blue-100);
  --arche-interactive-button-primary-on-brand-indicator: var(--arche-norway-blue-500);
}

:root[data-mode="omtanke"] {
  --arche-surface-brand-primary: var(--arche-sweden-blue-500);
  --arche-surface-brand-primary-subtle: var(--arche-sweden-blue-50);
  --arche-border-brand-default: var(--arche-sweden-blue-500);
  --arche-text-brand-primary: var(--arche-sweden-blue-500);
  --arche-icon-brand-default: var(--arche-sweden-blue-500);
  --arche-interactive-button-primary-fill-default: var(--arche-sweden-blue-500);
  --arche-interactive-button-primary-fill-hover: var(--arche-sweden-blue-400);
  --arche-interactive-button-primary-fill-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-secondary-fill-hover: var(--arche-sweden-blue-50);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-sweden-blue-100);
  --arche-interactive-button-secondary-border-default: var(--arche-sweden-blue-500);
  --arche-interactive-button-primary-fill-active: var(--arche-sweden-blue-700);
  --arche-interactive-button-secondary-fill-active: var(--arche-sweden-blue-50);
  --arche-text-on-brand-primary: var(--arche-sweden-yellow-50);
  --arche-text-on-brand-body: var(--arche-sweden-yellow-50);
  --arche-text-on-brand-secondary: var(--arche-sweden-yellow-50);
  --arche-text-on-brand-name: var(--arche-sweden-yellow-50);
  --arche-border-on-brand-divider: var(--arche-sweden-blue-300);
  --arche-interactive-progress: var(--arche-sweden-blue-500);
  --arche-interactive-link-nav-indicator: var(--arche-sweden-blue-500);
  --arche-interactive-button-secondary-border-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-secondary-label-default: var(--arche-sweden-blue-500);
  --arche-interactive-button-secondary-label-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-secondary-indicator: var(--arche-sweden-blue-500);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-sweden-blue-50);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-sweden-blue-100);
  --arche-interactive-button-tertiary-fill-active: var(--arche-sweden-blue-50);
  --arche-interactive-button-tertiary-label-default: var(--arche-sweden-blue-500);
  --arche-interactive-button-tertiary-label-hover: var(--arche-sweden-blue-600);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-tertiary-label-active: var(--arche-sweden-blue-500);
  --arche-interactive-button-tertiary-indicator: var(--arche-sweden-blue-500);
  --arche-interactive-button-secondary-on-brand-border: var(--arche-sweden-yellow-50);
  --arche-interactive-button-secondary-on-brand-label: var(--arche-sweden-yellow-50);
  --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-sweden-blue-700);
  --arche-text-on-brand-switch-selected: var(--arche-sweden-blue-500);
  --arche-text-on-brand-title: var(--arche-sweden-yellow-50);
  --arche-interactive-link-default: var(--arche-sweden-blue-500);
  --arche-accent-rule: var(--arche-sweden-blue-500);
  --arche-accent-numeral: var(--arche-sweden-blue-500);
  --arche-interactive-button-primary-on-brand-fill: var(--arche-sweden-yellow-500);
  --arche-interactive-button-primary-on-brand-label: var(--arche-sweden-blue-800);
  --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-sweden-blue-400);
  --arche-interactive-button-primary-on-brand-fill-hover: var(--arche-sweden-yellow-400);
  --arche-interactive-button-primary-on-brand-fill-pressed: var(--arche-sweden-yellow-600);
  --arche-interactive-link-on-brand-default: var(--arche-sweden-yellow-50);
  --arche-interactive-link-on-brand-hover: var(--arche-sweden-yellow-50);
  --arche-interactive-link-on-brand-pressed: var(--arche-sweden-yellow-50);
  --arche-interactive-link-on-brand-disabled: var(--arche-sweden-yellow-50);
  --arche-interactive-button-primary-on-brand-indicator: var(--arche-sweden-blue-800);
}

:root[data-mode="klarheit"][data-theme="dark"] {
  --arche-surface-brand-primary: var(--arche-neutral-800);
  --arche-surface-brand-primary-subtle: var(--arche-neutral-700);
  --arche-border-brand-default: var(--arche-neutral-white);
  --arche-text-neutral-secondary: var(--arche-neutral-200);
  --arche-text-brand-primary: var(--arche-neutral-white);
  --arche-icon-brand-default: var(--arche-neutral-white);
  --arche-interactive-button-primary-fill-default: var(--arche-neutral-100);
  --arche-interactive-button-primary-fill-hover: var(--arche-neutral-50);
  --arche-interactive-button-primary-fill-pressed: var(--arche-neutral-200);
  --arche-interactive-button-secondary-fill-hover: var(--arche-neutral-800);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-neutral-700);
  --arche-interactive-button-secondary-border-default: var(--arche-neutral-white);
  --arche-interactive-button-primary-fill-active: var(--arche-neutral-200);
  --arche-interactive-button-secondary-fill-active: var(--arche-neutral-800);
  --arche-interactive-progress: var(--arche-neutral-white);
  --arche-interactive-link-nav-indicator: var(--arche-neutral-white);
  --arche-interactive-button-primary-label-default: var(--arche-neutral-900);
  --arche-interactive-button-primary-indicator: var(--arche-neutral-900);
  --arche-interactive-button-secondary-border-pressed: var(--arche-neutral-white);
  --arche-interactive-button-secondary-label-default: var(--arche-neutral-white);
  --arche-interactive-button-secondary-label-pressed: var(--arche-neutral-white);
  --arche-interactive-button-secondary-indicator: var(--arche-neutral-white);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-neutral-800);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-neutral-700);
  --arche-interactive-button-tertiary-fill-active: var(--arche-neutral-800);
  --arche-interactive-button-tertiary-label-default: var(--arche-neutral-white);
  --arche-interactive-button-tertiary-label-hover: var(--arche-neutral-white);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-neutral-white);
  --arche-interactive-button-tertiary-label-active: var(--arche-neutral-white);
  --arche-interactive-button-tertiary-indicator: var(--arche-neutral-white);
  --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-neutral-900);
  --arche-interactive-link-default: var(--arche-neutral-white);
  --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-neutral-700);
}

:root[data-mode="ethos"][data-theme="dark"] {
  --arche-accent-rule: var(--arche-greece-blue-200);
}

:root[data-mode="noktern"][data-theme="dark"] {
  --arche-surface-neutral-base: var(--arche-norway-blue-900);
  --arche-surface-neutral-raised: var(--arche-norway-blue-800);
  --arche-surface-brand-primary-subtle: var(--arche-norway-blue-700);
  --arche-border-neutral-default: var(--arche-norway-blue-700);
  --arche-border-brand-default: var(--arche-norway-blue-400);
  --arche-text-brand-primary: var(--arche-norway-blue-200);
  --arche-icon-brand-default: var(--arche-norway-blue-300);
  --arche-interactive-button-primary-fill-default: var(--arche-norway-blue-200);
  --arche-interactive-button-primary-fill-hover: var(--arche-norway-blue-100);
  --arche-interactive-button-primary-fill-pressed: var(--arche-norway-blue-300);
  --arche-interactive-button-secondary-fill-default: var(--arche-norway-blue-900);
  --arche-interactive-button-secondary-fill-hover: var(--arche-norway-blue-800);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-secondary-fill-disabled: var(--arche-norway-blue-900);
  --arche-interactive-button-secondary-border-default: var(--arche-norway-blue-200);
  --arche-interactive-button-secondary-border-inverse: var(--arche-norway-blue-900);
  --arche-interactive-button-primary-fill-active: var(--arche-norway-blue-300);
  --arche-interactive-button-secondary-fill-active: var(--arche-norway-blue-800);
  --arche-interactive-progress: var(--arche-norway-blue-300);
  --arche-interactive-link-nav-indicator: var(--arche-norway-blue-200);
  --arche-interactive-button-primary-label-default: var(--arche-norway-blue-900);
  --arche-interactive-button-primary-indicator: var(--arche-norway-blue-900);
  --arche-interactive-button-secondary-border-pressed: var(--arche-norway-blue-100);
  --arche-interactive-button-secondary-label-default: var(--arche-norway-blue-200);
  --arche-interactive-button-secondary-label-pressed: var(--arche-norway-blue-100);
  --arche-interactive-button-secondary-indicator: var(--arche-norway-blue-200);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-norway-blue-800);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-norway-blue-700);
  --arche-interactive-button-tertiary-fill-active: var(--arche-norway-blue-800);
  --arche-interactive-button-tertiary-label-default: var(--arche-norway-blue-200);
  --arche-interactive-button-tertiary-label-hover: var(--arche-norway-blue-100);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-norway-blue-50);
  --arche-interactive-button-tertiary-label-active: var(--arche-norway-blue-200);
  --arche-interactive-button-tertiary-indicator: var(--arche-norway-blue-200);
  --arche-interactive-link-default: var(--arche-norway-blue-200);
  --arche-accent-rule: var(--arche-norway-blue-200);
  --arche-accent-numeral: var(--arche-norway-blue-200);
}

:root[data-mode="omtanke"][data-theme="dark"] {
  --arche-surface-neutral-base: var(--arche-sweden-blue-900);
  --arche-surface-neutral-raised: var(--arche-sweden-blue-800);
  --arche-surface-brand-primary-subtle: var(--arche-sweden-blue-700);
  --arche-border-neutral-default: var(--arche-sweden-blue-700);
  --arche-border-brand-default: var(--arche-sweden-blue-400);
  --arche-text-brand-primary: var(--arche-sweden-blue-200);
  --arche-icon-brand-default: var(--arche-sweden-blue-300);
  --arche-interactive-button-primary-fill-default: var(--arche-sweden-blue-200);
  --arche-interactive-button-primary-fill-hover: var(--arche-sweden-blue-100);
  --arche-interactive-button-primary-fill-pressed: var(--arche-sweden-blue-300);
  --arche-interactive-button-secondary-fill-default: var(--arche-sweden-blue-900);
  --arche-interactive-button-secondary-fill-hover: var(--arche-sweden-blue-800);
  --arche-interactive-button-secondary-fill-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-secondary-fill-disabled: var(--arche-sweden-blue-900);
  --arche-interactive-button-secondary-border-default: var(--arche-sweden-blue-200);
  --arche-interactive-button-secondary-border-inverse: var(--arche-sweden-blue-900);
  --arche-interactive-button-primary-fill-active: var(--arche-sweden-blue-300);
  --arche-interactive-button-secondary-fill-active: var(--arche-sweden-blue-800);
  --arche-interactive-progress: var(--arche-sweden-blue-300);
  --arche-interactive-link-nav-indicator: var(--arche-sweden-blue-200);
  --arche-interactive-button-primary-label-default: var(--arche-sweden-blue-900);
  --arche-interactive-button-primary-indicator: var(--arche-sweden-blue-900);
  --arche-interactive-button-secondary-border-pressed: var(--arche-sweden-blue-100);
  --arche-interactive-button-secondary-label-default: var(--arche-sweden-blue-200);
  --arche-interactive-button-secondary-label-pressed: var(--arche-sweden-blue-100);
  --arche-interactive-button-secondary-indicator: var(--arche-sweden-blue-200);
  --arche-interactive-button-tertiary-fill-hover: var(--arche-sweden-blue-800);
  --arche-interactive-button-tertiary-fill-pressed: var(--arche-sweden-blue-700);
  --arche-interactive-button-tertiary-fill-active: var(--arche-sweden-blue-800);
  --arche-interactive-button-tertiary-label-default: var(--arche-sweden-blue-200);
  --arche-interactive-button-tertiary-label-hover: var(--arche-sweden-blue-100);
  --arche-interactive-button-tertiary-label-pressed: var(--arche-sweden-blue-50);
  --arche-interactive-button-tertiary-label-active: var(--arche-sweden-blue-200);
  --arche-interactive-button-tertiary-indicator: var(--arche-sweden-blue-200);
  --arche-interactive-link-default: var(--arche-sweden-blue-200);
  --arche-accent-rule: var(--arche-sweden-blue-200);
  --arche-accent-numeral: var(--arche-sweden-blue-200);
}

@media (prefers-color-scheme: dark) {
  :root[data-mode="klarheit"]:not([data-theme="light"]) {
    --arche-surface-brand-primary: var(--arche-neutral-800);
    --arche-surface-brand-primary-subtle: var(--arche-neutral-700);
    --arche-border-brand-default: var(--arche-neutral-white);
    --arche-text-neutral-secondary: var(--arche-neutral-200);
    --arche-text-brand-primary: var(--arche-neutral-white);
    --arche-icon-brand-default: var(--arche-neutral-white);
    --arche-interactive-button-primary-fill-default: var(--arche-neutral-100);
    --arche-interactive-button-primary-fill-hover: var(--arche-neutral-50);
    --arche-interactive-button-primary-fill-pressed: var(--arche-neutral-200);
    --arche-interactive-button-secondary-fill-hover: var(--arche-neutral-800);
    --arche-interactive-button-secondary-fill-pressed: var(--arche-neutral-700);
    --arche-interactive-button-secondary-border-default: var(--arche-neutral-white);
    --arche-interactive-button-primary-fill-active: var(--arche-neutral-200);
    --arche-interactive-button-secondary-fill-active: var(--arche-neutral-800);
    --arche-interactive-progress: var(--arche-neutral-white);
    --arche-interactive-link-nav-indicator: var(--arche-neutral-white);
    --arche-interactive-button-primary-label-default: var(--arche-neutral-900);
    --arche-interactive-button-primary-indicator: var(--arche-neutral-900);
    --arche-interactive-button-secondary-border-pressed: var(--arche-neutral-white);
    --arche-interactive-button-secondary-label-default: var(--arche-neutral-white);
    --arche-interactive-button-secondary-label-pressed: var(--arche-neutral-white);
    --arche-interactive-button-secondary-indicator: var(--arche-neutral-white);
    --arche-interactive-button-tertiary-fill-hover: var(--arche-neutral-800);
    --arche-interactive-button-tertiary-fill-pressed: var(--arche-neutral-700);
    --arche-interactive-button-tertiary-fill-active: var(--arche-neutral-800);
    --arche-interactive-button-tertiary-label-default: var(--arche-neutral-white);
    --arche-interactive-button-tertiary-label-hover: var(--arche-neutral-white);
    --arche-interactive-button-tertiary-label-pressed: var(--arche-neutral-white);
    --arche-interactive-button-tertiary-label-active: var(--arche-neutral-white);
    --arche-interactive-button-tertiary-indicator: var(--arche-neutral-white);
    --arche-interactive-button-secondary-on-brand-fill-pressed: var(--arche-neutral-900);
    --arche-interactive-link-default: var(--arche-neutral-white);
    --arche-interactive-button-secondary-on-brand-fill-hover: var(--arche-neutral-700);
  }

  :root[data-mode="ethos"]:not([data-theme="light"]) {
    --arche-accent-rule: var(--arche-greece-blue-200);
  }

  :root[data-mode="noktern"]:not([data-theme="light"]) {
    --arche-surface-neutral-base: var(--arche-norway-blue-900);
    --arche-surface-neutral-raised: var(--arche-norway-blue-800);
    --arche-surface-brand-primary-subtle: var(--arche-norway-blue-700);
    --arche-border-neutral-default: var(--arche-norway-blue-700);
    --arche-border-brand-default: var(--arche-norway-blue-400);
    --arche-text-brand-primary: var(--arche-norway-blue-200);
    --arche-icon-brand-default: var(--arche-norway-blue-300);
    --arche-interactive-button-primary-fill-default: var(--arche-norway-blue-200);
    --arche-interactive-button-primary-fill-hover: var(--arche-norway-blue-100);
    --arche-interactive-button-primary-fill-pressed: var(--arche-norway-blue-300);
    --arche-interactive-button-secondary-fill-default: var(--arche-norway-blue-900);
    --arche-interactive-button-secondary-fill-hover: var(--arche-norway-blue-800);
    --arche-interactive-button-secondary-fill-pressed: var(--arche-norway-blue-700);
    --arche-interactive-button-secondary-fill-disabled: var(--arche-norway-blue-900);
    --arche-interactive-button-secondary-border-default: var(--arche-norway-blue-200);
    --arche-interactive-button-secondary-border-inverse: var(--arche-norway-blue-900);
    --arche-interactive-button-primary-fill-active: var(--arche-norway-blue-300);
    --arche-interactive-button-secondary-fill-active: var(--arche-norway-blue-800);
    --arche-interactive-progress: var(--arche-norway-blue-300);
    --arche-interactive-link-nav-indicator: var(--arche-norway-blue-200);
    --arche-interactive-button-primary-label-default: var(--arche-norway-blue-900);
    --arche-interactive-button-primary-indicator: var(--arche-norway-blue-900);
    --arche-interactive-button-secondary-border-pressed: var(--arche-norway-blue-100);
    --arche-interactive-button-secondary-label-default: var(--arche-norway-blue-200);
    --arche-interactive-button-secondary-label-pressed: var(--arche-norway-blue-100);
    --arche-interactive-button-secondary-indicator: var(--arche-norway-blue-200);
    --arche-interactive-button-tertiary-fill-hover: var(--arche-norway-blue-800);
    --arche-interactive-button-tertiary-fill-pressed: var(--arche-norway-blue-700);
    --arche-interactive-button-tertiary-fill-active: var(--arche-norway-blue-800);
    --arche-interactive-button-tertiary-label-default: var(--arche-norway-blue-200);
    --arche-interactive-button-tertiary-label-hover: var(--arche-norway-blue-100);
    --arche-interactive-button-tertiary-label-pressed: var(--arche-norway-blue-50);
    --arche-interactive-button-tertiary-label-active: var(--arche-norway-blue-200);
    --arche-interactive-button-tertiary-indicator: var(--arche-norway-blue-200);
    --arche-interactive-link-default: var(--arche-norway-blue-200);
    --arche-accent-rule: var(--arche-norway-blue-200);
    --arche-accent-numeral: var(--arche-norway-blue-200);
  }

  :root[data-mode="omtanke"]:not([data-theme="light"]) {
    --arche-surface-neutral-base: var(--arche-sweden-blue-900);
    --arche-surface-neutral-raised: var(--arche-sweden-blue-800);
    --arche-surface-brand-primary-subtle: var(--arche-sweden-blue-700);
    --arche-border-neutral-default: var(--arche-sweden-blue-700);
    --arche-border-brand-default: var(--arche-sweden-blue-400);
    --arche-text-brand-primary: var(--arche-sweden-blue-200);
    --arche-icon-brand-default: var(--arche-sweden-blue-300);
    --arche-interactive-button-primary-fill-default: var(--arche-sweden-blue-200);
    --arche-interactive-button-primary-fill-hover: var(--arche-sweden-blue-100);
    --arche-interactive-button-primary-fill-pressed: var(--arche-sweden-blue-300);
    --arche-interactive-button-secondary-fill-default: var(--arche-sweden-blue-900);
    --arche-interactive-button-secondary-fill-hover: var(--arche-sweden-blue-800);
    --arche-interactive-button-secondary-fill-pressed: var(--arche-sweden-blue-700);
    --arche-interactive-button-secondary-fill-disabled: var(--arche-sweden-blue-900);
    --arche-interactive-button-secondary-border-default: var(--arche-sweden-blue-200);
    --arche-interactive-button-secondary-border-inverse: var(--arche-sweden-blue-900);
    --arche-interactive-button-primary-fill-active: var(--arche-sweden-blue-300);
    --arche-interactive-button-secondary-fill-active: var(--arche-sweden-blue-800);
    --arche-interactive-progress: var(--arche-sweden-blue-300);
    --arche-interactive-link-nav-indicator: var(--arche-sweden-blue-200);
    --arche-interactive-button-primary-label-default: var(--arche-sweden-blue-900);
    --arche-interactive-button-primary-indicator: var(--arche-sweden-blue-900);
    --arche-interactive-button-secondary-border-pressed: var(--arche-sweden-blue-100);
    --arche-interactive-button-secondary-label-default: var(--arche-sweden-blue-200);
    --arche-interactive-button-secondary-label-pressed: var(--arche-sweden-blue-100);
    --arche-interactive-button-secondary-indicator: var(--arche-sweden-blue-200);
    --arche-interactive-button-tertiary-fill-hover: var(--arche-sweden-blue-800);
    --arche-interactive-button-tertiary-fill-pressed: var(--arche-sweden-blue-700);
    --arche-interactive-button-tertiary-fill-active: var(--arche-sweden-blue-800);
    --arche-interactive-button-tertiary-label-default: var(--arche-sweden-blue-200);
    --arche-interactive-button-tertiary-label-hover: var(--arche-sweden-blue-100);
    --arche-interactive-button-tertiary-label-pressed: var(--arche-sweden-blue-50);
    --arche-interactive-button-tertiary-label-active: var(--arche-sweden-blue-200);
    --arche-interactive-button-tertiary-indicator: var(--arche-sweden-blue-200);
    --arche-interactive-link-default: var(--arche-sweden-blue-200);
    --arche-accent-rule: var(--arche-sweden-blue-200);
    --arche-accent-numeral: var(--arche-sweden-blue-200);
  }
}

/* ---------- Reduced motion: movement becomes an instant change ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --arche-motion-fast: 0ms;
    --arche-motion-medium: 0ms;
    --arche-motion-slow: 0ms;
  }
}

/* ---------- Text style classes: one per Figma text style ---------- */
.type-display {
  font-family: var(--arche-type-display-font);
  font-weight: var(--arche-type-display-weight);
  font-size: var(--arche-type-display-size);
  line-height: var(--arche-type-display-line);
  letter-spacing: var(--arche-type-display-letter-spacing);
  text-transform: var(--arche-type-display-text-transform);
}
.type-h1 {
  font-family: var(--arche-type-h1-font);
  font-weight: var(--arche-type-h1-weight);
  font-size: var(--arche-type-h1-size);
  line-height: var(--arche-type-h1-line);
  letter-spacing: var(--arche-type-h1-letter-spacing);
  text-transform: var(--arche-type-h1-text-transform);
}
.type-h2 {
  font-family: var(--arche-type-h2-font);
  font-weight: var(--arche-type-h2-weight);
  font-size: var(--arche-type-h2-size);
  line-height: var(--arche-type-h2-line);
  letter-spacing: var(--arche-type-h2-letter-spacing);
  text-transform: var(--arche-type-h2-text-transform);
}
.type-h3 {
  font-family: var(--arche-type-h3-font);
  font-weight: var(--arche-type-h3-weight);
  font-size: var(--arche-type-h3-size);
  line-height: var(--arche-type-h3-line);
  letter-spacing: var(--arche-type-h3-letter-spacing);
  text-transform: var(--arche-type-h3-text-transform);
}
.type-subhead {
  font-family: var(--arche-type-subhead-font);
  font-weight: var(--arche-type-subhead-weight);
  font-size: var(--arche-type-subhead-size);
  line-height: var(--arche-type-subhead-line);
  letter-spacing: var(--arche-type-subhead-letter-spacing);
  text-transform: var(--arche-type-subhead-text-transform);
}
.type-quote {
  font-family: var(--arche-type-quote-font);
  font-weight: var(--arche-type-quote-weight);
  font-size: var(--arche-type-quote-size);
  line-height: var(--arche-type-quote-line);
  letter-spacing: var(--arche-type-quote-letter-spacing);
  text-transform: var(--arche-type-quote-text-transform);
}
.type-stat {
  font-family: var(--arche-type-stat-font);
  font-weight: var(--arche-type-stat-weight);
  font-size: var(--arche-type-stat-size);
  line-height: var(--arche-type-stat-line);
  letter-spacing: var(--arche-type-stat-letter-spacing);
  text-transform: var(--arche-type-stat-text-transform);
}
.type-lead {
  font-family: var(--arche-type-lead-font);
  font-weight: var(--arche-type-lead-weight);
  font-size: var(--arche-type-lead-size);
  line-height: var(--arche-type-lead-line);
  letter-spacing: var(--arche-type-lead-letter-spacing);
  text-transform: var(--arche-type-lead-text-transform);
}
.type-body {
  font-family: var(--arche-type-body-font);
  font-weight: var(--arche-type-body-weight);
  font-size: var(--arche-type-body-size);
  line-height: var(--arche-type-body-line);
  letter-spacing: var(--arche-type-body-letter-spacing);
  text-transform: var(--arche-type-body-text-transform);
}
.type-body-medium {
  font-family: var(--arche-type-body-medium-font);
  font-weight: var(--arche-type-body-medium-weight);
  font-size: var(--arche-type-body-medium-size);
  line-height: var(--arche-type-body-medium-line);
  letter-spacing: var(--arche-type-body-medium-letter-spacing);
  text-transform: var(--arche-type-body-medium-text-transform);
}
.type-body-semibold {
  font-family: var(--arche-type-body-semibold-font);
  font-weight: var(--arche-type-body-semibold-weight);
  font-size: var(--arche-type-body-semibold-size);
  line-height: var(--arche-type-body-semibold-line);
  letter-spacing: var(--arche-type-body-semibold-letter-spacing);
  text-transform: var(--arche-type-body-semibold-text-transform);
}
.type-small {
  font-family: var(--arche-type-small-font);
  font-weight: var(--arche-type-small-weight);
  font-size: var(--arche-type-small-size);
  line-height: var(--arche-type-small-line);
  letter-spacing: var(--arche-type-small-letter-spacing);
  text-transform: var(--arche-type-small-text-transform);
}
.type-button {
  font-family: var(--arche-type-button-font);
  font-weight: var(--arche-type-button-weight);
  font-size: var(--arche-type-button-size);
  line-height: var(--arche-type-button-line);
  letter-spacing: var(--arche-type-button-letter-spacing);
  text-transform: var(--arche-type-button-text-transform);
}
.type-label {
  font-family: var(--arche-type-label-font);
  font-weight: var(--arche-type-label-weight);
  font-size: var(--arche-type-label-size);
  line-height: var(--arche-type-label-line);
  letter-spacing: var(--arche-type-label-letter-spacing);
  text-transform: var(--arche-type-label-text-transform);
}
.type-fine-print {
  font-family: var(--arche-type-fine-print-font);
  font-weight: var(--arche-type-fine-print-weight);
  font-size: var(--arche-type-fine-print-size);
  line-height: var(--arche-type-fine-print-line);
  letter-spacing: var(--arche-type-fine-print-letter-spacing);
  text-transform: var(--arche-type-fine-print-text-transform);
}

/* ---------- Element defaults ---------- */
body {
  margin: 0;
  background: var(--arche-surface-neutral-base);
  color: var(--arche-text-neutral-body);
  font-family: var(--arche-font-body);
  font-size: var(--arche-type-body-size);
  line-height: var(--arche-type-body-line);
}
h1, h2, h3 { margin: 0; color: var(--arche-text-neutral-primary); }
h1 { font: inherit; font-family: var(--arche-type-h1-font); font-weight: var(--arche-type-h1-weight); font-size: var(--arche-type-h1-size); line-height: var(--arche-type-h1-line); }
h2 { font: inherit; font-family: var(--arche-type-h2-font); font-weight: var(--arche-type-h2-weight); font-size: var(--arche-type-h2-size); line-height: var(--arche-type-h2-line); }
h3 { font: inherit; font-family: var(--arche-type-h3-font); font-weight: var(--arche-type-h3-weight); font-size: var(--arche-type-h3-size); line-height: var(--arche-type-h3-line); }
p { text-wrap: pretty; }