/* === ROOT VARIABLES === */
:root {
  /* Text scaling - keeps text sizes perfect across all resolutions */
  --text-scale: calc(0.65 + 0.2 * (100vw - 1366px) / (2560px - 1366px));
  --text-scale: clamp(0.65, var(--text-scale), 0.85);
  
  /* Layout scaling - makes containers/widths smaller on 1080p */
  --layout-scale: calc(0.58 + 0.22 * (100vw - 1366px) / (2560px - 1366px));
  --layout-scale: clamp(0.58, var(--layout-scale), 0.80);
  
  /* Master scale for backwards compatibility (uses layout scale) */
  --master-scale: var(--layout-scale);
  
  /* Dark theme color palette */
  --bg-primary: #0a0a0f;
  --bg-secondary: #131318;
  --bg-tertiary: #1a1a22;
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --bg-glass-active: rgba(255, 255, 255, 0.12);
  
  /* Accent colors - Vibrant cyber palette */
  --accent-primary: #00aaff;
  --accent-secondary: #3a7ced;
  --accent-tertiary: #f59e0b;
  --accent-success: #10b981;
  --accent-warning: #f59e0b;
  --accent-error: #ef4444;

  /* Legacy/special use blue */
  --legacy-primary-blue: #00d4ff;
  
  /* Legacy color mappings for compatibility */
  --primary-color: var(--accent-primary);
  --secondary-color: var(--bg-secondary);
  --accent-color: #ff7f50;
  --text-color: var(--text-primary);
  --dark-bg: var(--bg-primary);
  --card-bg: var(--bg-tertiary);
  --border-color: var(--border-primary);
  --success-color: var(--accent-success);
  --error-color: var(--accent-error);
  --hover-color: var(--bg-glass-hover);
  
  /* Gradient backgrounds */
  --gradient-primary: linear-gradient(135deg, 
    rgba(0, 170, 255, 0.1) 0%, 
    rgba(58, 124, 237, 0.1) 50%, 
    rgba(245, 158, 11, 0.1) 100%);
  --gradient-accent: linear-gradient(135deg, 
    var(--accent-primary) 0%, 
    var(--accent-secondary) 100%);
  --gradient-surface: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  
  /* Text colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-accent: var(--accent-primary);
  
  /* Borders and shadows */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(0, 170, 255, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 32px rgba(0, 170, 255, 0.2);
  
  /* Glassmorphism effects */
  --glass-blur: 16px;
  --glass-blur-heavy: 24px;
  
  /* Spacing system (using layout scale for containers/widths) */
  --space-xs: calc(0.5rem * var(--layout-scale));
  --space-sm: calc(1rem * var(--layout-scale));
  --space-md: calc(1.5rem * var(--layout-scale));
  --space-lg: calc(2rem * var(--layout-scale));
  --space-xl: calc(3rem * var(--layout-scale));
  --space-2xl: calc(4rem * var(--layout-scale));
  
  /* Typography (using text scale to keep perfect text sizes) */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-size-sm: calc(0.875rem * var(--text-scale));
  --font-size-base: calc(1rem * var(--text-scale));
  --font-size-lg: calc(1.125rem * var(--text-scale));
  --font-size-xl: calc(1.25rem * var(--text-scale));
  --font-size-2xl: calc(1.5rem * var(--text-scale));
  --font-size-3xl: calc(1.875rem * var(--text-scale));
  --font-size-4xl: calc(2.25rem * var(--text-scale));
  
  /* Component sizing (using layout scale for widths/containers) */
  --input-height: calc(38px * var(--layout-scale));
  --button-height: calc(38px * var(--layout-scale));
  --border-radius: calc(8px * var(--layout-scale));
  --border-radius-sm: calc(12px * var(--layout-scale));
  --border-radius-lg: calc(16px * var(--layout-scale));
  
  /* Animation timing */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Breakpoint-specific scale adjustments */
@media (max-width: 1366px) {
  :root {
    --text-scale: 0.65;
    --layout-scale: 0.58;
  }
}

@media (min-width: 1367px) and (max-width: 1920px) {
  :root {
    --text-scale: 0.70;
    --layout-scale: 0.63;
  }
}

@media (min-width: 1921px) and (max-width: 2560px) {
  :root {
    --text-scale: 0.90;
    --layout-scale: 0.85;
  }
}

@media (min-width: 2561px) {
  :root {
    --text-scale: 0.85;
    --layout-scale: 0.80;
  }
}

/* Additional fine-tuning for common resolutions */
@media (width: 1920px) {
  :root {
    --text-scale: 0.75; /* Keep text perfect */
    --layout-scale: 0.60; /* Make containers ~10% smaller */
  }
}

@media (width: 1366px) {
  :root {
    --text-scale: 0.65;
    --layout-scale: 0.56;
  }
}

@media (width: 1440px) {
  :root {
    --text-scale: 0.68;
    --layout-scale: 0.59;
  }
}

/* Phones */
@media (max-width: 768px) {
  :root {
    --text-scale: 0.85;
    --layout-scale: 0.95;
  }
  body {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Small phones */
@media (max-width: 480px) {
  :root {
    --text-scale: 0.9;
    --layout-scale: 1.0;
  }
}

/* Button width fixes - ADD these in addition */
@media (max-width: 768px) {
  .input-container {
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
  }
  
  .input-container .form-button {
    align-self: flex-start;
    width: auto !important;
    min-width: auto !important;
    display: inline-block !important;
  }
}

/* Global styles and resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: calc(1.6 * var(--text-scale));
  color: var(--text-color);
  background-color: var(--dark-bg);
}

/* Utility classes and animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes button-loading-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes progressStripes {
  0% {
    background-position: calc(40px * var(--layout-scale)) 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
  }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fadeInPulse {
  0% { 
    opacity: 0; 
    transform: scale(0.98); 
    box-shadow: 0 0 0 rgba(245, 158, 11, 0);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.01); 
    box-shadow: 0 0 32px rgba(245, 158, 11, 0.25), var(--shadow-md);
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.2), var(--shadow-md);
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: calc(8px * var(--layout-scale));
  height: calc(8px * var(--layout-scale));
}

::-webkit-scrollbar-track {
  background: var(--secondary-color);
}

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: calc(4px * var(--layout-scale));
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}