/* src/styles.css */

/* 1. Define the Default Brand Color (Overridden by JS later) */
:root {
    --brand-color: #0284c7;
}

/* 2. Range Slider Customization (Webkit/Chrome) */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}

    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: var(--brand-color); /* Uses the dynamic bank color */
        cursor: pointer;
        margin-top: -6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #e2e8f0; /* Slate-200 */
        border-radius: 2px;
    }

    /* 3. Range Slider Customization (Firefox) */
    input[type=range]::-moz-range-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: var(--brand-color);
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        background: #e2e8f0;
        border-radius: 2px;
    }

/* 4. Utility Classes */
.text-brand {
    color: var(--brand-color);
}

.bg-brand {
    background-color: var(--brand-color);
}

.border-brand {
    border-color: var(--brand-color);
}

.ring-brand:focus {
    --tw-ring-color: var(--brand-color);
}