/* ═══════════════════════════════════════════════════════════
   ECLYSS V1.1 — Design Tokens
   Paletă recalibrată: contrast îmbunătățit, identitate păstrată
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Backgrounds — diferențe clare între layere ─────────
     fiecare nivel e cu ~6-8% mai deschis decât precedentul  */
  --bg-base:    #08081a;   /* fundal absolut — aproape negru-violet */
  --bg-1:       #0e0e24;   /* sidebar, topbar                       */
  --bg-2:       #13132e;   /* card-uri, panouri secundare           */
  --bg-3:       #1a1a3a;   /* input-uri, elemente interactive       */
  --bg-4:       #222248;   /* hover state pe elemente închise       */
  --bg-5:       #2a2a58;   /* tooltip-uri, overlay-uri ușoare       */

  /* Glass (pentru blur/glassmorphism) */
  --bg-glass:    rgba(14,14,36,0.6);
  --bg-glass-md: rgba(14,14,36,0.75);
  --bg-glass-lg: rgba(14,14,36,0.88);
  --bg-hover:    rgba(124,58,237,0.08);
  --bg-active:   rgba(124,58,237,0.18);
  --bg-input:    rgba(255,255,255,0.04);

  /* ── Brand / Accent ─────────────────────────────────────  */
  --accent:      #7c3aed;   /* violet primar Eclyss                  */
  --accent-2:    #6d28d9;   /* violet mai adânc (pressed)            */
  --accent-3:    #8b5cf6;   /* violet mediu                          */
  --accent-soft: rgba(124,58,237,0.14);
  --accent-glow: #a78bfa;   /* violet deschis (text pe dark, glow)   */
  --accent-light:#ddd6fe;   /* violet foarte deschis (hint text)     */
  --accent-pink: #ec4899;   /* accent secundar roz                   */
  --accent-cyan: #06b6d4;   /* accent terțiar cyan                   */

  /* ── Gradients ──────────────────────────────────────────  */
  --grad-brand:     linear-gradient(135deg, #7c3aed 0%, #a855f7 55%, #ec4899 100%);
  --grad-h:         linear-gradient(90deg,  #7c3aed 0%, #a855f7 100%);
  --grad-h-pink:    linear-gradient(90deg,  #7c3aed 0%, #ec4899 100%);
  --grad-subtle:    linear-gradient(135deg, rgba(124,58,237,0.12), rgba(168,85,247,0.06));
  --grad-chat-out:  linear-gradient(145deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
  --grad-sidebar:   linear-gradient(180deg, #0e0e24 0%, #0c0c20 100%);

  /* ── Glow ────────────────────────────────────────────────  */
  --glow-xs:  0 0 8px  rgba(124,58,237,0.2);
  --glow-sm:  0 0 16px rgba(124,58,237,0.3);
  --glow-md:  0 0 28px rgba(124,58,237,0.4);
  --glow-lg:  0 0 48px rgba(124,58,237,0.5);
  --glow-pink:0 0 24px rgba(236,72,153,0.35);
  --glow-cyan:0 0 20px rgba(6,182,212,0.3);

  /* ── Text — 4 niveluri de contrast clar definite ────────
     t1: titluri/text principal  ~95% luminozitate
     t2: text secundar           ~65% luminozitate
     t3: placeholder/hint        ~40% luminozitate
     t4: text invizibil/linii    ~22% luminozitate          */
  --t1:      #eeeeff;   /* alb-violaceu — text principal     */
  --t2:      #9898c0;   /* gri-violet — text secundar        */
  --t3:      #5a5a80;   /* gri mediu — placeholder, timp     */
  --t4:      #2e2e4a;   /* gri adânc — separatoare subtile   */
  --t-accent:#b4a0ff;   /* violet deschis — link-uri, accent */
  --t-on-accent: #ffffff; /* text pe butoane cu gradient     */

  /* ── Status colors ──────────────────────────────────────  */
  --green:        #22c55e;
  --green-dim:    #16a34a;
  --green-soft:   rgba(34,197,94,0.12);
  --green-glow:   0 0 12px rgba(34,197,94,0.4);

  --red:          #f87171;
  --red-dim:      #ef4444;
  --red-soft:     rgba(248,113,113,0.12);

  --yellow:       #fbbf24;
  --yellow-soft:  rgba(251,191,36,0.12);

  --info:         #60a5fa;
  --info-soft:    rgba(96,165,250,0.12);

  /* ── Borders — 3 niveluri vizibile ──────────────────────
     Problemă veche: b1=0.05 era invizibil pe bg dark
     Acum: toate borderele au suficient contrast            */
  --b1:      rgba(255,255,255,0.07);   /* subtil — separatoare interne   */
  --b2:      rgba(255,255,255,0.12);   /* default — card, input          */
  --b3:      rgba(255,255,255,0.20);   /* prominent — hover, focus light  */
  --b-accent:rgba(124,58,237,0.45);    /* violet — focus ring, active    */
  --b-pink:  rgba(236,72,153,0.35);
  --bfocus:  rgba(124,58,237,0.65);    /* focus outline                  */

  /* ── Shadows ─────────────────────────────────────────────  */
  --shadow-xs: 0 1px 4px  rgba(0,0,0,0.35);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.65);
  --shadow-xl: 0 16px 64px rgba(0,0,0,0.75);

  /* ── Radius ──────────────────────────────────────────────  */
  --r-xs:  3px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 30px;
  --r-full:9999px;

  /* ── Spacing ─────────────────────────────────────────────  */
  --s1:4px; --s2:8px; --s3:14px; --s4:20px;
  --s5:28px; --s6:40px; --s7:60px;

  /* ── Font ────────────────────────────────────────────────  */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Layout ──────────────────────────────────────────────  */
  --sidebar-w:    300px;
  --topbar-h:     60px;
  --bottom-nav-h: 64px;

  /* ── Transitions ─────────────────────────────────────────  */
  --t-fast:   120ms ease;
  --t-mid:    220ms ease;
  --t-slow:   350ms ease;
  --t-spring: 380ms cubic-bezier(.16,1,.3,1);
  --t-bounce: 500ms cubic-bezier(.34,1.56,.64,1);

  /* ── Z-index ─────────────────────────────────────────────  */
  --z1:10; --z2:100; --z3:200; --z4:300; --z5:400;
}

/* ── Scrollbar ───────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--b2) transparent; }
::-webkit-scrollbar       { width:4px; height:4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-3); }