/* ===================================
   GLOBAL CSS VARIABLES - TYPOGRAPHY
   =================================== */

:root {
    /* Font Families - Project Standard */
    --font-primary: "Alexandria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-secondary: "Aleo", Georgia, serif;
    
    /* Layout - Container Max Width */
    --container-max-width: 1400px;       /* Standard container max-width */
    
    /* Base Font Sizes - Reduced from original */
    --font-size-base: 14px;              /* Base text size (was 16px) */
    
    /* Heading Sizes - Hierarchical and smaller */
    --font-size-h1: 48px;                /* Main headings (was 60-64px) */
    --font-size-h2: 38px;                /* Section headings (was 44-54px) */
    --font-size-h3: 30px;                /* Sub-section headings (was 36-40px) */
    --font-size-h4: 24px;                /* Smaller headings (was 28-30px) */
    --font-size-h5: 20px;                /* Minor headings (was 24-26px) */
    --font-size-h6: 16px;                /* Smallest headings (was 18-20px) */
    
    /* Body Text Variations */
    --font-size-body: 16px;              /* Standard body text */
    --font-size-body-large: 20px;        /* Large body text (was 22-24px) */
    --font-size-body-small: 14px;        /* Small body text (was 16px) */
    --font-size-body-xs: 12px;           /* Extra small text (was 14px) */
    
    /* Display/Hero Sizes - For large showcase text */
    --font-size-hero: 72px;              /* Hero/Banner titles (large screens) */
    --font-size-display-xl: 52px;        /* Extra large display (was 64px) */
    --font-size-display-lg: 44px;        /* Large display (was 54-60px) */
    --font-size-display-md: 36px;        /* Medium display (was 44-48px) */
    
    /* Specific Use Cases */
    --font-size-subtitle: 26px;          /* Subtitles (was 30px) */
    --font-size-button: 18px;            /* Button text (was 24px) */
    --font-size-input: 14px;             /* Form inputs (was 22-24px) */
    --font-size-label: 12px;             /* Form labels (was 14px) */
    --font-size-caption: 11px;           /* Captions and micro text (was 12px) */
    
    /* Navigation */
    --font-size-nav-main: 20px;          /* Main nav items (was 22-26px) */
    --font-size-nav-sub: 16px;           /* Sub nav items (was 18-20px) */
    --font-size-nav-dropdown: 14px;      /* Dropdown items (was 16px) */
    
    /* Card/Component Sizes */
    --font-size-card-title: 22px;        /* Card titles (was 26-28px) */
    --font-size-card-subtitle: 16px;     /* Card subtitles (was 18px) */
    --font-size-card-text: 14px;         /* Card body text (was 16px) */
    
    /* Icon Sizes (when using icon fonts) */
    --font-size-icon-lg: 28px;           /* Large icons (was 30-31px) */
    --font-size-icon-md: 20px;           /* Medium icons (was 22px) */
    --font-size-icon-sm: 16px;           /* Small icons (was 18px) */
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.text-hero { font-size: var(--font-size-hero); }
.text-display-xl { font-size: var(--font-size-display-xl); }
.text-display-lg { font-size: var(--font-size-display-lg); }
.text-display-md { font-size: var(--font-size-display-md); }

.text-h1 { font-size: var(--font-size-h1); }
.text-h2 { font-size: var(--font-size-h2); }
.text-h3 { font-size: var(--font-size-h3); }
.text-h4 { font-size: var(--font-size-h4); }
.text-h5 { font-size: var(--font-size-h5); }
.text-h6 { font-size: var(--font-size-h6); }

.text-body { font-size: var(--font-size-body); }
.text-body-lg { font-size: var(--font-size-body-large); }
.text-body-sm { font-size: var(--font-size-body-small); }
.text-xs { font-size: var(--font-size-body-xs); }
.text-caption { font-size: var(--font-size-caption); }

/* Font Family Utilities */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

/* ===================================
   BASE STYLES
   =================================== */

/* Global body styles */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #333;
}

/* Heading styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    line-height: var(--line-height-tight);
    margin-bottom: 1rem;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* Container max-width standard */
.container {
    max-width: var(--container-max-width) !important;
    margin-left: auto;
    margin-right: auto;
}

button, .button {
    font-family: "Alexandria", sans-serif !important;
    font-weight: 400;
    font-size: 0.8rem !important;
    color: white;
    background-color: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-radius: 8px !important;
    text-transform: uppercase !important;
    padding: 0.6rem 1.2rem;
}

button:hover, .button:hover {
    background-color: white;
    color: #474b3d;
    border-color: white;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    :root {
        --font-size-hero: 60px;          /* Reduced hero for tablets */
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-hero: 40px;          /* Reduced hero for mobile */
        --font-size-h1: 36px;            /* Reduced for mobile */
        --font-size-h2: 30px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --font-size-h5: 18px;
        --font-size-h6: 14px;
        --font-size-display-xl: 40px;
        --font-size-display-lg: 34px;
        --font-size-display-md: 28px;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-hero: 32px;          /* Further reduced hero for small mobile */
        --font-size-h1: 28px;            /* Further reduced for small mobile */
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --font-size-h5: 16px;
        --font-size-h6: 14px;
        --font-size-display-xl: 32px;
        --font-size-display-lg: 28px;
        --font-size-display-md: 24px;
    }
}