/* Custom Bulma Overrides */

:root {
    /* Button Colors */
    --bulma-primary: var(--color-workhorse-yellow);
    --bulma-primary-h: 50deg;
    --bulma-primary-s: 98%;
    --bulma-primary-l: 67%;
    --bulma-primary-invert: var(--color-brown-dark);
    
    --bulma-link: var(--color-brown-light);
    --bulma-link-h: 22deg;
    --bulma-link-s: 57%;
    --bulma-link-l: 54%;
    --bulma-link-invert: #ffffff;
    
    --bulma-success: #48c78e;
    --bulma-success-h: 153deg;
    --bulma-success-s: 53%;
    --bulma-success-l: 53%;
    --bulma-success-invert: #ffffff;
    
    --bulma-warning: var(--color-workhorse-yellow);
    --bulma-warning-h: 50deg;
    --bulma-warning-s: 98%;
    --bulma-warning-l: 67%;
    --bulma-warning-invert: var(--color-brown-dark);
    
    --bulma-danger: #f14668;
    --bulma-danger-h: 348deg;
    --bulma-danger-s: 86%;
    --bulma-danger-l: 61%;
    --bulma-danger-invert: #ffffff;
    --bulma-card-color: var(--color-gray-100);
    --bulma-card-background-color: var(--color-gray-900);
    --bulma-card-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
    --bulma-card-radius: 8px;
    --bulma-card-header-background-color: transparent;
    --bulma-card-header-color: var(--color-gray-100);
    --bulma-card-header-padding: 0.75rem 1rem;
    --bulma-card-header-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
    --bulma-card-header-weight: var(--weight-bold);
    --bulma-card-content-background-color: transparent;
    --bulma-card-content-padding: 1.5rem;
    --bulma-card-footer-background-color: transparent;
    --bulma-card-footer-border-top: 1px solid var(--color-gray-400);
    --bulma-card-footer-padding: 0.75rem;
    --bulma-card-media-margin: var(--padding-normal);
}

/* Force proper button contrast - override Bulma HSL functions */
.button.is-primary,
.button.is-warning {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-workhorse-yellow) !important;
}

.button.is-primary.is-outlined,
.button.is-warning.is-outlined {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-workhorse-yellow) !important;
}

.button.is-primary.is-outlined:hover,
.button.is-warning.is-outlined:hover {
    background-color: var(--color-workhorse-yellow) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-workhorse-yellow) !important;
}

.button.is-primary:hover,
.button.is-warning:hover {
    background-color: var(--color-brown-light) !important;
    color: var(--color-white) !important;
    border-color: var(--color-brown-light) !important;
}

/* Fix basic outlined buttons (See Project buttons) */
.button.is-outlined {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
}

.button.is-outlined:hover {
    background-color: var(--color-white) !important;
    color: var(--color-brown-dark) !important;
    border-color: var(--color-white) !important;
}

.button.is-outlined:focus {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
    box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25) !important;
}

/* Button icon spacing and sizing */
.button .text-spaced {
    margin-right: 0.75rem !important;
}

.button .icon {
    width: 0.875rem !important;
    height: 0.875rem !important;
    font-size: 0.875rem !important;
}

.button .icon i {
    width: 0.875rem !important;
    height: 0.875rem !important;
}

/* Smaller icons for small buttons */
.button.is-small .icon {
    width: 0.75rem !important;
    height: 0.75rem !important;
    font-size: 0.75rem !important;
}

.button.is-small .icon i {
    width: 0.75rem !important;
    height: 0.75rem !important;
}