.ocean-theme {
    --td-hour-disc-fill: #e3f2fd;
    --td-minute-disc-fill: #bbdefb;
    --td-hour-sector-fill: rgba(33, 150, 243, 0.6);
    --td-minute-sector-fill: rgba(100, 181, 243, 0.5);
    --td-tick-color: #1565c0;
    --td-dot-color: #0d47a1;
    --td-label-color: #0d47a1;
    --td-label-font-weight: bold;
    --td-focus-color: #1976d2;
    --td-hour-disc-shadow: drop-shadow(2px 2px 6px rgba(33, 150, 243, 0.4));
    --td-minute-disc-shadow: drop-shadow(2px 2px 6px rgba(33, 150, 243, 0.3));
}

.sunset-theme {
    --td-hour-disc-fill: #fff3e0;
    --td-minute-disc-fill: #ffe0b2;
    --td-hour-sector-fill: rgba(255, 87, 34, 0.6);
    --td-minute-sector-fill: rgba(255, 152, 0, 0.5);
    --td-tick-color: #e64a19;
    --td-dot-color: #bf360c;
    --td-label-color: #bf360c;
    --td-label-font-weight: bold;
    --td-focus-color: #ff5722;
    --td-hour-disc-shadow: drop-shadow(2px 2px 6px rgba(255, 87, 34, 0.4));
    --td-minute-disc-shadow: drop-shadow(2px 2px 6px rgba(255, 152, 0, 0.3));
}

.dark-theme {
    --td-hour-disc-fill: #424242;
    --td-minute-disc-fill: #616161;
    --td-hour-sector-fill: rgba(156, 39, 176, 0.7);
    --td-minute-sector-fill: rgba(171, 71, 188, 0.5);
    --td-tick-color: #e1bee7;
    --td-dot-color: #ce93d8;
    --td-label-color: #f3e5f5;
    --td-label-font-size: 9px;
    --td-label-font-weight: bold;
    --td-focus-color: #ab47bc;
    --td-hour-disc-shadow: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.8));
    --td-minute-disc-shadow: drop-shadow(2px 2px 8px rgba(0, 0, 0, 0.6));
}