/* Dynamic color utility classes */

/* Background colors */
.bg-tool {
    background-color: var(--tool-color, #2E7D32);
}

.bg-tool-50 {
    background-color: color-mix(in srgb, var(--tool-color, #2E7D32) 40%, white);
}

.bg-tool-100 {
    background-color: color-mix(in srgb, var(--tool-color, #2E7D32) 70%, white);
}

.bg-tool-500 {
    background-color: var(--tool-color, #2E7D32);
}

.bg-tool-600 {
    background-color: color-mix(in srgb, var(--tool-color, #2E7D32) 85%, black);
}

/* Text colors */
.text-tool {
    color: var(--tool-color, #2E7D32);
}

.text-tool-600 {
    color: color-mix(in srgb, var(--tool-color, #2E7D32) 85%, black);
}

.text-tool-800 {
    color: color-mix(in srgb, var(--tool-color, #2E7D32) 70%, black);
}

/* Border colors */
.border-tool {
    border-color: var(--tool-color, #2E7D32);
}

.border-tool-100 {
    border-color: color-mix(in srgb, var(--tool-color, #2E7D32) 10%, white);
}

/* Hover states */
.hover\:bg-tool-50:hover {
    background-color: color-mix(in srgb, var(--tool-color, #2E7D32) 5%, white);
}

.hover\:bg-tool-100:hover {
    background-color: color-mix(in srgb, var(--tool-color, #2E7D32) 10%, white);
}

.hover\:text-tool-600:hover {
    color: color-mix(in srgb, var(--tool-color, #2E7D32) 85%, black);
}

/* Peer states for toggle switches */
.peer:checked ~ .peer-checked\:bg-tool {
    background-color: var(--tool-color, #2E7D32);
}

.peer:focus ~ .peer-focus\:ring-tool {
    --tw-ring-color: color-mix(in srgb, var(--tool-color, #2E7D32) 25%, transparent);
    --tw-ring-opacity: 0.5;
}

/* Focus states */
.focus\:ring-tool:focus {
    --tw-ring-color: color-mix(in srgb, var(--tool-color, #2E7D32) 25%, transparent);
    --tw-ring-opacity: 0.5;
}

.focus\:border-tool:focus {
    border-color: var(--tool-color, #2E7D32);
}