/* ========================================
   MINDPLANE Portfolio - CSS Variables
   Design System & Custom Properties
   ======================================== */

:root {
  /* ===== Colors ===== */
  --bg-primary: #FFFFFF;
  --text-primary: #0D0D0D;
  --text-secondary: rgba(0, 0, 0, 0.6);
  --border-color: rgba(0, 0, 0, 0.08);
  --shadow-subtle: rgba(0, 0, 0, 0.05);
  --accent-dark: #111111;
  
  /* ===== Typography ===== */
  --font-primary: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-hero: clamp(2.5rem, 5vw, 4.5rem);
  --font-size-heading: clamp(1.75rem, 3vw, 2.5rem);
  --font-size-body: clamp(1rem, 1.5vw, 1.125rem);
  --font-size-small: clamp(0.875rem, 1.2vw, 1rem);
  
  /* ===== Spacing ===== */
  --spacing-section: clamp(4rem, 8vw, 8rem);
  --spacing-large: clamp(2rem, 4vw, 4rem);
  --spacing-medium: clamp(1.5rem, 3vw, 2rem);
  --spacing-small: clamp(1rem, 2vw, 1.5rem);
  
  /* ===== Layout ===== */
  --max-width: 1200px;
  --radius: 12px;
  --radius-small: 8px;
  --radius-large: 16px;
  
  /* ===== Transitions ===== */
  --transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ===== Shadows ===== */
  --shadow-sm: 0 2px 8px var(--shadow-subtle);
  --shadow-md: 0 4px 16px var(--shadow-subtle);
  --shadow-lg: 0 8px 32px var(--shadow-subtle);
  
  /* ===== Z-Index Scale ===== */
  --z-loader: 9999;
  --z-header: 1000;
  --z-modal: 2000;
  --z-tooltip: 3000;
  
  /* ===== Responsive Breakpoints ===== */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ===== Dark Mode Variables (Optional - Commented Out) ===== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0D0D0D;
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.08);
    --shadow-subtle: rgba(0, 0, 0, 0.3);
    --accent-dark: #EEEEEE;
  }
}
*/

/* ===== Animation Easings ===== */
:root {
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-loader: cubic-bezier(0.77, 0, 0.175, 1);
}