/* ===== CSS Variables ===== */
:root {
  /* Colors */
  --primary: #3b82c4;
  --primary-dark: #2c6494;
  --secondary: #5b9bd0;
  --accent: #8fc2e8;
  --success: #10b981;
  --warning: #f59e0b;

  --copper: #e8935a;
  --copper-dark: #c9723a;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #3b82c4 0%, #1e4f78 100%);
  --gradient-accent: linear-gradient(135deg, #e8935a 0%, #c9723a 100%);
  --gradient-hero: linear-gradient(180deg, #05070c 0%, #0a0f16 50%, #05070c 100%);
  --gradient-card: linear-gradient(135deg, rgba(59, 130, 196, 0.08) 0%, rgba(30, 79, 120, 0.08) 100%);

  /* Neutral Colors */
  --bg-primary: #05070c;
  --bg-secondary: #0a0f16;
  --bg-card: #0a0f16;
  --text-primary: #f0f6ff;
  --text-secondary: #7d8a9c;
  --text-muted: #4b5e73;
  --border: rgba(59, 130, 196, 0.14);
  --grid-line: rgba(59, 130, 196, 0.05);

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 40px rgba(59, 130, 196, 0.35);
  --shadow-glow-copper: 0 0 32px rgba(232, 147, 90, 0.45);

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

  /* Container */
  --container-max-width: 1200px;
}