/* ============================================================
   Icos Live: Design-Tokens nach dem IcosMedia App-Styleguide
   (icos-styleguide.html, Kapitel 1 bis 3; Marke: brand-guide.icos-online.de).

   :root ist die dunkle Bühne in Navy (Leinwand, Präsentation).
   Hell, Dunkel und Auto der App-Seiten (Regie, Anmeldung, Handy)
   stellt live.css über :root.app und data-theme ein.
   ============================================================ */

:root {
  color-scheme: dark;   /* native Widgets (Scrollbars, Date-Picker) auf der Bühne dunkel */

  /* ---- Marke (unveränderlich) ---- */
  --navy: #1E4975;
  --orange: #FF940A;          /* nur Flächen und Akzente; Text auf Orange in Anthrazit */
  --orange-hover: #F08800;
  --orange-text: #B65E00;     /* Orange als Textton auf hellem Grund */
  --orange-text-dark: #FFB45C;/* Orange als Textton auf dunklem Grund */
  --anthrazit: #191919;
  --blue-light: #8FB3DA;      /* zweite Stimme auf Navy */
  --black: #071526;           /* Rand um die Bühne */
  --white: #FFFFFF;
  --on-accent: #191919;       /* Text auf Orange-Flächen */

  /* ---- Hintergrund-Treppe der Bühne (Navy, dunkel nach hell) ---- */
  --bg-0: #071526;
  --bg-1: #0B1F38;
  --bg-2: #0E2540;
  --bg-3: #143052;
  --bg-4: #1B3A60;

  /* ---- Text auf Navy ---- */
  --text-100: #FFFFFF;
  --text-200: rgba(255,255,255,.92);
  --text-300: rgba(255,255,255,.76);
  --text-400: rgba(255,255,255,.62);
  --text-500: rgba(255,255,255,.45);
  --text-600: rgba(255,255,255,.30);

  /* ---- Rahmen ---- */
  --border-subtle: rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.22);
  --border-active: rgba(255,148,10,.55);
  --focus-ring:    rgba(255,148,10,.80);

  /* ---- Status auf Navy (Styleguide Dunkel 1.4) ---- */
  --status-green: #7BD3A5;
  --status-yellow: #FFB45C;
  --status-red: #F49287;

  /* ---- Akzent-Text-Aliase: farbiger Text nutzt diese, nie die Rohtöne ---- */
  --signal-text: var(--orange);
  --ok-text:     var(--status-green);
  --warn-text:   var(--status-yellow);
  --alert-text:  var(--status-red);

  /* ---- Spacing (4er-Raster) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ---- Radien: 6 Badges, 8 Buttons und Felder, 12 Karten ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;   /* nur Punkte, Regler-Knauf und Fortschrittsbalken */

  /* ---- Schatten: nur für schwebende Elemente über der Bühne ---- */
  --shadow-sm: none;
  --shadow-md: 0 8px 24px rgba(4,14,28,.35);
  --shadow-lg: 0 16px 40px rgba(4,14,28,.45);

  /* ---- Typo ---- */
  --font: 'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-display: var(--font);
  --mono: var(--font);   /* Zahlen und Codes: Open Sans mit Tabellenziffern */

  /* ---- Font-Size-Skala ---- */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  /* ---- KI-Denk-Indikator (Warten sichtbar machen) ---- */
  --think-pulse:   1.15s;
  --think-stagger: .16s;
  --think-cycle:   1.5s;
  --think-word-in: .3s;

  /* ---- Layout ---- */
  --container: 1180px;
  --reading: 900px;
}