/* =============================================================================
   xilox.de – UI-Relaunch 2026 · Design-Tokens (Phase 0, FROZEN)
   -----------------------------------------------------------------------------
   Quelle: konzept-2026/readme.md §3, gegen die Zieldesign-PNGs plausibilisiert
   (index.png, inside.png, media.png, placeadd.png, fehlende-bilder.png).
   Alle weiteren CSS-Dateien greifen NUR auf diese Variablen zu.
   ============================================================================= */

:root {
  /* --- Farben · Dark Theme (kühler Blau-Schwarzton) ------------------------ */
  --bg-base:        #131A26;  /* Seitenhintergrund App + Public               */
  --bg-sidebar:     #0E1420;  /* Sidebar / Topbar (etwas tiefer als Base)     */
  --bg-card:        #1B2331;  /* Karten, Panels                               */
  --bg-elevated:    #222C3D;  /* Hover-Zustand von Cards/Rows                 */
  --bg-inset:       #0F1520;  /* Inputs, Code-/Liste-Inlays                   */

  --border:         rgba(148, 163, 184, .14);  /* 1px-Rahmen aller Karten     */
  --border-strong:  rgba(148, 163, 184, .28);  /* Hover-/Fokus-Rahmen         */

  --text-primary:   #F1F5F9;
  --text-secondary: #9AA7B8;  /* Sublabels, Meta-Infos                        */
  --text-muted:     #64748B;  /* Eyebrows (mit letter-spacing)                */

  --accent:         #8FE388;  /* Buttons (Fill), Gantt-Balken, aktive Icons   */
  --accent-text:    #A9EC9F;  /* Akzent-Text/Icons auf dunklem Grund          */
  --accent-tint:    rgba(143, 227, 136, .12); /* Icon-Tiles, aktive Sidebar   */

  --danger:         #EF6E6E;  /* „Heute“-Marker, Fehler-Badges                */
  --paypal-yellow:  #FFC439;  /* PayPal-Fill-Button (aufladung)               */

  /* --- Typo (Poppins, self-hosted via base.css @font-face) ------------------ */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --text-hero-size:      clamp(2.8rem, 6vw, 5rem); /* Hero-H1, weight 600, lh 1.05 */
  --text-section-size:   2.4rem;                    /* Section-Titel, weight 600    */
  --text-page-h1-size:   2.2rem;                    /* Page-H1 (App), weight 600    */
  --text-eyebrow-size:   .75rem;                    /* uppercase, ls .22em          */
  --text-body-size:      1rem;                      /* lh 1.6                       */
  --text-sublabel-size:  .875rem;

  /* --- Radii ----------------------------------------------------------------- */
  --radius-card:    14px;
  --radius-input:   10px;
  --radius-chip:    999px;
  --radius-icon:    12px;

  /* --- Spacing-Skala (BS-Grid bleibt für Spalten) ----------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Shadows ------------------------------------------------------------------ */
  --shadow-card:    0 10px 30px rgba(0, 0, 0, .25);
  --shadow-hover:   0 14px 36px rgba(0, 0, 0, .38);

  /* --- Shell-Maße ----------------------------------------------------------------- */
  --sidebar-width:    264px;
  --topbar-height:    72px;
  --content-maxwidth: 1400px;   /* Content-Maxwidth App */

  /* --- Motion ----------------------------------------------------------------------- */
  --transition-fast: .15s ease;
  --transition-base: .25s ease;
}