/* CSS Custom Properties */

:root {
  /* Colors */
  --color-primary: #333333;
  --color-link-accent: #0070C6;
  --color-accent-light: #36d7e9;
  --color-accent-mid: #0c62a7;
  --color-white: #ffffff;
  --color-bg-overlay: rgba(255, 255, 255, 0.15);
  
  /* Gradients */
  --gradient-text: linear-gradient(180deg, #36d7e9 0%, #0c62a7 49.52%, #002845 100%);
  
  /* Spacing Scale */
  --space-xs: 0.5rem;      /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 3rem;        /* 48px */
  --space-2xl: 5rem;       /* 80px */
  --space-3xl: 7.5rem;     /* 120px */
  /* Hero: gap between large + medium bio lines */
  --space-bio-after-large: 0.625rem;
  
  /* Typography */
  --font-heading: 'MuseoModerno', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-fallback: system-ui, -apple-system, sans-serif;
  
  /* Font Sizes - Mobile First */
  --font-size-hero: 5rem;           /* 80px mobile */
  --font-size-bio-large: 1.5rem;    /* 24px mobile */
  --font-size-bio-medium: 1rem;     /* 16px mobile */
  --font-size-heading: 1rem;        /* 16px mobile */
  --font-size-link: 1rem;           /* 16px mobile */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  /* Hero bio second line: unitless ratio (scales with font-size at every breakpoint) */
  --line-height-bio-medium: 2.5;
  
  /* Layout */
  --container-padding: 1.25rem;     /* 20px mobile */
  --max-content-width: 900px;
  
  /* Icon sizes */
  --icon-size-mobile: 44px;
  --icon-size-tablet: 50px;
  --icon-size-desktop: 60px;
  
  /* Effects */
  --transition-speed: 0.3s;
  --transition-timing: ease-out;
  --border-radius: 8px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 40, 69, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 40, 69, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 40, 69, 0.2);
  
  /* Focus styles */
  --focus-outline-width: 3px;
  --focus-outline-offset: 4px;
  --focus-outline-color: var(--color-accent-mid);
}

/* Tablet Breakpoint (768px) */
@media (min-width: 48em) {
  :root {
    --font-size-hero: 7.5rem;         /* 120px tablet */
    --font-size-bio-large: 1.75rem;   /* 28px tablet */
    --font-size-bio-medium: 1.5rem;   /* 24px tablet */
    --font-size-heading: 1.375rem;    /* 22px tablet */
    --font-size-link: 1.25rem;        /* 20px tablet */
    --container-padding: 2.5rem;      /* 40px tablet */
  }
}

/* Desktop Breakpoint (1024px) */
@media (min-width: 64em) {
  :root {
    --font-size-hero: 9.375rem;       /* 150px desktop */
    --font-size-bio-large: 2.5rem;    /* 40px desktop */
    --font-size-bio-medium: 1.875rem; /* 30px desktop */
    --font-size-heading: 1.5rem;      /* 24px desktop */
    --font-size-link: 1.5rem;         /* 24px desktop */
    --container-padding: 4rem;        /* 64px desktop */
  }
}