/* Portfolio Section CSS Variables */

:root {
  /* Portfolio Section Colors */
  --portfolio-bg: rgb(44, 62, 80);
  --portfolio-overlay: rgb(31 46 62);
  --portfolio-overlay-opacity: 0.85;
  --portfolio-text: #ffffff;
  --portfolio-text-muted: rgba(255, 255, 255, 0.78);
  --portfolio-accent: #00ff66; /* Consistent lime green accent */
  
  /* Tab Navigation Colors */
  --portfolio-tab-bg: rgba(255, 255, 255, 0.05);
  --portfolio-tab-hover: rgba(255, 255, 255, 0.1);
  --portfolio-tab-active: rgba(255, 255, 255, 0.15);
  --portfolio-tab-border: rgba(255, 255, 255, 0.1);
  --portfolio-tab-text: var(--portfolio-text);
  --portfolio-tab-text-muted: var(--portfolio-text-muted);
  --portfolio-tab-text-active: var(--portfolio-accent);
  
  /* Content Card Colors */
  --portfolio-card-bg: rgba(255, 255, 255, 0.08);
  --portfolio-card-hover: rgba(255, 255, 255, 0.12);
  --portfolio-card-border: rgba(255, 255, 255, 0.1);
  --portfolio-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  
  /* Typography - controlled from hero-typography.css */
  --portfolio-headline: var(--experience-headline);
  --portfolio-subtitle: clamp(1rem, 1.5vw, 1.2rem);
  --portfolio-section-title: var(--experience-title);
  --portfolio-title: var(--experience-title);
  --portfolio-description: var(--experience-description);
  --portfolio-text-sm: var(--experience-period);
  
  /* Layout */
  --portfolio-min-height: 100vh;
  --portfolio-content-padding: 6rem;
  --portfolio-header-margin: 4rem;
  --portfolio-tab-height: 60px;
  --portfolio-tab-spacing: 1rem;
  --portfolio-content-margin: 3rem;
  --portfolio-card-spacing: 2rem;
  --portfolio-card-min-height: 200px;
  
  /* Animations */
  --portfolio-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --portfolio-tab-transition: all 0.3s var(--portfolio-transition);
  --portfolio-content-transition: all 0.4s var(--portfolio-transition);
  --portfolio-card-transition: all 0.3s var(--portfolio-transition);
  --portfolio-stagger: 0.1s;
  --portfolio-card-hover-scale: 1.02;
  
  /* Responsive breakpoints */
  --portfolio-mobile-breakpoint: 768px;
  --portfolio-mobile-padding: 4rem;
  --portfolio-mobile-tab-height: 50px;
  --portfolio-mobile-content-margin: 2rem;
  --portfolio-mobile-card-spacing: 1.5rem;
  
  /* Accessibility focus states */
  --portfolio-focus-outline: 2px solid var(--portfolio-accent);
  --portfolio-focus-offset: 2px;
  
  /* QR Code and Media placeholders */
  --portfolio-qr-size: clamp(80px, 12vw, 120px);
  --portfolio-video-aspect: 16/9;
  --portfolio-thumbnail-height: clamp(120px, 18vw, 180px);
}