/* ═══════════════════════════════════════════════════════════════
   RepuVerse AI — Design Tokens (Enhanced Professional Theme)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Background hierarchy ── */
  --bg-root:        #04070f;
  --bg-body:        #080c18;
  --bg-surface:     #0e1224;
  --bg-card:        #121830;
  --bg-card-hover:  #181e3a;
  --bg-elevated:    #1c2444;
  --bg-input:       #0a0f1e;
  --bg-overlay:     rgba(4, 7, 15, .78);

  /* ── Accent palette ── */
  --accent:         #00d4ff;
  --accent-dim:     rgba(0, 212, 255, .10);
  --accent-glow:    rgba(0, 212, 255, .20);
  --accent-2:       #6c3cff;
  --accent-2-dim:   rgba(108, 60, 255, .10);
  --accent-2-glow:  rgba(108, 60, 255, .20);
  --accent-3:       #ff5ebc;
  --accent-3-dim:   rgba(255, 94, 188, .10);

  /* ── Semantic colours ── */
  --success:        #00e676;
  --success-dim:    rgba(0, 230, 118, .10);
  --warning:        #ffab00;
  --warning-dim:    rgba(255, 171, 0, .10);
  --danger:         #ff1744;
  --danger-dim:     rgba(255, 23, 68, .10);
  --info:           #448aff;
  --info-dim:       rgba(68, 138, 255, .10);

  /* ── Text ── */
  --text-primary:   #e4e9f2;
  --text-secondary: #7e8aa0;
  --text-muted:     #4e5a72;
  --text-inverse:   #04070f;

  /* ── Typography ── */
  --font-family:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;
  --fs-xs:   .6875rem;
  --fs-sm:   .75rem;
  --fs-base: .875rem;
  --fs-md:   1rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-loose:    1.75;

  /* ── Spacing scale ── */
  --sp-1:  .25rem;
  --sp-2:  .5rem;
  --sp-3:  .75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* ── Borders & radii ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --radius-full:50%;
  --border:     1px solid rgba(255, 255, 255, .05);
  --border-accent: 1px solid rgba(0, 212, 255, .20);
  --border-glow: 1px solid rgba(0, 212, 255, .35);

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, .55);
  --shadow-glow:0 0 24px rgba(0, 212, 255, .12);
  --shadow-glow-purple:0 0 24px rgba(108, 60, 255, .12);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 212, 255, .08);

  /* ── Transitions ── */
  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-spring:cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --dur-slow:   400ms;

  /* ── Layout ── */
  --sidebar-width:      260px;
  --sidebar-collapsed:  72px;
  --topbar-height:      64px;
  --chat-panel-width:   420px;

  /* ── Z-index layers ── */
  --z-base:    1;
  --z-sticky:  10;
  --z-sidebar: 100;
  --z-topbar:  200;
  --z-modal:   500;
  --z-toast:   600;
  --z-chat:    400;
}

/* ── Glassmorphism ── */
.glass {
  background: rgba(14, 18, 36, .60);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: var(--border);
}

.glass-accent {
  background: rgba(0, 212, 255, .05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: var(--border-accent);
  box-shadow: inset 0 0 40px rgba(0, 212, 255, .03);
}