:root {
    /* Light Mode Default */
    --color-bg: #f3f4f6; /* gray-100 */
    --color-surface: #ffffff; /* white */
    --color-text: #111827; /* gray-900 */
    --color-text-muted: #6b7280; /* gray-500 */

    --color-primary: #3b82f6;
    --color-success: #22c55e;

    --timer-overlay-bg: radial-gradient(circle at top, #bfdbfe 0%, #f3f4f6 60%);
}

.dark {
    --color-bg: #0f0f11;
    --color-surface: #1c1c1e;
    --color-text: #ffffff;
    --color-text-muted: #a1a1aa;

    --timer-overlay-bg: radial-gradient(circle at top, #1e3a8a 0%, #0f0f11 60%);
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s, color 0.3s;
}

.surface-card {
    background-color: var(--color-surface);
    border-radius: 1rem;
    transition: background-color 0.3s;
}

/* Custom Scrollbar for hidden look */
::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.nav-active {
    color: var(--color-primary);
}

.gradient-blue {
    background: linear-gradient(180deg, rgba(59,130,246,0.2) 0%, rgba(59,130,246,0) 100%);
}

.pill-shape {
    border-radius: 9999px;
}

.pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
}

#timer-overlay {
    background: var(--timer-overlay-bg);
    transition: opacity 0.3s, transform 0.3s;
}

/* Adaptive Text Utilities */
.text-adaptive { color: var(--color-text) !important; }
.text-adaptive-muted { color: var(--color-text-muted) !important; }
.hover\:text-adaptive:hover { color: var(--color-text) !important; }

/* Helpers for Tailwind config to hook into */
.bg-dark { background-color: var(--color-bg) !important; }
.bg-surface { background-color: var(--color-surface) !important; }

/* NOTE: We removed the global text-white/text-gray-400 overrides to avoid breaking buttons. */
/* You must update HTML to use text-adaptive where needed. */