/* Spark Theme CSS - Spark Custom Styles */

/* Font Family */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins/Poppins-Regular.woff2") format("woff2");
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins/Poppins-Medium.woff2") format("woff2");
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins/Poppins-SemiBold.woff2") format("woff2");
}

:root,
[data-bs-theme="dark"] {
    /* Primary Colors - Dark theme for Spark */
    --bs-primary: #000000;
    --bs-primary-rgb: 0, 0, 0;
    --bs-secondary: #fff;
    --bs-secondary-rgb: 255, 255, 255;

    
    /* Font Family */
    --font-site: 'Poppins', sans-serif;
    --font-title: 'Poppins', sans-serif;
    --font-desc: 'Poppins', sans-serif;
    --font-detail: 'Poppins', sans-serif;
    --bs-font-sans-serif: 'Poppins', sans-serif;
    
    /* Text Colors - White text on dark background */
    --text-color-site: #FFFFFF;
    --text-color-title: #FFFFFF;
    --text-color-desc: #CCCCCC;
    --text-color-detail: #999999;
    
    /* Container Widths */
    --bs-container-max-widths: 960px, 1140px, 1320px;
    
    /* Border Colors */
    --bs-border-color: #333333;
    
    /* Custom Colors - Spark Theme */
    --bs-yellow: #FFD700;
    --bs-yellow-rgb: 255, 215, 0;
    --bs-gray: #666666;
    --bs-gray-rgb: 102, 102, 102;
    


    --container-lg-width: 960px;
    --container-xl-width: 1140px;
    --container-xxl-width: 1320px;
    --bs-bg-overlay-light: rgba(255, 255, 255, 0.08);
    --bs-form-placeholder-color: rgba(255, 255, 255, 0.6);
}

:root,
[data-bs-theme="light"] {
    --bs-warning: #FFD700;
    --bs-warning-rgb: 255, 215, 0;
    --bs-info: #00C0F3;
    --bs-info-rgb: 0, 192, 243;
}

.bz-block {
    --padding-unit: 2rem;
    --padding-unit-md: 2.5rem;
    --padding-unit-lg: 3rem;
    --margin-unit: 1rem;
    --margin-unit-md: 1.5rem;
    --margin-unit-lg: 2rem;
}


.btn {
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 12px;
    --bs-btn-font-size: 16px;
}

.btn.btn-sm {
    --bs-btn-font-size: 15px;
    --bs-btn-padding-x: 12px;
    --bs-btn-padding-y: 10px;
}

.btn-primary {
    --bs-btn-color: var(--text-color-site);
    --bs-btn-bg: #333;
    --bs-btn-border-color: var(--text-color-site);
    --bs-btn-hover-color: var(--text-color-site);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
    --bs-btn-hover-border-color: var(--text-color-site);
    --bs-btn-active-color: var(--text-color-site);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-active-border-color: var(--text-color-site);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-gray);
    border-radius: 999px;
    height: 38px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--text-color-site);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--text-color-site);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    border-radius: 0;
    font-weight: 500;
    transition: all 0.3s ease;
}


.btn.rounded-circle {
    --bs-btn-padding-x: 8px;
    --bs-btn-padding-y: 8px;
}


.bg-site       { background-color: var(--bs-primary) !important; }
.fs-16         { font-size: 16px !important; }
.fs-14         { font-size: 14px !important; }
.ff-site       { font-family: var(--font-site) !important; }
.ff-title      { font-family: var(--font-title) !important; }
.ff-desc       { font-family: var(--font-desc) !important; }
.text-site     { color: var(--text-color-site) !important; }
.text-desc     { color: var(--text-color-desc) !important; }