/**
 * CSS Variables System - Customizable Design Tokens
 * These variables control ALL visual styling across the theme
 * Industry-specific values are set during the build process
 */

:root {
    /* ==========================================================================
       Colors - Primary Palette
       ========================================================================== */
    
    /* Main brand colors - Granite Peak Concrete (Mountain Modern) */
    --primary-color: #1a3a2f;      /* Deep forest green - main brand color */
    --secondary-color: #c9a66b;     /* Warm stone/gold - accent/CTA color */
    --tertiary-color: #0f2920;      /* Darker forest green for depth */
    
    /* Neutral colors - Usually consistent */
    --primary-dark: #1a1a1a;       /* Dark text/backgrounds */
    --primary-white: #ffffff;      /* White/light backgrounds */
    --light-gray: #f5f5f5;         /* Light backgrounds */
    --medium-gray: #e0e0e0;        /* Borders, dividers */
    --dark-gray: #333333;           /* Dark text alternative */
    
    /* Text colors */
    --text-dark: #2c2c2c;          /* Primary text */
    --text-light: #666666;         /* Secondary text */
    --text-muted: #999999;         /* Muted/disabled text */
    
    /* Semantic colors */
    --success-color: #10b981;      /* Success states */
    --warning-color: #f59e0b;      /* Warning states */
    --error-color: #ef4444;        /* Error states */
    --info-color: #3b82f6;         /* Info states */
    
    /* UI colors */
    --border-color: #dddddd;       /* Default borders */
    --divider-color: #e5e5e5;      /* Dividers */
    --overlay-color: rgba(0, 0, 0, 0.5); /* Overlays */
    
    /* ==========================================================================
       Typography
       ========================================================================== */
    
    /* Font families - Mountain Modern style */
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --accent-font: var(--heading-font);
    
    /* Font sizes - Base scale */
    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    --font-size-4xl: 2.25rem;      /* 36px */
    --font-size-5xl: 3rem;         /* 48px */
    --font-size-6xl: 3.5rem;       /* 56px */
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    
    /* Letter spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;
    --letter-spacing-wider: 2px;
    
    /* ==========================================================================
       Spacing
       ========================================================================== */
    
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;
    
    /* ==========================================================================
       Borders & Radii - SET BY INDUSTRY
       ========================================================================== */
    
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-radius-sm: 4px;       /* Sharp for corporate */
    --border-radius: 8px;          /* Standard radius */
    --border-radius-lg: 12px;      /* Larger elements */
    --border-radius-full: 50%;     /* Circles */
    
    /* ==========================================================================
       Shadows
       ========================================================================== */
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
    
    /* ==========================================================================
       Transitions
       ========================================================================== */
    
    --transition-fast: all 0.2s ease;
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    
    /* ==========================================================================
       Z-Index Scale
       ========================================================================== */
    
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-header: 1000;
    --z-mobile-menu: 2000;
    
    /* ==========================================================================
       Component-Specific Variables
       ========================================================================== */
    
    /* Buttons */
    --btn-padding-x: 30px;
    --btn-padding-y: 14px;
    --btn-font-size: var(--font-size-base);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-border-radius: var(--border-radius-sm);
    
    /* Forms */
    --input-padding-x: 18px;
    --input-padding-y: 12px;
    --input-border-width: var(--border-width);
    --input-border-color: var(--border-color);
    --input-border-radius: var(--border-radius-sm);
    --input-focus-color: var(--primary-color);
    --input-focus-shadow: 0 0 0 3px rgba(26, 58, 47, 0.15);
    
    /* Cards */
    --card-padding: 30px;
    --card-border-radius: var(--border-radius);
    --card-shadow: var(--shadow);
    --card-bg: var(--primary-white);
    
    /* Hero */
    --hero-min-height: 80vh;
    --hero-overlay-gradient: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.05) 100%);
    
    /* Header */
    --header-height: 80px;
    --header-bg: var(--primary-white);
    --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    
    /* Footer */
    --footer-bg: var(--primary-dark);
    --footer-text: #cccccc;
    --footer-heading: var(--primary-white);
    
    /* Mobile Menu */
    --mobile-menu-width: 300px;
    --mobile-menu-bg: var(--primary-white);
}

/* ==========================================================================
   Dark Mode Variables (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        --primary-dark: #ffffff;
        --primary-white: #1a1a1a;
        --light-gray: #2a2a2a;
        --medium-gray: #3a3a3a;
        --text-dark: #e0e0e0;
        --text-light: #a0a0a0;
        --border-color: #404040;
        --card-bg: #2a2a2a;
        --header-bg: #1a1a1a;
    }
}

/* ==========================================================================
   Responsive Variables
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        /* Adjust font sizes for mobile */
        --font-size-6xl: 2rem;      /* 32px instead of 56px */
        --font-size-5xl: 1.75rem;   /* 28px instead of 48px */
        --font-size-4xl: 1.5rem;    /* 24px instead of 36px */
        --font-size-3xl: 1.25rem;   /* 20px instead of 30px */
        
        /* Adjust spacing for mobile */
        --spacing-4xl: 60px;         /* 60px instead of 80px */
        --spacing-3xl: 40px;         /* 40px instead of 60px */
        
        /* Adjust hero for mobile */
        --hero-min-height: 60vh;
        
        /* Adjust header for mobile */
        --header-height: 60px;
    }
}