/*this*/


/* Body Background Color */
body {
    background-color: var(--body-bg-color1, #ffffff); /* Fallback to white if --body-bg-color1 is not defined */
}

/* Header */
header {
    background-color: var(--header-bg-color1, #333333); /* Fallback to dark grey */
    color: var(--header-text, #ffffff); /* Fallback to white */
    border: 1px solid var(--header-borders, #cccccc); /* Fallback to light grey */
}

/* Content */
.content {
    background-color: var(--base-bg-color1, #f9f9f9); /* Fallback to light grey */
    color: var(--base-text, #000000); /* Fallback to black */
    border: 1px solid var(--base-borders, #dddddd); /* Fallback to light grey */
}

h1, h2, h3, h4, h5, h6 {
    color: var(--base-heading, #333333); /* Fallback to dark grey */
}

.secondary-heading {
    color: var(--base-secondary-heading, #666666); /* Fallback to grey */
}

a {
    color: var(--base-link, #007bff); /* Fallback to blue */
}

    a:hover {
        color: var(--base-link-hover, #0056b3); /* Fallback to dark blue */
    }

.highlight {
    background-color: var(--base-highlight, #ffc107); /* Fallback to yellow */
    color: var(--base-highlight-text, #212529); /* Fallback to dark grey */
}

/* Main Button */
button {
    background-color: var(--base-btn-bg-color1, #007bff); /* Fallback to blue */
    color: var(--base-btn-text, #ffffff); /* Fallback to white */
    border: 1px solid var(--base-btn-borders, #007bff); /* Fallback to blue */
}

    button:hover {
        background-color: var(--base-btn-bg-hover-color1, #0056b3); /* Fallback to dark blue */
        color: var(--base-btn-text-hover, #ffffff); /* Fallback to white */
        border: 1px solid var(--base-btn-borders-hover, #0056b3); /* Fallback to dark blue */
    }

/* Secondary Button */
.secondary-button {
    background-color: var(--c1-btn-bg-color1, #6c757d); /* Fallback to grey */
    color: var(--c1-btn-text, #ffffff); /* Fallback to white */
    border: 1px solid var(--c1-btn-borders, #6c757d); /* Fallback to grey */
}

/* Footer */
footer {
    background-color: var(--footer-bg-color1, #343a40); /* Fallback to dark grey */
    color: var(--footer-text, #ced4da); /* Fallback to light grey */
    border: 1px solid var(--footer-borders, #495057); /* Fallback to medium grey */
}

    footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
        color: var(--footer-heading, #f8f9fa); /* Fallback to very light grey */
    }

    footer .secondary-heading {
        color: var(--footer-secondary-heading, #e9ecef); /* Fallback to light grey */
    }

    footer a {
        color: var(--footer-link, #adb5bd); /* Fallback to grey */
    }

        footer a:hover {
            color: var(--footer-link-hover, #dee2e6); /* Fallback to lighter grey */
        }

    footer .highlight {
        background-color: var(--footer-highlight, #ffc107); /* Fallback to yellow */
    }

/* Site */
body {
    max-width: var(--site-max-width, 1200px); /* Fallback to 1200px */
    padding: var(--site-spacing_sm, 15px); /* Fallback to 15px */
}

@media (min-width: 992px) {
    body {
        padding: var(--site-spacing_lg, 30px); /* Fallback to 30px */
    }
}

body {
    box-shadow: var(--site-box-shadow_h, 0) var(--site-box-shadow_v, 1px) var(--site-box-shadow_b, 3px) var(--site-box-shadow_o, 0); /* Fallback values for box shadow */
}

/* Breakpoints */
@media (max-width: var(--small-breakpoint, 576px)) {
    header {
        height: var(--small-header, 50px); /* Fallback to 50px */
    }
}

@media (min-width: var(--large-breakpoint, 1200px)) {
    header {
        height: var(--large-header, 100px); /* Fallback to 100px */
    }
}

/* Base Spacing and Borders */
.element {
    margin: var(--base-spacing, 20px); /* Fallback to 20px */
    padding: var(--base-half-spacing, 10px); /* Fallback to 10px */
    border-width: var(--base-border-width, 1px); /* Fallback to 1px */
    border-radius: var(--base-border-radius, 4px); /* Fallback to 4px */
    box-shadow: var(--base-box-shadow_h, 0) var(--base-box-shadow_v, 1px) var(--base-box-shadow_b, 3px) var(--base-box-shadow_o, 0); /* Fallback values for box shadow */
}

/* Form Fields */
form input,
form textarea {
    border-width: var(--form-field-border-width, 1px); /* Fallback to 1px */
    border-radius: var(--form-field-border-radius, 4px); /* Fallback to 4px */
}

/* Buttons */
button {
    border-width: var(--btn-border-width, 1px); /* Fallback to 1px */
    border-radius: var(--btn-border-radius, 4px); /* Fallback to 4px */
    box-shadow: var(--btn-box-shadow_h, 0) var(--btn-box-shadow_v, 1px) var(--btn-box-shadow_b, 3px) var(--btn-box-shadow_o, 0); /* Fallback values for box shadow */
    padding: var(--btn-padding_top, 10px) var(--btn-padding_right, 20px) var(--btn-padding_bottom, 10px) var(--btn-padding_left, 20px); /* Fallback to 10px/20px */
}

@media (max-width: var(--small-breakpoint, 576px)) {
    button {
        padding: var(--btn_sm-padding_top, 5px) var(--btn_sm-padding_right, 10px) var(--btn_sm-padding_bottom, 5px) var(--btn_sm-padding_left, 10px); /* Fallback to 5px/10px */
    }
}

@media (min-width: var(--large-breakpoint, 1200px)) {
    button {
        padding: var(--btn_lg-padding_top, 15px) var(--btn_lg-padding_right, 30px) var(--btn_lg-padding_bottom, 15px) var(--btn_lg-padding_left, 30px); /* Fallback to 15px/30px */
    }
}