/**
 * CSS Variables - Core Design Tokens
 * 
 * ============================================================================
 * CONSOLIDATED VARIABLE SYSTEM
 * ============================================================================
 * 
 * This file contains all core design tokens used throughout the theme.
 * It is loaded first to establish the foundation for all other CSS files.
 * 
 * VARIABLE DISTRIBUTION ARCHITECTURE:
 * ====================================
 * 
 * CORE VARIABLES (defined here in variables.css):
 * - Color system (--color-*)
 * - Typography system (--font-*)
 * - Spacing system (--space-*)
 * - Border radius (--radius-*)
 * - Shadows (--shadow-*)
 * - Heading defaults (--heading-*)
 * - Card defaults (--card-*)
 * - Mobile spacing (--space-mobile-*)
 * 
 * COMPONENT-SPECIFIC VARIABLES (defined in their respective files):
 * - buttons.css: Button styling (--btn-*)
 * - links.css: Link categories and states (--link-*)
 * - headings.css: Context-specific heading sizes (--hero-heading-size, --section-heading-size)
 * - cards.css: Extended card shadows and transitions (component-specific --card-shadow-*)
 * - breakpoints.css: All responsive breakpoints (--breakpoint-*)
 * - sections.css: Bootstrap button overrides (--bs-btn-*)
 * - mobile-consolidated.css: Mobile-specific overrides
 * 
 * OVERRIDE HIERARCHY:
 * 1. Core variables (this file) - Base definitions
 * 2. Component files - Component-specific extensions
 * 3. Mobile files - Responsive overrides
 * 
 * NOTE: After optimization, all duplicate definitions have been removed.
 * Each variable is now defined in exactly one location.
 */

/* === FONT IMPORTS === */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* === FONT FACE DECLARATIONS === */
/* Icons - FontAwesome Local Fonts */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff2') format('woff2'),
    url('../fonts/fontawesome-webfont.woff') format('woff'),
    url('../fonts/fontawesome-webfont.ttf') format('truetype'),
    url('../fonts/fontawesome-webfont.svg#fontawesome-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Icons - Custom Theme Icons */
@font-face {
    font-family: 'Icons Realtor Template';
    src: url('https://uploads-ssl.webflow.com/649f1b5831e1f1e01693f73f/649f1b5831e1f1e01693f8b5_icons-realtor-template.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* === CSS CUSTOM PROPERTIES === */
:root {
    /* === CORE COLOR SYSTEM === */
    /* Brand Colors */
    --color-primary: #000a4a;
    --color-accent: #f85757;
    
    /* Text Colors */
    --color-text-primary: #000;
    --color-text-secondary: #222223;
    --color-text-tertiary: #616066;
    --color-text-muted: #8d8d91;
    
    /* Background Colors */
    --color-bg-primary: #fff;
    --color-bg-secondary: #f9f9f9;
    --color-bg-tertiary: #e9e9e9;
    
    /* Border Colors */
    --color-border-primary: #e9e9e9;
    
    
    
    /* === LAYOUT & SPACING SYSTEM === */
    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* Component Spacing */
    --space-header-height: 80px;
    --space-header-height-mobile: 70px;
    
    /* Compact Header Spacing */
    --space-header-padding-vertical: 8px;
    --space-nav-item-padding: 8px;
    --space-header-height-compact: 60px;
    
    /* WordPress Admin Bar Heights */
    --space-admin-bar-desktop: 32px;
    --space-admin-bar-mobile: 46px;
    
    /* Border Radius Scale */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    
    /* Shadow System */
    --shadow-sm: 0 3px 20px 0 rgba(8, 15, 52, .06);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, .175);
    
    
    
    /* === TYPOGRAPHY SYSTEM === */
    /* Font Families */
    --font-family-primary: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Font Weight Scale */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Font Size Scale */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-size-4xl: 48px;
    
    /* Line Height Scale */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* === HEADING-SPECIFIC VARIABLES === */
    /* Heading Colors */
    --heading-color-primary: var(--color-primary);
    --heading-color-accent: var(--color-accent);
    --heading-color-muted: var(--color-text-muted);
    
    /* Heading Spacing */
    --heading-margin-top: 0;
    --heading-margin-bottom: 1.5rem;
    
    /* Heading Line Heights */
    --heading-line-height-tight: 1.2;
    --heading-line-height-normal: 1.4;
    
    /* === BOOTSTRAP COMPATIBILITY === */
    /* Bootstrap Grid Gutter (fallback for when Bootstrap CSS is not loaded) */
    --bs-gutter-x: 1.5rem;
    
    /* === MOBILE-SPECIFIC SPACING VARIABLES === */
    /* Section Padding - Mobile Optimized */
    --space-mobile-section-sm: 60px;
    --space-mobile-section: 80px;
    --space-mobile-section-lg: 100px;
    
    /* Content Spacing - Mobile */
    --space-mobile-content: 24px;
    --space-mobile-content-lg: 40px;
    --space-mobile-paragraph: 16px;
    
    /* Container Padding - Mobile */
    --space-mobile-container: 2rem;
    --space-mobile-container-sm: 1.5rem;
    
    /* Section Margins - Mobile */
    --space-mobile-section-gap: 48px;
    --space-mobile-section-gap-lg: 64px;
    
    /* === CARD SYSTEM VARIABLES === */
    /* Card Sizing - Consistent with spacing scale */
    --card-padding-sm: 0.75rem;
    --card-padding: 1.25rem;
    --card-padding-lg: 2rem;
    --card-padding-xl: 2.5rem;
    
    /* Card Border Radius - Using existing radius scale */
    --card-radius-sm: var(--radius-sm);
    --card-radius: var(--radius-md);
    --card-radius-lg: var(--radius-lg);
    --card-radius-xl: var(--radius-xl);
    
    /* Card Shadows - Extending shadow system */
    --card-shadow-sm: var(--shadow-sm);
    --card-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
    --card-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
    --card-shadow-xl: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
    --card-shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.3);
    
    /* Card Colors - Using existing color system */
    --card-bg: var(--color-bg-primary);
    --card-bg-hover: var(--color-bg-secondary);
    --card-border-color: var(--color-border-primary);
    --card-text-color: var(--color-text-primary);
    --card-text-muted: var(--color-text-muted);
    
    /* Card Spacing - Using spacing scale */
    --card-gap: var(--space-md);
    --card-gap-lg: var(--space-lg);
    --card-gap-xl: var(--space-xl);
    
    /* Card Transitions */
    --card-transition: all 0.3s ease;
    --card-transition-fast: all 0.15s ease;
    
    /* === CARD GRID SYSTEM === */
    /* Card Grid Columns */
    --card-grid-cols-mobile: 1;
    --card-grid-cols-tablet: 2;
    --card-grid-cols-desktop: 3;
    --card-grid-cols-wide: 4;
    
    /* Card Grid Min Width */
    --card-grid-min-width: 300px;
    --card-grid-min-width-sm: 250px;
    
}

/* === TYPOGRAPHY STYLES === */
/**
 * Base heading styles provide fallback when utility classes aren't used.
 * Component-specific styling is handled in headings.css
 */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color-primary);
    margin-top: var(--heading-margin-top);
    margin-bottom: var(--heading-margin-bottom);
    font-family: var(--font-family-primary);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--heading-line-height-tight);
}

h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--heading-line-height-normal);
}

h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--heading-line-height-normal);
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

h6 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

p {
    font-size: var(--font-size-md);
    margin-bottom: 15px;
    line-height: var(--line-height-normal);
}

p:last-child {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}