/*
 * Jarvis Design System — Tokens
 *
 * Dark-first. Basis ist tiefes Navy-Schwarz, Akzent ist Gold/Orange.
 * Kein reines #000000: auf OLED-Displays "schmiert" das beim Scrollen
 * und Schatten sind darauf nicht darstellbar.
 *
 * Kontrast (WCAG) gegen --bg-base gemessen:
 *   --text        #F1F5F9  -> 16.9:1
 *   --text-muted  #9BA8BF  ->  7.9:1
 *   --gold        #F5B547  -> 10.6:1
 *   --orange      #FF8A3D  ->  8.2:1
 *   --danger      #F87171  ->  6.9:1
 * Alle ueber der 4.5:1-Schwelle fuer Fliesstext.
 */

:root {
  color-scheme: dark;

  /* ---- Flaechen ---- */
  --bg-base: #0b0f19;
  --bg-surface: #131926;
  --bg-surface-2: #1a2233;
  --bg-inset: #090d15;
  --bg-overlay: rgba(6, 9, 15, 0.72);

  /* ---- Linien ---- */
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* ---- Text ---- */
  --text: #f1f5f9;
  --text-muted: #9ba8bf;
  /* War #6b7a94 — auf --bg-surface nur 4.05-4.48:1 und damit unter der
     4.5:1-Schwelle fuer Fliesstext. Angehoben auf 5.7:1. */
  --text-subtle: #8593ad;

  /* ---- Akzent ---- */
  --gold: #f5b547;
  --gold-soft: #ffd489;
  --gold-deep: #c98a24;
  --orange: #ff8a3d;
  --accent-gradient: linear-gradient(135deg, #f5b547 0%, #ff8a3d 100%);

  /* Gold auf getoenten Flaechen — ersetzt harte Fuellungen, damit
     Badges und aktive Zustaende nicht wie Warnungen wirken. */
  --gold-tint: rgba(245, 181, 71, 0.12);
  --gold-tint-strong: rgba(245, 181, 71, 0.2);
  --gold-ring: rgba(245, 181, 71, 0.4);

  /* ---- Status ---- */
  --danger: #f87171;
  --danger-tint: rgba(248, 113, 113, 0.12);
  --success: #4ade80;
  --info: #7dd3fc;

  /* ---- Abstaende (dichte Dashboard-Skala) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Radien ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 6px 20px -6px rgba(245, 181, 71, 0.45);

  /* ---- Typografie ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* ---- Bewegung (150-300ms, darueber wirkt UI traege) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 140ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);

  /* ---- Ebenen ----
     Das ElevenLabs-Widget setzt sich selbst auf z-index 1000. Der Dialog
     muss darueber liegen, sonst verdeckt das Widget die Formularfelder. */
  --z-nav: 20;
  --z-voice: 40;
  --z-modal: 1100;

  /* ---- Layout ---- */
  --sidebar-width: 236px;
  --bottom-nav-height: 64px;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1100px;
  /* Das Dashboard braucht mehr Breite als die alten Einzelseiten
     (drei Spalten + volle Sektionen), 1080px wirkte dort schon eng. */
  --content-width-dashboard: 1440px;

  /* ---- Fortschritts-Ringe (Arbeitszeiten-Widget) ---- */
  --ring-track: rgba(255, 255, 255, 0.08);
}