/* ==========================================================================
   RoomPilot Design-System — tokens.css   (Design v2 — Neon-Indigo, 2026-05-22)
   Single Source of Truth: Farben, Typografie, Abstaende, Radius, Glow, Motion.
   Design v2: tiefes Indigo-Nachtblau als durchgehende Flaeche, helle Kopfleiste,
   dezenter Neon-Glow (AUE-Rot primaer, Violett als zweiter Akzent).
   AUE Corporate Design. CSP-strikt — Glow/Effekte ausschliesslich ueber Klassen.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=PT+Sans:wght@400;700&display=swap');

:root {
  /* ---- Marke (AUE-CD) -------------------------------------------------- */
  --au-rot:          #e20613;
  --au-rot-hover:    #ff2733;
  --au-rot-tief:     #9a1d28;
  --au-beige:        #faf7ec;            /* nur noch fuer die Kopfleiste     */

  /* ---- Canvas: tiefes Indigo-Nachtblau, durchgehende Arbeitsflaeche ----- */
  --rp-canvas:       #0f0f23;
  --rp-canvas-tint:  #14142e;            /* tiefere Zone fuer Verlauf        */

  /* ---- Kopfleiste: helle Flaeche, traegt die zwei Logos ---------------- */
  --rp-header:       #faf7ec;
  --rp-header-line:  rgba(15, 12, 30, 0.12);

  /* ---- Seitenleiste: fast schwarzes Indigo ----------------------------- */
  --rp-sidebar:      #0b0b1c;
  --rp-sidebar-tief: #08081a;
  --rp-sidebar-line: rgba(255, 255, 255, 0.06);

  /* ---- Dunkle Premium-Karten ------------------------------------------- */
  --rp-card:         #1a1a38;            /* Karte, etwas heller als Canvas  */
  --rp-card-raised:  #232348;            /* eingebettete Flaeche (Inputs)   */
  --rp-line:         rgba(255, 255, 255, 0.09);
  --rp-line-strong:  rgba(255, 255, 255, 0.17);

  /* ---- Text auf Dunkel -------------------------------------------------- */
  --rp-ink:          #f3f1fb;            /* Ueberschriften                  */
  --rp-ink-2:        #c7c5dd;            /* Fliesstext                      */
  --rp-ink-3:        #9b98bd;            /* gedaempft, Labels (WCAG-AA-fest) */
  /* ---- Text auf hellem Grund (Kopfleiste) ------------------------------ */
  --rp-ink-dark:     #1a1a2e;

  /* ---- Zweiter Akzent: Violett ----------------------------------------- */
  --rp-violet:       #8b5cf6;
  --rp-violet-hell:  #a78bfa;

  /* ---- Statusfarben (auf Dunkel aufgehellt) ---------------------------- */
  --rp-ok:           #5fc97f;
  --rp-ok-bg:        rgba(95, 201, 127, 0.14);
  --rp-warn:         #e8b04b;
  --rp-warn-bg:      rgba(232, 176, 75, 0.15);
  --rp-danger:       #f0635c;
  --rp-danger-bg:    rgba(240, 99, 92, 0.15);
  --rp-info:         #5fb4e0;
  --rp-info-bg:      rgba(95, 180, 224, 0.15);

  /* ---- Schatten + Glow ------------------------------------------------- */
  --rp-shadow-card:       0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 36px rgba(0, 0, 0, 0.36);
  --rp-shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.5), 0 24px 52px rgba(0, 0, 0, 0.46);
  /* dezenter Neon-Glow — nur an Hover / aktiven Elementen, nicht im Ruhezustand */
  --rp-glow-red:          0 0 22px rgba(226, 6, 19, 0.30);
  --rp-glow-red-strong:   0 0 0 1px rgba(226, 6, 19, 0.55), 0 0 30px rgba(226, 6, 19, 0.34);
  --rp-glow-violet:       0 0 22px rgba(139, 92, 246, 0.24);
  --rp-focus-ring:        0 0 0 3px rgba(226, 6, 19, 0.5);

  /* ---- Typografie (AUE-CD: Merriweather Display, PT Sans Body) ---------- */
  --rp-font-display: 'Merriweather', Georgia, serif;
  --rp-font-body:    'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --rp-fs-hero:   2.6rem;
  --rp-fs-h1:     1.9rem;
  --rp-fs-h2:     1.35rem;
  --rp-fs-h3:     1.05rem;
  --rp-fs-body:   1rem;
  --rp-fs-small:  0.8125rem;
  --rp-fs-micro:  0.6875rem;

  --rp-lh-tight:   1.2;
  --rp-lh-base:    1.55;

  /* ---- Abstaende (8er-Raster) ------------------------------------------ */
  --rp-1:  4px;
  --rp-2:  8px;
  --rp-3:  12px;
  --rp-4:  16px;
  --rp-5:  24px;
  --rp-6:  32px;
  --rp-7:  48px;
  --rp-8:  64px;

  /* ---- Radius ----------------------------------------------------------- */
  --rp-r-xs:   6px;
  --rp-r-sm:   10px;
  --rp-r-md:   14px;
  --rp-r-lg:   20px;
  --rp-r-pill: 999px;

  /* ---- Motion ----------------------------------------------------------- */
  --rp-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --rp-t:      200ms;
  --rp-t-slow: 400ms;

  /* ---- Layout ----------------------------------------------------------- */
  --rp-sidebar-w:   248px;
  --rp-header-h:    74px;
  --rp-content-max: 1240px;

  /* ---- Z-Ebenen --------------------------------------------------------- */
  --rp-z-sidebar: 50;
  --rp-z-header:  60;
  --rp-z-toast:   9000;
  --rp-z-modal:   10000;
}

/* ---- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}
/* dunkler Grund auch hinter body — kein weisses Durchblitzen bei Overscroll */
html { background: var(--rp-canvas); }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }