/* ===================================
   DESIGN TOKENS
   CI: Rostrot #C25450, IBM Plex, schwarzes Rundlogo.
   Zwei Untergründe: Graphit (dunkel) und Knochenweiß (hell).
   =================================== */

:root {
  /* --- CI-Primärfarbe --- */
  --color-primary: #C25450;
  --color-primary-light: #D16E6A;
  --color-primary-dark: #A63F3B;
  --color-primary-rgb: 194, 84, 80;
  /* Akzent als Text auf dunklem Grund (Kontrast >= 4.5:1) */
  --color-primary-on-dark: #E3837E;

  /* --- Graphit (dunkle Flächen) --- */
  --graphite-950: #0B0C0E;
  --graphite-900: #0F1113;
  --graphite-850: #14171A;
  --graphite-800: #1A1E22;
  --graphite-700: #262B30;
  --graphite-600: #363C42;

  /* --- Knochenweiß (helle Flächen) --- */
  --bone-50: #FBFAF7;
  --bone-100: #F3F1EC;
  --bone-200: #E8E4DC;
  --bone-300: #D6D1C6;

  /* --- Text --- */
  --ink-dark: #15181B;
  --ink-dark-soft: #4E555B;
  --ink-light: #F2EFEA;
  --ink-light-soft: #A9ADAF;

  /* --- Signalfarben (nur für das Signalmotiv) --- */
  --signal-halt: #FF4B3E;
  --signal-fahrt: #3EE28A;

  /* --- Feedback --- */
  --color-success: #2E9D62;
  --color-error: #D64541;

  /* --- Untergrund-Rollen (werden pro Sektion gesetzt) --- */
  --ground: var(--bone-100);
  --surface: var(--bone-50);
  --ink: var(--ink-dark);
  --ink-soft: var(--ink-dark-soft);
  --line: rgba(21, 24, 27, 0.12);
  --accent-text: var(--color-primary-dark);

  /* --- Typografie --- */
  --font-text: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --display-stretch: 85%;

  --t-hero: clamp(3rem, 1.4rem + 6.4vw, 7.75rem);
  --t-display: clamp(2.5rem, 1.3rem + 4.6vw, 5.75rem);
  --t-h2: clamp(2.1rem, 1.35rem + 2.9vw, 4rem);
  --t-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
  --t-h4: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
  --t-lead: clamp(1.15rem, 1.02rem + 0.5vw, 1.45rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.75rem;

  --track-display: -0.025em;
  --track-tight: -0.01em;
  --track-label: 0.14em;

  /* --- Abstände (4px-Basis) --- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.75rem);
  --section-y: clamp(5rem, 2.8rem + 8vw, 10.5rem);
  --container: 1320px;
  --measure: 62ch;

  /* --- Form --- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;
  --radius-pill: 999px;

  /* --- Tiefe --- */
  --e1: 0 1px 2px rgba(11, 12, 14, 0.08), 0 2px 6px rgba(11, 12, 14, 0.06);
  --e2: 0 6px 16px -4px rgba(11, 12, 14, 0.18), 0 2px 4px rgba(11, 12, 14, 0.08);
  --e3: 0 30px 60px -20px rgba(11, 12, 14, 0.45), 0 12px 24px -12px rgba(11, 12, 14, 0.3);
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* --- Bewegung --- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 600ms;

  /* --- Header --- */
  --header-h: 76px;

  /* --- Ebenen --- */
  --z-header: 300;
  --z-menu: 290;
  --z-modal: 500;
  --z-skip: 9999;

  /* --- Legacy-Aliase (Rechtsseiten / Formular-Skripte) --- */
  --font-family-primary: var(--font-text);
  --font-family-heading: var(--font-display);
  --color-text-dark: var(--ink-dark);
  --color-text-medium: var(--ink-dark-soft);
  --color-text-light: #7C8389;
  --color-bg-white: var(--bone-50);
  --color-bg-light: var(--bone-100);
  --color-gray-200: var(--bone-200);
  --color-gray-300: var(--bone-300);
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.15;
  --line-height-relaxed: 1.7;
  --spacing-xs: var(--s-2);
  --spacing-sm: var(--s-4);
  --spacing-md: var(--s-5);
  --spacing-lg: var(--s-6);
  --spacing-xl: var(--s-7);
  --spacing-2xl: var(--s-8);
  --spacing-3xl: var(--s-9);
  --radius-md: var(--radius-m);
  --radius-lg: var(--radius-l);
  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-base: var(--dur-base) var(--ease-out);
}

@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }
}

/* --- Untergrund-Familien: Token UND color gemeinsam setzen --- */
[data-ground="dark"] {
  --ground: var(--graphite-900);
  --surface: var(--graphite-850);
  --ink: var(--ink-light);
  --ink-soft: var(--ink-light-soft);
  --line: rgba(242, 239, 234, 0.12);
  --accent-text: var(--color-primary-on-dark);
  background-color: var(--ground);
  color: var(--ink);
}

[data-ground="light"] {
  --ground: var(--bone-100);
  --surface: var(--bone-50);
  --ink: var(--ink-dark);
  --ink-soft: var(--ink-dark-soft);
  --line: rgba(21, 24, 27, 0.12);
  --accent-text: var(--color-primary-dark);
  background-color: var(--ground);
  color: var(--ink);
}