/* Wimpel – Design-Tokens. Quelle: Wimpel Design System.
   Alle Farben nur über die semantischen Tokens (--w-bg, --w-text, --w-primary …) verwenden;
   die Rohskalen (--w-stempel-600 …) nur für Grafiken und Sonderfälle.
   Dunkelmodus: folgt dem System, außer data-theme="light" bzw. "dark" am <html> erzwingt eine Variante. */

:root {
  /* Rohskalen */
  --w-stempel-50: #EEF0FF;
  --w-stempel-100: #DFE2FF;
  --w-stempel-200: #C3C8FF;
  --w-stempel-300: #9EA5FF;
  --w-stempel-400: #7C83F5;
  --w-stempel-500: #5A61DE;
  --w-stempel-600: #3138B0;
  --w-stempel-700: #282D8F;
  --w-stempel-800: #20246F;
  --w-stempel-900: #191C52;
  --w-stempel-950: #10122F;
  --w-signal-50: #FFF2EC;
  --w-signal-100: #FFE1D4;
  --w-signal-200: #FFC0A6;
  --w-signal-300: #FF9A72;
  --w-signal-400: #FF7445;
  --w-signal-500: #EE5524;
  --w-signal-600: #CC4115;
  --w-signal-700: #A63312;
  --w-signal-800: #842A12;
  --w-signal-900: #6B2512;
  --w-signal-950: #3A1006;
  --w-kreide-0: #FFFFFF;
  --w-kreide-50: #F7F8FC;
  --w-kreide-100: #EEF0F7;
  --w-kreide-200: #DCDFEC;
  --w-kreide-300: #C2C6DA;
  --w-kreide-400: #9499B5;
  --w-kreide-500: #6E7392;
  --w-kreide-600: #555B78;
  --w-kreide-700: #40455F;
  --w-kreide-800: #2A2E4D;
  --w-kreide-850: #1E2140;
  --w-kreide-900: #161931;
  --w-kreide-950: #0E1022;
  --w-kreide-1000: #090A17;
  --w-gruen-100: #DDF5E8;
  --w-gruen-600: #1F7A4D;
  --w-gruen-300: #5BD39A;
  --w-gruen-900: #0F3A26;
  --w-gelb-100: #FFF0D1;
  --w-gelb-600: #9A5B00;
  --w-gelb-300: #F2B451;
  --w-gelb-900: #4A2C00;
  --w-rot-100: #FDE2DF;
  --w-rot-600: #B42318;
  --w-rot-300: #FF8B7E;
  --w-rot-900: #55120C;

  /* Semantisch – hell */
  --w-bg: #F7F8FC;
  --w-surface: #FFFFFF;
  --w-sunken: #EEF0F7;
  --w-border: #DCDFEC;
  --w-text: #0E1022;
  --w-text-muted: #555B78;
  --w-primary: #3138B0;
  --w-primary-hover: #282D8F;
  --w-on-primary: #FFFFFF;
  --w-primary-soft: #EEF0FF;
  --w-primary-text: #282D8F;
  --w-accent: #EE5524;
  --w-accent-text: #A63312;
  --w-focus: #5A61DE;
  --w-success: #1F7A4D;
  --w-success-soft: #DDF5E8;
  --w-warning: #9A5B00;
  --w-warning-soft: #FFF0D1;
  --w-critical: #B42318;
  --w-critical-soft: #FDE2DF;
  --w-mark-bar: #0E1022;
  --w-mark-left: #3138B0;
  --w-mark-right: #EE5524;
  --w-border-input: #6E7392;
  --w-mark-left-soft: #9EA5FF;
  --w-mark-right-soft: #FF9A72;
  --w-shadow-tint: 16 18 47;
  color-scheme: light;

  /* Schrift */
  --w-font-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --w-font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --w-font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --w-display-stretch: 112%;      /* Archivo-Breite für Überschriften und Wortmarke */
  --w-display-weight: 780;

  /* Schriftgrößen (Basis 17 px für gute Lesbarkeit) */
  --w-text-xs: 0.8125rem;   /* 13 px – nur Fußnoten */
  --w-text-sm: 0.9375rem;   /* 15 px – Tabellen, Hilfetexte */
  --w-text-base: 1.0625rem; /* 17 px – Fließtext */
  --w-text-lg: 1.25rem;     /* 20 px */
  --w-text-xl: 1.5rem;      /* 24 px – H3 */
  --w-text-2xl: 1.875rem;   /* 30 px – H2 */
  --w-text-3xl: 2.375rem;   /* 38 px – H1 in der App */
  --w-text-4xl: 3.25rem;    /* 52 px – Website-Hero */
  --w-leading-tight: 1.15;
  --w-leading-snug: 1.3;
  --w-leading-body: 1.55;

  /* Abstände (4-px-Raster) */
  --w-space-1: 0.25rem; --w-space-2: 0.5rem; --w-space-3: 0.75rem; --w-space-4: 1rem;
  --w-space-5: 1.25rem; --w-space-6: 1.5rem; --w-space-8: 2rem; --w-space-10: 2.5rem;
  --w-space-12: 3rem; --w-space-16: 4rem; --w-space-24: 6rem;

  /* Radien */
  --w-radius-sm: 4px; --w-radius-md: 8px; --w-radius-lg: 14px; --w-radius-pill: 999px;

  /* Schatten (blau getönt) */
  --w-shadow-1: 0 1px 2px rgb(var(--w-shadow-tint) / 0.08), 0 1px 1px rgb(var(--w-shadow-tint) / 0.04);
  --w-shadow-2: 0 4px 14px rgb(var(--w-shadow-tint) / 0.10), 0 1px 3px rgb(var(--w-shadow-tint) / 0.06);
  --w-shadow-3: 0 18px 40px rgb(var(--w-shadow-tint) / 0.16);

  /* Bewegung */
  --w-ease: cubic-bezier(.2, .7, .2, 1);
  --w-duration-fast: 120ms; --w-duration: 200ms;

  /* Fokus */
  --w-focus-ring: 0 0 0 2px var(--w-surface), 0 0 0 4px var(--w-focus);

  /* Layout */
  --w-content-max: 72rem; --w-prose-max: 38rem; --w-touch-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --w-bg: #0E1022;
    --w-surface: #161931;
    --w-sunken: #090A17;
    --w-border: #2A2E4D;
    --w-text: #E9EBF7;
    --w-text-muted: #9499B5;
    --w-primary: #9EA5FF;
    --w-primary-hover: #C3C8FF;
    --w-on-primary: #0E1022;
    --w-primary-soft: #1D2150;
    --w-primary-text: #9EA5FF;
    --w-accent: #FF7445;
    --w-accent-text: #FF9A72;
    --w-focus: #9EA5FF;
    --w-success: #5BD39A;
    --w-success-soft: #0F3A26;
    --w-warning: #F2B451;
    --w-warning-soft: #4A2C00;
    --w-critical: #FF8B7E;
    --w-critical-soft: #55120C;
    --w-mark-bar: #E9EBF7;
    --w-mark-left: #7C83F5;
    --w-mark-right: #FF7445;
    --w-border-input: #6E7392;
    --w-mark-left-soft: #C3C8FF;
    --w-mark-right-soft: #FFC0A6;
    --w-shadow-tint: 0 0 0;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --w-bg: #0E1022;
  --w-surface: #161931;
  --w-sunken: #090A17;
  --w-border: #2A2E4D;
  --w-text: #E9EBF7;
  --w-text-muted: #9499B5;
  --w-primary: #9EA5FF;
  --w-primary-hover: #C3C8FF;
  --w-on-primary: #0E1022;
  --w-primary-soft: #1D2150;
  --w-primary-text: #9EA5FF;
  --w-accent: #FF7445;
  --w-accent-text: #FF9A72;
  --w-focus: #9EA5FF;
  --w-success: #5BD39A;
  --w-success-soft: #0F3A26;
  --w-warning: #F2B451;
  --w-warning-soft: #4A2C00;
  --w-critical: #FF8B7E;
  --w-critical-soft: #55120C;
  --w-mark-bar: #E9EBF7;
  --w-mark-left: #7C83F5;
  --w-mark-right: #FF7445;
  --w-border-input: #6E7392;
  --w-mark-left-soft: #C3C8FF;
  --w-mark-right-soft: #FFC0A6;
  --w-shadow-tint: 0 0 0;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --w-duration-fast: 0ms; --w-duration: 0ms; }
}