/* ===================================
   DESIGN SYSTEM - VARIABLES
   Elegant Dark Theme Portfolio
   =================================== */

:root {
  /* ===== COLOR PALETTE ===== */

  /* Background Colors - Refined dark tones */
  --color-bg-primary: #0a0a0a;
  /* Deep black for main background */
  --color-bg-secondary: #1a1a1a;
  /* Charcoal for cards and sections */
  --color-bg-tertiary: #2a2a2a;
  /* Lighter charcoal for hover states */
  --color-bg-elevated: #222222;
  /* Elevated surfaces */

  /* Text Colors - High contrast, readable */
  --color-text-primary: #f5f5f5;
  /* Off-white for primary text */
  --color-text-secondary: #b0b0b0;
  /* Muted gray for secondary text */
  --color-text-tertiary: #808080;
  /* Subtle gray for captions */

  /* Accent Colors - Sophisticated highlights */
  --color-accent: #c9a961;
  /* Muted gold - elegance and warmth */
  --color-accent-light: #ddb87a;
  /* Light gold for subtle highlights */
  --color-accent-dark: #b8934d;
  /* Dark gold for depth */
  --color-accent-primary: #c9a961;
  /* Primary accent - muted gold */
  --color-accent-secondary: #5a9fa8;
  /* Muted teal - calm sophistication */
  --color-accent-tertiary: #8b7d6b;
  /* Warm taupe - subtle contrast */

  /* Modern Gradient Colors */
  --gradient-primary: linear-gradient(135deg, #c9a961 0%, #5a9fa8 100%);
  --gradient-secondary: linear-gradient(135deg, #8b7d6b 0%, #5a5a5a 100%);
  --gradient-hero: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a2a2a 100%);
  --gradient-card: linear-gradient(145deg, #1a1a1a 0%, #2a2a2a 100%);

  /* Glassmorphism Effects */
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-backdrop: blur(10px);

  /* Interactive States */
  --color-hover: #c9a961;
  /* Gold for hover states */
  --color-focus: #5a9fa8;
  /* Teal for focus indicators */
  --color-active: #ddb87a;
  /* Light gold for active states */

  /* Semantic Colors */
  --color-success: #5a9fa8;
  --color-error: #d46a6a;
  --color-warning: #c9a961;

  /* Border & Divider Colors */
  --color-border-subtle: #2a2a2a;
  --color-border-medium: #3a3a3a;
  --color-border-strong: #4a4a4a;

  /* ===== TYPOGRAPHY ===== */

  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes - Fluid Typography */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 2rem + 1.5vw, 3rem);
  --text-4xl: clamp(3rem, 2.5rem + 2vw, 4rem);

  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 2;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ===== SPACING ===== */
  --space-xs: 0.5rem;
  /* 8px */
  --space-sm: 1rem;
  /* 16px */
  --space-md: 1.5rem;
  /* 24px */
  --space-lg: 2rem;
  /* 32px */
  --space-xl: 3rem;
  /* 48px */
  --space-2xl: 4rem;
  /* 64px */
  --space-3xl: 6rem;
  /* 96px */
  --space-4xl: 8rem;
  /* 128px */

  /* ===== LAYOUT ===== */
  --container-max-width: 1200px;
  --container-padding: 2rem;
  --section-spacing: clamp(4rem, 8vw, 8rem);

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.8);

  /* Glow Effects */
  --glow-gold: 0 0 20px rgba(201, 169, 97, 0.3);
  --glow-teal: 0 0 20px rgba(90, 159, 168, 0.3);

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;
  --transition-slower: 600ms ease-in-out;

  /* Cubic Bezier Easing */
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-quad: cubic-bezier(0.45, 0, 0.55, 1);

  /* ===== Z-INDEX LAYERS ===== */
  --z-background: -1;
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-tooltip: 600;
}

/* ===== DESIGN REASONING =====

COLOR PALETTE:
- Deep blacks (#0a0a0a, #1a1a1a) create sophisticated depth without harshness
- Muted gold (#c9a961) adds warmth and luxury without being flashy
- Muted teal (#5a9fa8) provides cool contrast and calm professionalism
- Off-white (#f5f5f5) ensures readability while maintaining the dark aesthetic

TYPOGRAPHY:
- Inter: Clean, modern sans-serif for body text - excellent readability
- Playfair Display: Elegant serif for headings - adds sophistication
- Fluid typography ensures perfect scaling across all devices

SPACING & LAYOUT:
- Generous whitespace (clamp values) maintains elegance at any viewport
- Max container width (1200px) prevents line length issues on large screens

TRANSITIONS:
- Smooth, purposeful animations enhance UX without distraction
- Custom cubic bezier functions for polished, professional feel

================================= */