/* =========================================
   CSS CUSTOM PROPERTIES (Variables)
   =========================================
   
   HOW TO EDIT:
   - Change colors by updating the hex values
   - Adjust spacing by changing rem values
   - Modify fonts by updating font-family names
   - All changes here affect the entire website!
   
   ========================================= */

:root {
    /* ─────────────────────────────────────
       COLORS - Primary Brand Colors
       ───────────────────────────────────── */
    --color-primary: #167cb2;           /* Main blue - buttons, accents */
    --color-primary-hover: #125f8a;     /* Darker blue - hover states */
    --color-primary-light: rgba(22, 124, 178, 0.1);  /* Light blue - focus rings */
    
    --color-secondary: #4f8c45;         /* Green - accent color */
    --color-secondary-hover: #3e7036;   /* Darker green - hover states */
    
    /* Additional accent for special elements */
    --color-accent: #4f8c45;            /* Green accent for highlights */
    
    /* ─────────────────────────────────────
       COLORS - Neutral Colors (Photo-focused palette)
       ───────────────────────────────────── */
    --color-dark: #1a1a1a;              /* Pure dark - headings, hero bg */
    --color-dark-alt: #112649;          /* Deep blue - footer */
    --color-white: #FFFFFF;
    --color-light: #fafafa;             /* Almost white - section backgrounds */
    --color-gray: #e8e8e8;              /* Light gray - borders */
    --color-gray-dark: #666;            /* Medium gray - secondary text */
    
    /* ─────────────────────────────────────
       COLORS - Text Colors
       ───────────────────────────────────── */
    --color-text: #2a2a2a;              /* Main body text - softer black */
    --color-text-muted: #999999;        /* Footer text, less important */
    --color-text-light: #ffffff;        /* Text on dark backgrounds */
    
    /* ─────────────────────────────────────
       TYPOGRAPHY - Font Families
       ───────────────────────────────────── */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* ─────────────────────────────────────
       TYPOGRAPHY - Font Sizes
       ───────────────────────────────────── */
    --text-xs: 0.75rem;                 /* 12px - small labels */
    --text-sm: 0.875rem;                /* 14px - captions, small text */
    --text-base: 1rem;                  /* 16px - body text */
    --text-lg: 1.125rem;                /* 18px - lead paragraphs */
    --text-xl: 1.25rem;                 /* 20px - card titles */
    --text-2xl: 1.5rem;                 /* 24px - section subtitles */
    --text-3xl: 2rem;                   /* 32px - section titles */
    --text-4xl: 2.5rem;                 /* 40px - large titles */
    --text-5xl: 3.5rem;                 /* 56px - hero title */
    
    /* ─────────────────────────────────────
       SPACING - Consistent spacing scale
       ───────────────────────────────────── */
    --space-xs: 0.25rem;                /* 4px */
    --space-sm: 0.5rem;                 /* 8px */
    --space-md: 1rem;                   /* 16px */
    --space-lg: 1.5rem;                 /* 24px */
    --space-xl: 2rem;                   /* 32px */
    --space-2xl: 3rem;                  /* 48px */
    --space-3xl: 4rem;                  /* 64px */
    --space-4xl: 6rem;                  /* 96px */
    
    /* ─────────────────────────────────────
       LAYOUT - Widths & Containers
       ───────────────────────────────────── */
    --container-max: 1200px;            /* Max content width */
    --container-narrow: 800px;          /* Narrow content (about, text) */
    --container-padding: 1rem;          /* Side padding on mobile */
    
    /* ─────────────────────────────────────
       EFFECTS - Shadows & Borders
       ───────────────────────────────────── */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 8px rgba(22, 124, 178, 0.3);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 50%;
    
    /* ─────────────────────────────────────
       ANIMATION - Transitions & Timing
       ───────────────────────────────────── */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-animation: 0.8s ease-out;
    
    /* ─────────────────────────────────────
       Z-INDEX - Layering system
       ───────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 2000;
    --z-tooltip: 3000;

    /* Sticky nav offset for in-page anchors */
    --anchor-offset: 118px;
}

@media (max-width: 480px) {
    :root {
        --anchor-offset: 90px;
    }
}

@media (min-width: 768px) {
    :root {
        --anchor-offset: 140px;
    }
}