/* MakoClip Design System v1 - Global Variables */

:root {
  /* PRIMARY: Predatory Orange (Speed & Precision) */
  --primary: #ff6b35;
  --primary-dark: #e55100;
  --primary-light: #ff8856;
  
  /* SECONDARY: Tech Cyan (Trust & Intelligence) */
  --secondary: #0ea5e9;
  --secondary-dark: #0284c7;
  
  /* ACCENT: Neon Cyan (Precision & Highlights) */
  --accent: #06d6f0;
  --accent-dark: #00b8d4;
  
  /* SPEED: Neon Lime (Urgency & Energy) */
  --speed: #00ff88;
  --speed-dark: #00cc66;
  
  /* NEUTRALS: Unified darkness */
  --dark: #0f1720;
  --dark-light: #1e293b;
  --dark-elevated: #334155;
  
  /* TEXT: Sharp contrast */
  --text: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dark: #64748b;
  
  /* UTILITY: Actions & states */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #0ea5e9;
  
  /* BORDERS */
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-hover: rgba(255, 255, 255, 0.15);
  
  /* GRADIENTS: Dynamic motion */
  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ff8856 100%);
  --gradient-accent: linear-gradient(135deg, #ff6b35 0%, #0ea5e9 100%);
  --gradient-motion: linear-gradient(90deg, #ff6b35 0%, #00ff88 50%, #06d6f0 100%);
  --gradient-soft: linear-gradient(135deg, rgba(255, 107, 53, 0.08) 0%, rgba(6, 214, 240, 0.08) 100%);
  
  /* TYPOGRAPHY */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;
  
  /* SIZES */
  --size-xxs: 0.625rem;
  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.125rem;
  --size-xl: 1.5rem;
  --size-2xl: 2rem;
  --size-3xl: 3rem;
  --size-4xl: 4rem;
  
  /* BORDER RADIUS: Sharp precision */
  --radius-sharp: 2px;
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  
  /* SHADOWS: Warm, energetic */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(255, 107, 53, 0.15);
  --shadow-lg: 0 10px 30px rgba(255, 107, 53, 0.2);
  --shadow-xl: 0 20px 50px rgba(255, 107, 53, 0.25);
  
  /* TRANSITIONS: Sharp, responsive */
  --transition-sharp: 0.08s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-base: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-motion: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* LAYOUT */
  --sidebar-width: 260px;
  --header-height: 68px;
  --max-width: 1200px;
}

/* Dark theme (default) */
body {
  background: var(--dark);
  color: var(--text);
}