/* =============================================================
   neurabot · variables.css
   Zentrale Design-Tokens (Single Source of Truth).
   Farben, Typografie, Abstände, Radien, Schatten, Z-Index, Timing.
   ============================================================= */

:root {
  /* ---- Markenfarben (aus dem neurabot-Logo abgeleitet) ---- */
  --c-blue:        #0a4df4;   /* Electric Blue – Primärfarbe */
  --c-blue-bright: #3b76ff;   /* helleres Blau für Highlights */
  --c-blue-soft:   #6f9bff;   /* weiches Blau für Verläufe */
  --c-navy:        #001963;   /* tiefes Navy aus dem Wortbild */
  --c-green:       #22e3a4;   /* Erfolg / Break-Even */
  --c-red:         #ff5d7a;   /* Verlust / Warnung */
  --c-amber:       #ffd23f;   /* Akzent (sparsam) */

  /* ---- Neutrale / Hintergründe (Dark Mode) ---- */
  --c-ink:         #050917;   /* Basis-Hintergrund, fast schwarz */
  --c-ink-2:       #070d22;
  --c-surface:     #0b1430;   /* Karten-Oberfläche */
  --c-surface-2:   #0e1a3d;
  --c-white:       #f4f7ff;   /* Primärtext */
  --c-mut:         #8a98c4;   /* gedämpfter Text */
  --c-mut-2:       #5d6a96;   /* sehr dezenter Text */

  /* ---- Linien / Glas ---- */
  --line:          rgba(140, 165, 255, 0.12);
  --line-strong:   rgba(140, 165, 255, 0.22);
  --glass:         rgba(14, 26, 61, 0.55);
  --glass-strong:  rgba(14, 26, 61, 0.85);

  /* ---- Typografie ---- */
  --font-disp: 'Bricolage Grotesque', 'Segoe UI', sans-serif; /* Display */
  --font-body: 'Manrope', system-ui, sans-serif;             /* Fliesstext */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;    /* technische Akzente */

  /* Fluid type scale (clamp = responsive ohne Media Queries) */
  --fs-display: clamp(3rem, 9vw, 8rem);
  --fs-h1:      clamp(2.6rem, 6.5vw, 5.6rem);
  --fs-h2:      clamp(2rem, 4.6vw, 3.6rem);
  --fs-h3:      clamp(1.2rem, 2vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;

  /* ---- Layout ---- */
  --maxw:    1240px;
  --gutter:  clamp(20px, 4vw, 40px);
  --radius:  20px;
  --radius-lg: 28px;

  /* ---- Schatten / Glow ---- */
  --shadow-soft:  0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --shadow-card:  0 40px 90px -40px rgba(0, 0, 0, 0.85);
  --glow-blue:    0 8px 40px rgba(10, 77, 244, 0.5);
  --glow-green:   0 8px 40px rgba(34, 227, 164, 0.35);

  /* ---- Bewegung / Timing (eased für Premium-Feeling) ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   0.25s;
  --t-med:    0.45s;
  --t-slow:   0.8s;

  /* ---- Z-Index Skala ---- */
  --z-canvas:  0;
  --z-content: 2;
  --z-nav:     100;
  --z-cursor:  9999;
}