/* ===============================
   CraftElevators — Brand Variables
   =============================== */

/* --- Color Palette --- */
:root {
    /* Brand Colors */
    --color-primary: #00A89D; /* Teal Blue — primary accent, icons, backgrounds */
    --color-accent: #C4552B; /* Rust Orange — highlights, CTAs, headlines */
    --color-gray: #7E7E7E; /* Slate Gray — body text, subheads */
    --color-charcoal: #333333; /* Dark Charcoal — main headings, primary text */
    --color-white: #FFFFFF; /* Cool White — backgrounds, whitespace */
    /* Functional Colors */
    --color-danger: #ED3237; /* Error, status, alert */
    --color-success: #19b47d; /* Success, status, alert */
    /* UI Element Colors */
    --color-footer-bg: #13223B; /* Footer background */
    --color-card-bg: #fff; /* Card/section background */
    --color-border: #E5E5EF; /* Borders, lines, subtle accents */
    /* Swiper/Component colors can be set using these core colors */
}

/* --- Typography --- */
:root {
    /* Font Families */
    --font-primary: 'Montserrat', Arial, sans-serif; /* For headings, CTA, logo */
    --font-secondary: 'Roboto', Arial, sans-serif; /* For body, captions */
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Font Sizes (rem units = scalable, 1rem ≈ 16px) */
    --h1-size: 2.25rem; /* 36px */
    --h2-size: 1.75rem; /* 28px */
    --h3-size: 1.375rem; /* 22px */
    --body-size: 1rem; /* 16px */
    --caption-size: 0.75rem; /* 12px */
    /* Line Heights */
    --line-height-heading: 1.2;
    --line-height-body: 1.6;
}

/* --- Spacing & Radius --- */
:root {
    --section-padding-lg: 64px;
    --section-padding-md: 36px;
    --section-padding-sm: 18px;
    --container-max-width: 1200px;
    --border-radius-lg: 10px;
    --border-radius-md: 7px;
    --border-radius-sm: 4px;
    --box-shadow-card: 0 2px 24px rgba(27,49,80,0.07);
    --box-shadow-card-hover: 0 6px 32px rgba(27,49,80,0.14);
}

/* --- Responsive Breakpoints --- */
:root {
    --breakpoint-xl: 1200px;
    --breakpoint-lg: 992px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 576px;
}

/* --- Z-Index Layers --- */
:root {
    --z-header: 100;
    --z-nav: 90;
    --z-overlay: 80;
    --z-modal: 9999;
}

/* --- Swiper/Carousel (if you want specific overrides) --- */
:root {
    --swiper-theme-color: var(--color-primary);
    --swiper-navigation-color: var(--color-primary);
    --swiper-pagination-color: var(--color-primary);
}

/* Add additional variables for animations, gradients, etc. as your brand grows */