/* Color Variables - Based on Logo */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('TrueType');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Primary Color from Logo - Orange/Red */
    --primary-color: #E74C3C;
    --primary-hover: #C0392B;
    --primary-light: #F39C87;
    --primary-dark: #A93226;

    /* Secondary Color - Blue */
    --secondary-color: #1470a0;
    --secondary-hover: #0F5A80;
    --secondary-light: #3A8DB8;
    --secondary-dark: #0A3F5C;

    /* Neutral Colors */
    --white: #FFFFFF;
    --light-gray: #F8F9FA;
    --gray: #6C757D;
    --dark-gray: #343A40;
    --black: #000000;

    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #6C757D;
    --text-light: #FFFFFF;

    /* Background Colors */
    --bg-light: #F8F9FA;
    --bg-white: #FFFFFF;
    --bg-dark: #212529;

    /* Border Colors */
    --border-color: #DEE2E6;
    --border-light: #E9ECEF;

    /* Spacing */
    --section-padding: 80px;
    --section-padding-mobile: 40px;
    --container-max-width: 1200px;

    /* Typography */
    --font-family: Roboto, sans-serif;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-sm: 0.875rem;
    --line-height-base: 1.6;

    /* Headings */
    --h1-size: 2.5rem;
    --h2-size: 2rem;
    --h3-size: 1.75rem;
    --h4-size: 1.5rem;
    --h5-size: 1.25rem;
    --h6-size: 1rem;

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Shadows */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

    /* Border Radius */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 1rem;

    /* Z-Index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Bootstrap Variable Overrides */
.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-bg: var(--primary-dark);
    --bs-btn-active-border-color: var(--primary-dark);
}

.btn-secondary {
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-bg: var(--secondary-hover);
    --bs-btn-hover-border-color: var(--secondary-hover);
    --bs-btn-active-bg: var(--secondary-dark);
    --bs-btn-active-border-color: var(--secondary-dark);
}