/* ============================================================
   AdsPilot Pro — Design System Variables
   Dark Mode Enterprise Theme
   ============================================================ */

:root {
  /* Background Layers */
  --bg-base:        #0a0c10;
  --bg-surface:     #111318;
  --bg-elevated:    #1a1d24;
  --bg-overlay:     #22262f;
  --bg-hover:       #2a2f3a;

  /* Brand Colors */
  --brand-primary:  #4f8ef7;
  --brand-secondary:#7c5cfc;
  --brand-gradient: linear-gradient(135deg, #4f8ef7 0%, #7c5cfc 100%);

  /* Platform Colors */
  --tiktok-color:   #ff2d55;
  --tiktok-bg:      rgba(255, 45, 85, 0.12);
  --facebook-color: #1877f2;
  --facebook-bg:    rgba(24, 119, 242, 0.12);

  /* Status Colors */
  --success:        #22c55e;
  --success-bg:     rgba(34, 197, 94, 0.12);
  --warning:        #f59e0b;
  --warning-bg:     rgba(245, 158, 11, 0.12);
  --danger:         #ef4444;
  --danger-bg:      rgba(239, 68, 68, 0.12);
  --info:           #06b6d4;
  --info-bg:        rgba(6, 182, 212, 0.12);

  /* Text */
  --text-primary:   #f0f2f5;
  --text-secondary: #9aa3b2;
  --text-muted:     #5a6278;
  --text-inverse:   #0a0c10;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow:    0 0 24px rgba(79,142,247,0.25);

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Sidebar */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Z-index */
  --z-sidebar:  100;
  --z-header:   90;
  --z-modal:    200;
  --z-toast:    300;
  --z-tooltip:  400;
}