/* Theme-aware CSS using CSS variables */

/* Default theme colors (fallback) */
:root {
    --color-primary: #0891b2;
    --color-primary-hover: #0e7490;
    --color-secondary: #fbbf24;
    --color-secondary-hover: #f59e0b;
    --color-bg-main: #ffffff;
    --color-bg-alt: #f3f4f6;
    --color-text-primary: #111827;
    --color-text-secondary: #6b7280;
    --color-border: #d1d5db;
    --color-border-focus: #0891b2;
    --color-button-primary: #fbbf24;
    --color-button-primary-hover: #f59e0b;
    --color-button-text: #000000;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;
}

/* Theme-aware classes */
.track-text-color {
    color: var(--color-primary) !important;
}

.track-yellow-button {
    background-color: var(--color-button-primary) !important;
    color: var(--color-button-text) !important;
}

.track-yellow-button:hover {
    background-color: var(--color-button-primary-hover) !important;
}

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

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

.theme-text-primary {
    color: var(--color-text-primary);
}

.theme-text-secondary {
    color: var(--color-text-secondary);
}

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

/* Focus styles using theme colors */
input:focus,
select:focus,
textarea:focus,
button:focus {
    border-color: var(--color-border-focus) !important;
}

.focus\:border-teal:focus {
    border-color: var(--color-border-focus) !important;
}

/* Primary color utilities */
.bg-primary {
    background-color: var(--color-primary);
}

.text-primary {
    color: var(--color-primary);
}

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

/* Secondary color utilities */
.bg-secondary {
    background-color: var(--color-secondary);
}

.text-secondary {
    color: var(--color-secondary);
}

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

/* Status colors */
.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

.text-info {
    color: var(--color-info);
}

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

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

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

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