/* Experience Section CSS Variables */

:root {
  /* Experience Section Colors */
  --experience-bg: rgb(52, 73, 94);
  --experience-overlay: rgb(52 73 94);
  --experience-overlay-opacity: 0.62; /* Easily adjustable overlay strength */
  --experience-text: #ffffff;
  --experience-text-muted: rgba(255, 255, 255, 0.78);
  --experience-accent: #00ff66; /* Same as hero accent for dots */
  
  /* Timeline Colors */
  --timeline-spine: var(--experience-accent); /* Now using accent color! */
  --timeline-spine-opacity: 0.3; /* Subtle but visible */
  --timeline-node: var(--experience-accent);
  --timeline-node-hover: #00cc52;
  --timeline-card-bg: rgba(255, 255, 255, 0.1);
  --timeline-card-hover: rgba(255, 255, 255, 0.15);
  
  /* Typography - controlled from hero-typography.css */
  --experience-headline: clamp(1.5rem, 4vw, 3rem);
  --experience-company: clamp(1rem, 2vw, 1.5rem);
  --experience-title: clamp(0.85rem, 1.5vw, 1.1rem);
  --experience-period: clamp(0.7rem, 1vw, 0.9rem);
  --experience-description: clamp(0.8rem, 1.2vw, 1rem);
  
  /* Layout - easily adjustable */
  --experience-min-height: 100vh;
  --experience-content-padding: 6rem;
  --experience-header-margin: 4rem;
  --timeline-card-width: clamp(280px, 35vw, 400px);
  --timeline-node-size: clamp(12px, 2vw, 20px);
  --timeline-spine-width: 2px;
  --timeline-card-spacing: 4rem;
  --timeline-card-offset: 2rem;
  
  /* Animations - easily adjustable */
  --experience-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --experience-stagger: 0.1s;
  --experience-card-hover-scale: 1.02;
  --experience-node-hover-scale: 1.3;
  
  /* Responsive breakpoints */
  --experience-mobile-breakpoint: 768px;
  --experience-mobile-padding: 4rem;
  --experience-mobile-spine-left: 2rem;
  --experience-mobile-card-margin-left: 4rem;
  --experience-mobile-card-margin-right: 1rem;
}