/* Christoph 17 Design-Tokens. Primärwerte, Rollen hell/dunkel, Schrift, Abstände, Form. */
:root {
  --c17-orange-35: #B33E00;
  --c17-orange-40: #CC4700;
  --c17-orange-50: #FF5900;
  --c17-orange-60: #FF7A33;
  --c17-orange-80: #FFBD99;
  --c17-orange-90: #FFDECC;
  --c17-nacht: #0E161E;
  --c17-navy: #003B62;
  --c17-navy-hell: #7DB2E0;
  --c17-grau-900: #1A242E;
  --c17-grau-800: #26323D;
  --c17-grau-700: #3A4753;
  --c17-grau-600: #5B6B78;
  --c17-grau-500: #7A8893;
  --c17-grau-400: #9AA5AE;
  --c17-grau-300: #BCC4CA;
  --c17-grau-200: #D5DADE;
  --c17-grau-100: #E8EBED;
  --c17-grau-50: #F3F4F5;
  --c17-weiss: #FFFFFF;
  --c17-erfolg: #1E7B47;
  --c17-erfolg-dunkel: #2FBF71;
  --c17-warnung: #FFD000;
  --c17-fehler: #B0103A;
  --c17-fehler-dunkel: #FF4D6A;
  --c17-font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --c17-font-sans: 'Barlow', Arial, sans-serif;
  --c17-font-mono: 'IBM Plex Mono', Consolas, monospace;
  --c17-display-size: 44px; --c17-display-size-desktop: 72px; --c17-display-lh: 0.92; --c17-display-weight: 800;
  --c17-h1-size: 36px; --c17-h1-size-desktop: 48px; --c17-h1-lh: 0.95; --c17-h1-weight: 800;
  --c17-h2-size: 28px; --c17-h2-size-desktop: 36px; --c17-h2-lh: 1.0; --c17-h2-weight: 800;
  --c17-h3-size: 22px; --c17-h3-size-desktop: 24px; --c17-h3-lh: 1.1; --c17-h3-weight: 700;
  --c17-h4-size: 18px; --c17-h4-size-desktop: 19px; --c17-h4-lh: 1.3; --c17-h4-weight: 600;
  --c17-body-lg-size: 18px; --c17-body-lg-size-desktop: 19px; --c17-body-lg-lh: 1.55; --c17-body-lg-weight: 400;
  --c17-body-size: 17px; --c17-body-size-desktop: 17px; --c17-body-lh: 1.6; --c17-body-weight: 400;
  --c17-small-size: 15px; --c17-small-size-desktop: 15px; --c17-small-lh: 1.5; --c17-small-weight: 400;
  --c17-label-size: 12px; --c17-label-size-desktop: 12px; --c17-label-lh: 1.3; --c17-label-weight: 500;
  --c17-data-size: 14px; --c17-data-size-desktop: 15px; --c17-data-lh: 1.4; --c17-data-weight: 500;
  --c17-space-4: 4px;
  --c17-space-8: 8px;
  --c17-space-12: 12px;
  --c17-space-16: 16px;
  --c17-space-24: 24px;
  --c17-space-32: 32px;
  --c17-space-48: 48px;
  --c17-space-64: 64px;
  --c17-space-96: 96px;
  --c17-space-128: 128px;
  --c17-slant-angle: 12deg;
  --c17-slant-ratio: 0.2126; /* tan 12° */
  --c17-radius: 0;
  --c17-accent-line: 4px;
  --c17-content-max: 1200px;
  --c17-gutter: 16px;
  --c17-bg: var(--c17-weiss);
  --c17-surface: var(--c17-grau-50);
  --c17-surface-raised: var(--c17-weiss);
  --c17-line: var(--c17-grau-200);
  --c17-text: var(--c17-nacht);
  --c17-text-muted: var(--c17-grau-600);
  --c17-brand: var(--c17-orange-50);
  --c17-on-brand: var(--c17-nacht);
  --c17-accent-text: var(--c17-orange-35);
  --c17-action: var(--c17-orange-50);
  --c17-action-hover: var(--c17-orange-60);
  --c17-on-action: var(--c17-nacht);
  --c17-info: var(--c17-navy);
  --c17-on-info: var(--c17-weiss);
  --c17-info-line: var(--c17-navy);
  --c17-focus: var(--c17-navy);
  --c17-tint: var(--c17-orange-90);
  --c17-tint-line: var(--c17-orange-50);
  --c17-success: var(--c17-erfolg);
  --c17-on-success: var(--c17-weiss);
  --c17-success-text: var(--c17-erfolg);
  --c17-warning: var(--c17-warnung);
  --c17-on-warning: var(--c17-nacht);
  --c17-danger: var(--c17-fehler);
  --c17-on-danger: var(--c17-weiss);
  --c17-danger-text: var(--c17-fehler);
  color-scheme: light;
}
@media (min-width: 821px) {
  :root {
    --c17-gutter: 48px;
    --c17-display-size: var(--c17-display-size-desktop);
    --c17-h1-size: var(--c17-h1-size-desktop);
    --c17-h2-size: var(--c17-h2-size-desktop);
    --c17-h3-size: var(--c17-h3-size-desktop);
    --c17-h4-size: var(--c17-h4-size-desktop);
    --c17-body-lg-size: var(--c17-body-lg-size-desktop);
    --c17-body-size: var(--c17-body-size-desktop);
    --c17-small-size: var(--c17-small-size-desktop);
    --c17-label-size: var(--c17-label-size-desktop);
    --c17-data-size: var(--c17-data-size-desktop);
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c17-bg: var(--c17-nacht);
    --c17-surface: var(--c17-grau-900);
    --c17-surface-raised: var(--c17-grau-800);
    --c17-line: var(--c17-grau-700);
    --c17-text: var(--c17-grau-50);
    --c17-text-muted: var(--c17-grau-400);
    --c17-accent-text: var(--c17-orange-60);
    --c17-info-line: var(--c17-navy-hell);
    --c17-focus: var(--c17-navy-hell);
    --c17-tint: var(--c17-grau-900);
    --c17-success-text: var(--c17-erfolg-dunkel);
    --c17-danger-text: var(--c17-fehler-dunkel);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --c17-bg: var(--c17-nacht);
  --c17-surface: var(--c17-grau-900);
  --c17-surface-raised: var(--c17-grau-800);
  --c17-line: var(--c17-grau-700);
  --c17-text: var(--c17-grau-50);
  --c17-text-muted: var(--c17-grau-400);
  --c17-accent-text: var(--c17-orange-60);
  --c17-info-line: var(--c17-navy-hell);
  --c17-focus: var(--c17-navy-hell);
  --c17-tint: var(--c17-grau-900);
  --c17-success-text: var(--c17-erfolg-dunkel);
  --c17-danger-text: var(--c17-fehler-dunkel);
  color-scheme: dark;
}