:root {
    --primitives-tan: #E8E3DA;
}

body, html {
    background: var(--primitives-tan, #E8E3DA) !important;
    min-height: 100vh;
}

/* New class for navbar text readability */
.navbar-readable {
    /* Add white drop shadow to all text elements for better readability */
}

.navbar-readable .navbar-brand,
.navbar-readable .nav-link,
.navbar-readable .text-dark,
.navbar-readable button.text-dark {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 
                 0px 0px 3px rgba(255, 255, 255, 0.6) !important;
    font-weight: 500 !important;
}

.navbar-readable .navbar-brand {
    font-weight: 600 !important;
}

.navbar-readable button.nav-link.btn.btn-link.text-dark {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8), 
                 0px 0px 3px rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    background: none !important;
}

/* Ensure navbar elements appear above background SVG */
.navbar {
    position: relative;
    z-index: 10 !important;
}

/* Ensure main content appears above background SVG */
.container {
    position: relative;
    z-index: 5;
}

/* Ensure footer appears above background SVG */
.footer {
    position: relative;
    z-index: 5;
}

/* Custom button styles - Color #EDA41D with fully rounded sides and black drop shadow */
.btn, 
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
button.btn {
    background-color: #EDA41D !important;
    border-color: #EDA41D !important;
    color: #fff !important;
    border-radius: 50px !important; /* Fully rounded sides */
    transition: all 0.3s ease !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 0px 1px 3px rgba(0, 0, 0, 0.4) !important; /* Black drop shadow */
}

/* Hover states */
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover,
.btn-light:hover,
.btn-dark:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
button.btn:hover {
    background-color: #d89419 !important; /* Darker shade of #EDA41D */
    border-color: #d89419 !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(237, 164, 29, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), 0px 2px 4px rgba(0, 0, 0, 0.5) !important; /* Stronger black drop shadow on hover */
}

/* Focus states */
.btn:focus,
.btn-primary:focus,
.btn-secondary:focus,
.btn-success:focus,
.btn-danger:focus,
.btn-warning:focus,
.btn-info:focus,
.btn-light:focus,
.btn-dark:focus,
.btn-outline-primary:focus,
.btn-outline-secondary:focus,
.btn-outline-success:focus,
.btn-outline-danger:focus,
.btn-outline-warning:focus,
.btn-outline-info:focus,
.btn-outline-light:focus,
.btn-outline-dark:focus,
button.btn:focus {
    background-color: #EDA41D !important;
    border-color: #EDA41D !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.2rem rgba(237, 164, 29, 0.25) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), 0px 1px 3px rgba(0, 0, 0, 0.4) !important; /* Black drop shadow */
}

/* Active/pressed states */
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-info:active,
.btn-light:active,
.btn-dark:active,
.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-success:active,
.btn-outline-danger:active,
.btn-outline-warning:active,
.btn-outline-info:active,
.btn-outline-light:active,
.btn-outline-dark:active,
button.btn:active,
.btn.active,
.btn-primary.active,
.btn-secondary.active,
.btn-success.active,
.btn-danger.active,
.btn-warning.active,
.btn-info.active,
.btn-light.active,
.btn-dark.active {
    background-color: #c68317 !important; /* Even darker shade */
    border-color: #c68317 !important;
    color: #fff !important;
    transform: translateY(0) !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), 0px 1px 2px rgba(0, 0, 0, 0.6) !important; /* Slightly reduced shadow when pressed */
}

/* Disabled states */
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-success:disabled,
.btn-danger:disabled,
.btn-warning:disabled,
.btn-info:disabled,
.btn-light:disabled,
.btn-dark:disabled,
.btn-outline-primary:disabled,
.btn-outline-secondary:disabled,
.btn-outline-success:disabled,
.btn-outline-danger:disabled,
.btn-outline-warning:disabled,
.btn-outline-info:disabled,
.btn-outline-light:disabled,
.btn-outline-dark:disabled,
button.btn:disabled {
    background-color: #EDA41D !important;
    border-color: #EDA41D !important;
    opacity: 0.65 !important;
    transform: none !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), 0px 1px 3px rgba(0, 0, 0, 0.3) !important; /* Softer shadow for disabled state */
}

/* Small buttons */
.btn-sm {
    border-radius: 50px !important;
}

/* Large buttons */
.btn-lg {
    border-radius: 50px !important;
}

/* Ensure button groups maintain rounded corners on outer buttons */
.btn-group > .btn:first-child {
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
}

.btn-group > .btn:last-child {
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
}

/* For single buttons in groups */
.btn-group > .btn:only-child {
    border-radius: 50px !important;
}