/* ZATido Design-Tokens (--ztd-*) – v0.16, bindend nach docs/DESIGN.md (ZAT-Design-System, ADR-010).
   Aufbau: (1) Palette hell, (2) Palette Nacht (--ztd-night-*), (3) Maße/Typo/Bewegung, (4) semantische Aliase für die Komponenten,
   (5) Dunkel-Modus = nur Umbelegung der Palette in :root[data-theme="dunkel"] (gesetzt von js/theme.js: System/Hell/Dunkel).
   Regel: Farben stehen NUR in dieser Datei (tests/theme-check.test.ts). Petrol-300 nie als Lesetext. */
:root {
  /* (1) Palette hell */
  --ztd-primary: #1D4D55; --ztd-on-primary: #FFFFFF; --ztd-neutral: #F6F6F5; --ztd-surface: #FFFFFF; --ztd-on-surface: #1D4D55; --ztd-body: #4F666B; --ztd-nav-muted: #5F7B80;
  --ztd-petrol-700: #2B4C53; --ztd-petrol-500: #4F666B; --ztd-petrol-300: #7E959B; --ztd-petrol-100: #EBF2F2; --ztd-mist: #C2D4D7; --ztd-teal: #4B7981;
  --ztd-warm-700: #614D3D; --ztd-warm-500: #AA7935; --ztd-success: #568061; --ztd-error: #B24C4C; --ztd-paper: #FFFFFF;
  --ztd-chart-1: #00889E; --ztd-chart-2: #C9812A; --ztd-chart-3: #8062C8; --ztd-chart-4: #3F9A55;
  --ztd-shade: #0F1E22; /* Mischfarbe für Hover/Pressed (hell: dunkler, nachts: heller) */
  --ztd-scrim: #0F1E22; /* Hintergrund-Abdunklung hinter Dialogen */
  --ztd-doc-ink: #1D4D55; /* Tinte für Zeichnungen/Unterschriften (immer hell hinterlegt) */
  --ztd-doc-text: #243538; /* Text auf Papier-Flächen (Briefvorschau/Editor): nie Schwarz, immer hell hinterlegt */

  /* (2) Palette Nacht – DESIGN.md */
  --ztd-night-primary: #8FC1C9; --ztd-night-on-primary: #0F1E22; --ztd-night-neutral: #0F1E22; --ztd-night-surface: #172B30; --ztd-night-on-surface: #EEF3F3;
  --ztd-night-body: #B8C4C6; --ztd-night-nav-muted: #739499; --ztd-night-petrol-700: #CFE0E2; --ztd-night-petrol-500: #A9BDC0; --ztd-night-petrol-300: #7B9499;
  --ztd-night-petrol-100: #24393F; --ztd-night-mist: #203A40; --ztd-night-warm-700: #A68972; --ztd-night-warm-500: #BA843A; --ztd-night-success: #699A76;
  --ztd-night-error: #C67A7A; --ztd-night-teal: #5E97A1;

  /* (3) Maße */
  --ztd-radius-none: 0; --ztd-radius-xs: 6px; --ztd-radius-sm: 12px; --ztd-radius-md: 16px; --ztd-radius-card: 18px; --ztd-radius-lg: 18px; --ztd-radius-sheet: 22px; --ztd-radius-full: 9999px;
  --ztd-space-0: 0; --ztd-space-25: 2px; --ztd-space-50: 4px; --ztd-space-100: 6px; --ztd-space-200: 8px; --ztd-space-300: 12px; --ztd-space-400: 16px; --ztd-space-500: 20px;
  --ztd-space-600: 24px; --ztd-space-700: 32px; --ztd-space-800: 40px; --ztd-space-900: 48px; --ztd-space-1000: 64px;
  --ztd-space-screen-margin: 16px; --ztd-space-card-padding: 20px; --ztd-space-card-gap: 12px; --ztd-space-section-gap: 24px;
  --ztd-space-box-inner-padding: 20px; --ztd-space-box-inner-padding-sm: 12px; --ztd-space-layout-box: 16px;
  --ztd-button-height: 48px; --ztd-pill-height: 36px; --ztd-input-height: 44px;
  --ztd-border-width: 1px; --ztd-border-width-focused: 2px;
  --ztd-icon-sm: 14px; --ztd-icon-md: 18px; --ztd-icon-lg: 24px; --ztd-icon-stroke-width: 1.5;
  --ztd-motion-duration-fast: 80ms; --ztd-motion-duration-medium: 160ms; --ztd-motion-duration-slow: 260ms; --ztd-motion-delay-tooltip: 200ms; --ztd-motion-delay-tooltip-instant: 50ms;
  --ztd-opacity-disabled: 0.55; --ztd-opacity-loading: 0.4;

  /* Typo: Roboto = Funktionales, Georgia = Seitentitel/Begrüßungen/Zitate (kursiv nur Zitate). Nie 700, max. zwei Zusatzstärken je Screen. */
  --ztd-font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ztd-font-serif: Georgia, "Times New Roman", serif;
  --ztd-font-size-xs: 12px; --ztd-font-size-sm: 13px; --ztd-font-size-md: 14px; --ztd-font-size-lg: 16px; --ztd-font-size-xl: 18px; --ztd-font-size-2xl: 30px;
  --ztd-font-weight-regular: 400; --ztd-font-weight-medium: 500; --ztd-font-weight-bold: 600;
  --ztd-font-letter-spacing-normal: 0; --ztd-font-letter-spacing-extended: 0.01em; --ztd-font-letter-spacing-caps: 0.1em;
  --ztd-type-headline-display: 400 32px/38px var(--ztd-font-serif);
  --ztd-type-headline-xl: 400 30px/36px var(--ztd-font-serif);
  --ztd-type-headline-lg: 600 18px/24px var(--ztd-font-family);
  --ztd-type-headline: 600 16px/22px var(--ztd-font-family);
  --ztd-type-title-serif: 400 17px/22px var(--ztd-font-serif);
  --ztd-type-hero: 600 36px/42px var(--ztd-font-family);
  --ztd-type-body-lg: 400 15px/22px var(--ztd-font-family);
  --ztd-type-body: 400 14px/21px var(--ztd-font-family);
  --ztd-type-body-sm: 400 13px/19px var(--ztd-font-family);
  --ztd-type-input: 400 15px/22px var(--ztd-font-family);
  --ztd-type-label-lg: 500 16px/20px var(--ztd-font-family);
  --ztd-type-label: 500 14px/18px var(--ztd-font-family);
  --ztd-type-label-sm: 500 13px/17px var(--ztd-font-family);
  --ztd-type-caps: 600 12px/16px var(--ztd-font-family);
  --ztd-type-caption: 400 12px/16px var(--ztd-font-family);
  --ztd-type-badge: 500 12px/16px var(--ztd-font-family);
  --ztd-type-number-display: 300 28px/34px var(--ztd-font-family);
  --ztd-type-timer-display: 300 46px/52px var(--ztd-font-family);
  --ztd-type-quote-lg: italic 400 21px/28px var(--ztd-font-serif);
  --ztd-type-quote-sm: italic 400 16px/22px var(--ztd-font-serif);
  --ztd-type-label-letter-spacing: 0.01em; --ztd-type-label-sm-letter-spacing: 0.01em;

  /* (4) semantische Aliase (Komponenten verwenden diese Namen) */
  --ztd-page-bg: var(--ztd-neutral);
  --ztd-surface-overlay: var(--ztd-surface);
  --ztd-surface-sunken: var(--ztd-petrol-100);
  --ztd-ink: var(--ztd-on-surface);
  --ztd-text: var(--ztd-on-surface);
  --ztd-text-body: var(--ztd-body);
  --ztd-text-subtle: var(--ztd-petrol-500);
  --ztd-text-subtlest: var(--ztd-petrol-500);
  --ztd-text-on-brand: var(--ztd-on-primary);
  --ztd-brand: var(--ztd-primary);
  --ztd-brand-accent: var(--ztd-teal);
  --ztd-background-brand: var(--ztd-primary);
  --ztd-background-brand-hovered: color-mix(in srgb, var(--ztd-primary) 88%, var(--ztd-shade));
  --ztd-background-brand-pressed: color-mix(in srgb, var(--ztd-primary) 76%, var(--ztd-shade));
  --ztd-background-neutral: var(--ztd-surface);
  --ztd-background-neutral-hovered: color-mix(in srgb, var(--ztd-petrol-100) 50%, var(--ztd-surface));
  --ztd-background-neutral-pressed: var(--ztd-petrol-100);
  --ztd-background-row: var(--ztd-surface);
  --ztd-background-row-hovered: color-mix(in srgb, var(--ztd-petrol-100) 55%, var(--ztd-surface));
  --ztd-background-row-selected: var(--ztd-petrol-100);
  --ztd-background-row-striped: var(--ztd-surface);
  --ztd-background-input: var(--ztd-surface);
  --ztd-background-input-hovered: var(--ztd-surface);
  --ztd-background-input-disabled: var(--ztd-petrol-100);
  --ztd-background-input-readonly: color-mix(in srgb, var(--ztd-petrol-100) 50%, var(--ztd-surface));
  --ztd-border: var(--ztd-petrol-100);
  --ztd-border-input: color-mix(in srgb, var(--ztd-petrol-300) 65%, var(--ztd-surface));
  --ztd-border-table: var(--ztd-petrol-100);
  --ztd-border-focused: var(--ztd-primary);
  --ztd-black-transparent-100: color-mix(in srgb, var(--ztd-petrol-300) 14%, transparent);
  --ztd-black-transparent-200: color-mix(in srgb, var(--ztd-petrol-300) 24%, transparent);
  --ztd-black-transparent-500: color-mix(in srgb, var(--ztd-scrim) 55%, transparent);
  /* Status: success = #568061, error = #B24C4C, offen/aktiv = Ocker (warm-500); Info = Teal. Text auf Tönung immer Tinte (Kontrast), Farbe kommt über Punkt/Rand. */
  --ztd-background-success-bold: var(--ztd-success);
  --ztd-background-success-subtle: color-mix(in srgb, var(--ztd-success) 14%, var(--ztd-surface));
  --ztd-background-success: var(--ztd-background-success-subtle);
  --ztd-border-success-bold: var(--ztd-success);
  --ztd-text-on-success: var(--ztd-success);
  --ztd-background-danger-bold: var(--ztd-error);
  --ztd-background-danger-bold-hovered: color-mix(in srgb, var(--ztd-error) 88%, var(--ztd-shade));
  --ztd-background-danger-bold-pressed: color-mix(in srgb, var(--ztd-error) 76%, var(--ztd-shade));
  --ztd-background-danger-subtle: color-mix(in srgb, var(--ztd-error) 12%, var(--ztd-surface));
  --ztd-background-danger: var(--ztd-surface);
  --ztd-border-danger: color-mix(in srgb, var(--ztd-error) 45%, var(--ztd-surface));
  --ztd-border-danger-bold: var(--ztd-error);
  --ztd-text-on-danger: var(--ztd-error);
  --ztd-text-danger: var(--ztd-error);
  --ztd-text-on-danger-bold: var(--ztd-paper);
  --ztd-background-warning-bold: var(--ztd-warm-500);
  --ztd-background-warning-subtle: color-mix(in srgb, var(--ztd-warm-500) 16%, var(--ztd-surface));
  --ztd-border-warning-bold: var(--ztd-warm-500);
  --ztd-border-warning-subtle: color-mix(in srgb, var(--ztd-warm-500) 35%, var(--ztd-surface));
  --ztd-text-on-warning: var(--ztd-warm-700);
  --ztd-background-info-subtle: color-mix(in srgb, var(--ztd-teal) 13%, var(--ztd-surface));
  --ztd-border-info: color-mix(in srgb, var(--ztd-teal) 45%, var(--ztd-surface));
  --ztd-text-on-info: var(--ztd-on-surface);
  --ztd-dot-done: var(--ztd-success); --ztd-dot-open: var(--ztd-warm-500); --ztd-dot-locked: var(--ztd-petrol-300);

  --ztd-background-accent-gray: var(--ztd-petrol-100); --ztd-border-accent-gray: color-mix(in srgb, var(--ztd-petrol-300) 40%, var(--ztd-surface)); --ztd-text-on-accent-gray: var(--ztd-on-surface);
  --ztd-background-accent-sky: color-mix(in srgb, var(--ztd-teal) 16%, var(--ztd-surface)); --ztd-border-accent-sky: color-mix(in srgb, var(--ztd-teal) 38%, var(--ztd-surface)); --ztd-text-on-accent-sky: var(--ztd-on-surface);
  --ztd-background-accent-rose: color-mix(in srgb, var(--ztd-error) 16%, var(--ztd-surface)); --ztd-border-accent-rose: color-mix(in srgb, var(--ztd-error) 38%, var(--ztd-surface)); --ztd-text-on-accent-rose: var(--ztd-on-surface);
  --ztd-background-accent-teal: color-mix(in srgb, var(--ztd-teal) 16%, var(--ztd-surface)); --ztd-border-accent-teal: color-mix(in srgb, var(--ztd-teal) 38%, var(--ztd-surface)); --ztd-text-on-accent-teal: var(--ztd-on-surface);
  --ztd-background-accent-green: color-mix(in srgb, var(--ztd-success) 16%, var(--ztd-surface)); --ztd-border-accent-green: color-mix(in srgb, var(--ztd-success) 38%, var(--ztd-surface)); --ztd-text-on-accent-green: var(--ztd-on-surface);
  --ztd-background-accent-amber: color-mix(in srgb, var(--ztd-warm-500) 16%, var(--ztd-surface)); --ztd-border-accent-amber: color-mix(in srgb, var(--ztd-warm-500) 38%, var(--ztd-surface)); --ztd-text-on-accent-amber: var(--ztd-on-surface);
  --ztd-background-accent-purple: color-mix(in srgb, var(--ztd-chart-3) 16%, var(--ztd-surface)); --ztd-border-accent-purple: color-mix(in srgb, var(--ztd-chart-3) 38%, var(--ztd-surface)); --ztd-text-on-accent-purple: var(--ztd-on-surface);
  --ztd-background-accent-orange: color-mix(in srgb, var(--ztd-chart-2) 16%, var(--ztd-surface)); --ztd-border-accent-orange: color-mix(in srgb, var(--ztd-chart-2) 38%, var(--ztd-surface)); --ztd-text-on-accent-orange: var(--ztd-on-surface);
  --ztd-background-accent-lime: color-mix(in srgb, var(--ztd-chart-4) 16%, var(--ztd-surface)); --ztd-border-accent-lime: color-mix(in srgb, var(--ztd-chart-4) 38%, var(--ztd-surface)); --ztd-text-on-accent-lime: var(--ztd-on-surface);
  --ztd-background-accent-indigo: color-mix(in srgb, var(--ztd-chart-3) 16%, var(--ztd-surface)); --ztd-border-accent-indigo: color-mix(in srgb, var(--ztd-chart-3) 38%, var(--ztd-surface)); --ztd-text-on-accent-indigo: var(--ztd-on-surface);
  --ztd-background-accent-fuchsia: color-mix(in srgb, var(--ztd-chart-3) 16%, var(--ztd-surface)); --ztd-border-accent-fuchsia: color-mix(in srgb, var(--ztd-chart-3) 38%, var(--ztd-surface)); --ztd-text-on-accent-fuchsia: var(--ztd-on-surface);
  --ztd-background-accent-cyan: color-mix(in srgb, var(--ztd-chart-1) 16%, var(--ztd-surface)); --ztd-border-accent-cyan: color-mix(in srgb, var(--ztd-chart-1) 38%, var(--ztd-surface)); --ztd-text-on-accent-cyan: var(--ztd-on-surface);
  color-scheme: light;
}

/* (5) Dunkel-Modus: gleiche Namen, Nacht-Werte. Gesetzt von js/theme.js (Einstellung System/Hell/Dunkel; System folgt prefers-color-scheme). */
:root[data-theme="dunkel"] {
  color-scheme: dark;
  --ztd-primary: var(--ztd-night-primary); --ztd-on-primary: var(--ztd-night-on-primary); --ztd-neutral: var(--ztd-night-neutral); --ztd-surface: var(--ztd-night-surface);
  --ztd-on-surface: var(--ztd-night-on-surface); --ztd-body: var(--ztd-night-body); --ztd-nav-muted: var(--ztd-night-nav-muted);
  --ztd-petrol-700: var(--ztd-night-petrol-700); --ztd-petrol-500: var(--ztd-night-petrol-500); --ztd-petrol-300: var(--ztd-night-petrol-300); --ztd-petrol-100: var(--ztd-night-petrol-100);
  --ztd-mist: var(--ztd-night-mist); --ztd-teal: var(--ztd-night-teal); --ztd-warm-700: var(--ztd-night-warm-700); --ztd-warm-500: var(--ztd-night-warm-500);
  --ztd-success: var(--ztd-night-success); --ztd-error: var(--ztd-night-error);
  --ztd-text-on-warning: var(--ztd-night-on-surface); /* Ocker-Tönung nachts: Tinte statt warm-700 (Kontrast) */
  --ztd-shade: var(--ztd-night-on-surface);
  --ztd-background-danger-bold: color-mix(in srgb, var(--ztd-night-error) 62%, var(--ztd-night-neutral));
  --ztd-text-on-danger-bold: var(--ztd-night-on-surface);
}


/* Drucke und PDF-Vorschauen sind immer hell (DESIGN.md): im Druck gilt die helle Palette auch bei aktivem Dunkel-Modus. */
@media print {
  :root[data-theme="dunkel"] {
    color-scheme: light;
    --ztd-primary: #1D4D55; --ztd-on-primary: #FFFFFF; --ztd-neutral: #FFFFFF; --ztd-surface: #FFFFFF; --ztd-on-surface: #1D4D55; --ztd-body: #4F666B; --ztd-nav-muted: #5F7B80;
    --ztd-petrol-700: #2B4C53; --ztd-petrol-500: #4F666B; --ztd-petrol-300: #7E959B; --ztd-petrol-100: #EBF2F2; --ztd-mist: #C2D4D7; --ztd-teal: #4B7981;
    --ztd-warm-700: #614D3D; --ztd-warm-500: #AA7935; --ztd-success: #568061; --ztd-error: #B24C4C; --ztd-shade: #0F1E22;
    --ztd-background-danger-bold: var(--ztd-error); --ztd-text-on-danger-bold: var(--ztd-paper);
    --ztd-text-on-warning: var(--ztd-warm-700);
  }
}