/* ============================================
   CSS Custom Properties (Colors)
   ============================================ */
:root {
    --color-kawaii-primary: #ff9eb5;
    --color-kawaii-primary-dark: #ff7b9c;
    --color-kawaii-secondary: #ffd1d1;
    --color-kawaii-accent: #cdf0ea;
    --color-kawaii-text: #5e4b52;
    --color-kawaii-dark: #4a3b40;
    --color-kawaii-bg: #fff0f5;
}

/* Dark Mode */
.dark {
    --color-kawaii-bg: #1a1a2e;
    --color-kawaii-text: #e8e8e8;
    --color-kawaii-dark: #f0f0f0;
}

.dark body {
    background-color: var(--color-kawaii-bg);
    color: var(--color-kawaii-text);
}

.dark .glass {
    background: rgba(40, 40, 60, 0.65);
    border-color: rgba(80, 80, 100, 0.5);
}

.dark .task-input-header {
    background: rgba(40, 40, 60, 0.6);
    border-color: rgba(80, 80, 100, 0.5);
    color: var(--color-kawaii-text);
}

.dark .task-input-header:focus {
    background: rgba(50, 50, 70, 0.9);
}

/* ============================================
   Custom Scrollbar (Cross-browser)
   ============================================ */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-kawaii-primary);
    border-radius: 10px;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-kawaii-primary) transparent;
}

/* ============================================
   Glassmorphism Effect
   ============================================ */
.glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px 0 rgba(255, 158, 181, 0.15);
}

/* ============================================
   Button Active States
   ============================================ */
.timer-btn-active {
    background-color: var(--color-kawaii-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 158, 181, 0.4);
    transform: scale(1.05);
    border-color: transparent;
}

.break-btn-active {
    background-color: var(--color-kawaii-accent);
    color: #115e59;
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.2);
    transform: scale(1.05);
    border-color: transparent;
}

.preset-btn-active {
    background-color: white;
    border-color: var(--color-kawaii-primary);
    color: var(--color-kawaii-primary-dark);
    box-shadow: 0 0 0 2px #ffc1d0;
}

/* ============================================
   Progress Ring
   ============================================ */
.progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* ============================================
   Task Input Header
   ============================================ */
.task-input-header {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid white;
    transition: all 0.3s ease;
}

.task-input-header:focus {
    background: white;
    border-color: var(--color-kawaii-primary);
    box-shadow: 0 0 0 3px rgba(255, 158, 181, 0.2);
}

/* ============================================
   Reduced Motion Preference
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}