/**
 * SANSA AI — Premium Cinematic Dark Design System (global)
 * Background #0B1020 · Glass cards · Orange / Purple / Blue accents
 */
:root {
  /* ── Backgrounds ── */
  --sansa-bg: #0B1020;
  --sansa-bg-secondary: #111827;
  --sansa-bg-card: #161F33;
  --sansa-bg-sidebar: #0F1628;
  --sansa-bg-navbar: rgba(11, 16, 32, 0.92);
  --sansa-glass: rgba(255, 255, 255, 0.05);
  --sansa-glass-strong: rgba(22, 31, 51, 0.88);
  --sansa-promo-bg: linear-gradient(90deg, #FF7A00 0%, #8B5CF6 50%, #3B82F6 100%);

  /* ── Text ── */
  --sansa-text: #FFFFFF;
  --sansa-text-secondary: #CBD5E1;
  --sansa-text-muted: #94A3B8;

  /* ── Brand accents ── */
  --sansa-brand-red: #EF4444;
  --sansa-accent: #3B82F6;
  --sansa-accent-hover: #2563EB;
  --sansa-accent-soft: rgba(59, 130, 246, 0.15);
  --sansa-accent-orange: #FF7A00;
  --sansa-purple: #8B5CF6;
  --sansa-purple-soft: rgba(139, 92, 246, 0.15);
  --sansa-blue: #3B82F6;
  --sansa-blue-soft: rgba(59, 130, 246, 0.12);
  --sansa-pink: #EC4899;
  --sansa-green: #22C55E;
  --sansa-success: #22C55E;
  --sansa-warning: #F59E0B;
  --sansa-danger: #EF4444;

  /* ── Gradients ── */
  --sansa-gradient: linear-gradient(90deg, #FF7A00 0%, #8B5CF6 45%, #3B82F6 100%);
  --sansa-gradient-soft: linear-gradient(135deg, rgba(255, 122, 0, 0.12), rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.12));

  /* ── Borders & shadows ── */
  --sansa-border: rgba(255, 255, 255, 0.08);
  --sansa-border-hover: rgba(255, 255, 255, 0.14);
  --sansa-border-accent: rgba(59, 130, 246, 0.45);
  --sansa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --sansa-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.45);
  --sansa-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55);
  --sansa-shadow-accent: 0 8px 32px rgba(59, 130, 246, 0.25);
  --sansa-glow-accent: 0 0 0 3px rgba(59, 130, 246, 0.25);

  /* ── Layout ── */
  --sansa-sidebar-w: 280px;
  --sansa-header-h: 56px;
  --sansa-promo-h: 44px;
  --sansa-max-w: 1280px;
  --sansa-page-px: clamp(20px, 4vw, 48px);
  --sansa-section-py: clamp(48px, 6vw, 80px);

  /* ── Radius ── */
  --sansa-radius-sm: 8px;
  --sansa-radius-md: 12px;
  --sansa-radius-lg: 16px;
  --sansa-radius-xl: 20px;
  --sansa-radius-pill: 999px;

  /* ── Spacing ── */
  --sansa-space-1: 4px;
  --sansa-space-2: 8px;
  --sansa-space-3: 12px;
  --sansa-space-4: 16px;
  --sansa-space-5: 20px;
  --sansa-space-6: 24px;
  --sansa-space-8: 32px;
  --sansa-space-10: 40px;
  --sansa-space-12: 48px;

  /* ── Typography ── */
  --sansa-font: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif;
  --sansa-font-display: "Inter", system-ui, sans-serif;

  /* ── Motion ── */
  --sansa-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sansa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sansa-duration: 0.22s;
  --sansa-duration-slow: 0.38s;

  /* ── Legacy aliases ── */
  --os-bg: var(--sansa-bg);
  --os-bg-2: var(--sansa-bg-secondary);
  --os-panel: var(--sansa-glass-strong);
  --os-border: var(--sansa-border);
  --os-orange: var(--sansa-accent-orange);
  --os-purple: var(--sansa-purple);
  --os-blue: var(--sansa-blue);
  --os-text: var(--sansa-text);
  --os-muted: var(--sansa-text-muted);
  --os-radius: var(--sansa-radius-lg);
  --os-sidebar-w: var(--sansa-sidebar-w);
  --os-header-h: var(--sansa-header-h);
}

.grad-text,
.text-gradient {
  background: var(--sansa-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}