/**
 * Global CSS Variables - Single Source of Truth
 * These variables are used throughout the site for consistent design
 */

:root {
  /* Brand Colors */
  --fam-bg-light: #F4F4F4;
  --fam-text-light: #F4F4F4;
  --fam-overlay: #D9D9D91A;
  
  /* Typography */
  --fam-font-heading: 'Aboreto', serif;
  --fam-font-body: 'Reddit Sans', sans-serif;
  
  /* Font Sizes */
  --fam-font-size-h1: 80px;
  --fam-font-size-h2: 58.05px;
  --fam-font-size-h3: 32px;
  --fam-font-size-p: 16px;
  --fam-font-size-small: 14px;
  
  /* Line Heights */
  --fam-line-height-h1: 96px;
  --fam-line-height-h2: 70px;
  --fam-line-height-h3: 38px;
  --fam-line-height-p: 24px;
  
  /* Spacing - Single source of truth for consistent spacing */
  --fam-spacing-xs: 0.5rem;   /* 8px */
  --fam-spacing-sm: 1rem;     /* 16px */
  --fam-spacing-md: 1.5rem;   /* 24px */
  --fam-spacing-lg: 2rem;     /* 32px */
  --fam-spacing-xl: 3rem;     /* 48px */
  --fam-spacing-xxl: 4rem;    /* 64px */
  
  /* Spacing for Typography */
  --fam-heading-p-gap: 16px;  /* Space between H1/H2/H3 and paragraph */
  --fam-p-content-gap: 32px;  /* Space between paragraph and following content */
  
  /* Container Width */
  --fam-container-width: 1200px;
  --fam-container-padding: 5rem;
  
  /* Edge Padding for Mobile */
  --fam-mobile-edge-padding: 24px;
  
  /* Section Heights */
  --fam-hero-section-height: 860px;
  --fam-section-height: 860px;
  
  /* Shadows */
  --fam-shadow-header: 0px 4px 20px 0px #00000033;
  --fam-blur-countdown: 16px;
  
  /* Transitions */
  --fam-transition-fast: 0.2s ease;
  --fam-transition-medium: 0.3s ease;
  --fam-transition-slow: 0.5s ease;
  
  /* Border Radius */
  --fam-border-radius-none: 0;
  --fam-border-radius-small: 4px;
  --fam-border-radius-medium: 8px;
  --fam-border-radius-large: 16px;

  /* Carousel sizing */
  --card-w: 500px;
  --gap: 24px;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  :root {
    /* Typography - Tablet */
    --fam-font-size-h1: 48px;
    --fam-line-height-h1: 56px;
    --fam-font-size-h2: 36px;
    --fam-line-height-h2: 44px;
    
    /* Container - Tablet */
    --fam-container-padding: var(--fam-spacing-lg);

    /* Carousel sizing - Tablet */
    --card-w: 360px;
    --gap: 24px; /* keep consistent 24px gap */
  }
}

@media (max-width: 480px) {
  :root {
    /* Typography - Mobile */
    --fam-font-size-h1: 36px;
    --fam-line-height-h1: 42px;
    --fam-font-size-h2: 28px;
    --fam-line-height-h2: 34px;
    
    /* Container - Mobile */
    --fam-container-padding: var(--fam-mobile-edge-padding);

    /* Carousel sizing - Mobile */
    --card-w: 280px;
    --gap: 24px; /* keep consistent 24px gap */
  }
}