/**
 * XFactorAI Design Tokens
 * Single source of truth for colors, spacing, typography
 * 
 * Usage: var(--color-primary)
 * 
 * Token naming convention:
 *   --color-{scale}-{stop}    Raw palette values (e.g. --color-neutral-500)
 *   --color-{semantic}        Semantic aliases  (e.g. --color-text, --color-surface)
 *   --color-{status}          Status colours    (e.g. --color-success, --color-danger)
 *   --color-{status}-{variant} Status variants  (e.g. --color-success-bg, --color-danger-dark)
 */

:root {
  /* ========================================
     COLOR SCALES — Raw Palette
     Tailwind-aligned stops for global find-replace
     ======================================== */
  
  /* --- Neutral (Gray) Scale --- */
  --color-neutral-50:  #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;
  
  /* --- Slate Scale --- */
  --color-slate-50:  #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  
  /* --- Green Scale (Status: Success) --- */
  --color-green-50:  #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  
  /* --- Emerald Scale (alternate green) --- */
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;
  --color-emerald-700: #047857;
  --color-emerald-800: #065f46;
  
  /* --- Red Scale (Status: Danger/Error) --- */
  --color-red-50:  #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  
  /* --- Amber Scale (Status: Warning) --- */
  --color-amber-50:  #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-200: #fde68a;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-amber-700: #b45309;
  --color-amber-800: #92400e;
  --color-amber-900: #78350f;
  
  /* --- Yellow Scale --- */
  --color-yellow-50:  #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-500: #eab308;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  
  /* --- Blue Scale (Status: Info) --- */
  --color-blue-50:  #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  
  /* --- Sky/Cyan Scale --- */
  --color-sky-50:  #f0f9ff;
  --color-sky-100: #e0f2fe;
  --color-sky-200: #bae6fd;
  --color-sky-300: #7dd3fc;
  --color-sky-500: #0ea5e9;
  --color-sky-600: #0284c7;
  --color-sky-700: #0369a1;
  --color-sky-800: #0c4a6e;
  
  /* --- Indigo Scale --- */
  --color-indigo-50:  #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  
  /* --- Violet Scale --- */
  --color-violet-50:  #f5f3ff;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;
  --color-violet-800: #5b21b6;
  
  /* --- Orange Scale (Brand-adjacent) --- */
  --color-orange-50:  #fff7ed;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  
  /* --- Teal Scale --- */
  --color-teal-500: #14b8a6;
  --color-teal-600: #0891b2;
  
  /* ========================================
     BRAND COLORS
     ======================================== */
  
  /* Brand - Primary blue */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-dark: #1e40af;
  --color-primary-light: rgba(37, 99, 235, 0.08);
  --color-primary-lighter: rgba(37, 99, 235, 0.04);
  --color-accent-gold: #60a5fa;
  --color-accent-warm: #93c5fd;
  
  /* Premium Gradients */
  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  --gradient-primary-hover: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
  --gradient-gold: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.15) 0%, transparent 70%);
  
  /* ========================================
     SEMANTIC STATUS COLORS
     Each status has: base, -light (alpha), -bg (solid), -dark
     ======================================== */
  
  /* Success */
  --color-success:       #22c55e;
  --color-success-light: rgba(34, 197, 94, 0.08);
  --color-success-bg:    #f0fdf4;
  --color-success-dark:  #16a34a;
  
  /* Warning */
  --color-warning:       #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.08);
  --color-warning-bg:    #fffbeb;
  --color-warning-dark:  #d97706;
  
  /* Error / Danger */
  --color-error:         #ef4444;
  --color-error-light:   rgba(239, 68, 68, 0.08);
  --color-error-bg:      #fef2f2;
  --color-error-dark:    #dc2626;
  --color-danger:        #dc2626;
  --color-danger-bg:     #fef2f2;
  --color-danger-dark:   #991b1b;
  
  /* Info */
  --color-info:          #3b82f6;
  --color-info-light:    rgba(59, 130, 246, 0.08);
  --color-info-bg:       #eff6ff;
  --color-info-dark:     #2563eb;
  
  /* ========================================
     SEMANTIC NEUTRALS
     ======================================== */
  
  /* Text */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-muted: #999999;
  --color-text-inverse: #ffffff;
  
  /* Borders */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(0, 0, 0, 0.12);
  --color-border-light: rgba(0, 0, 0, 0.05);
  --color-border-solid: #e5e7eb;
  
  /* Surfaces */
  --color-surface: #ffffff;
  --color-surface-secondary: #fafafa;
  --color-surface-tertiary: #f5f5f5;
  --color-background: #ffffff;
  --color-background-alt: #f9f9f9;
  --color-background-muted: #f3f4f6;
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Courier New', monospace;
  
  /* Scale */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  
  /* Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.7;
  
  /* ========================================
     SPACING
     ======================================== */
  
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  
  /* ========================================
     BORDERS & RADIUS
     ======================================== */
  
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* ========================================
     SHADOWS - Premium depth system
     ======================================== */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.06);
  
  /* Elevated cards */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
  
  /* Brand shadows */
  --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.3);
  --shadow-primary-lg: 0 8px 24px rgba(37, 99, 235, 0.35);
  --shadow-primary-glow: 0 0 20px rgba(37, 99, 235, 0.2);
  
  /* Inner shadows for inputs */
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-inset-focus: inset 0 1px 2px rgba(37, 99, 235, 0.1);
  
  /* ========================================
     TRANSITIONS - Smooth premium feel
     ======================================== */
  
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
  
  /* ========================================
     LAYOUT
     ======================================== */
  
  --sidebar-width: 240px;
  --header-height: 56px;
  --status-bar-height: 32px;
  --max-content-width: 880px;
  
  /* ========================================
     ACTIONS PANEL
     
     Requirements:
     - Handle: 48px wide
     - Expanded: ~280px content width
     - Height: GROWS to fit content (NOT full viewport)
     - Max-height: scroll when exceeds
     - Rounded left corners + shadow
     - Animation: 250-300ms slide
     ======================================== */
  
  --actions-panel-width-collapsed: 48px;
  --actions-panel-width-expanded: 280px;
  --actions-panel-max-height: 70vh;
  --actions-panel-animation-duration: 280ms;
  --actions-panel-animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --actions-panel-border-radius: 12px;
  --actions-panel-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  --actions-panel-glow-color: rgba(37, 99, 235, 0.5);
  --actions-panel-glow-size: 0 0 20px;
  --actions-panel-badge-bg: var(--color-primary);
  --actions-panel-badge-text: #ffffff;
  --actions-panel-handle-bg: var(--color-surface-secondary);
  --actions-panel-content-bg: var(--color-surface);
  
  /* ========================================
     READING PANE TABS (Pill Style)
     ======================================== */
  
  --tab-bar-height: 52px;
  --tab-bar-padding: 8px 16px;
  --tab-gap: 8px;
  --tab-padding: 8px 16px;
  --tab-radius: 20px;
  --tab-font-size: 13px;
  --tab-icon-size: 14px;
  
  /* Tab colors — light-blue selected, grey inactive */
  --tab-bg: #F1F5F9;
  --tab-bg-hover: #E2E8F0;
  --tab-bg-active: #DBEAFE;
  --tab-text: #94A3B8;
  --tab-text-hover: #64748B;
  --tab-text-active: #2563EB;
  --tab-border: #E2E8F0;
  --tab-border-active: #BFDBFE;
  
  /* Tab status indicators */
  --tab-running-pulse: var(--color-primary-light);
  --tab-complete-badge: var(--color-success);
  --tab-error-badge: var(--color-error);
  
  /* ========================================
     COMPOSE AREA
     ======================================== */
  
  --compose-header-padding: 12px 16px;
  --compose-toolbar-height: 40px;
  --compose-body-padding: 16px;
  --compose-footer-padding: 12px 16px;
  --compose-min-height: 200px;
  --compose-field-height: 36px;
  
  /* ========================================
     ORIGINAL EMAIL PREVIEW
     ======================================== */
  
  --original-preview-lines: 3;
  --original-preview-height: 72px;
  --original-max-height: 400px;
  --original-fade-height: 24px;
  
  /* ========================================
     GLASSMORPHISM
     ======================================== */
  
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-blur: blur(12px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override tokens for dark mode when needed */
  }
}