/*
 * Calendar Playground theme variants.
 *
 * The playground host carries a `data-theme` attribute when a non-default
 * theme is selected. These rules scope `--calendar-*` variable overrides
 * to descendants of the playground root, so swapping themes is a one-line
 * `data-theme` change with no JS reload.
 *
 * NB: this file lives outside the calendar package — themes are a host
 * concern, not part of the framework-agnostic component.
 */

[data-controller~='scheduler-playground'][data-theme='dark'] [data-calendar-root] {
  --calendar-event-bg: #1f2937;          /* gray-800 */
  --calendar-grid-line: #374151;         /* gray-700 */
  --calendar-header-bg: #111827;         /* gray-900 */
  --calendar-empty-slot-hover: #1f2937;  /* gray-800 */
  --calendar-block-bg: #374151;          /* gray-700 */
  --calendar-block-border: #9ca3af;      /* gray-400 */
}

[data-controller~='scheduler-playground'][data-theme='dark'] .calendar-day-view,
[data-controller~='scheduler-playground'][data-theme='dark'] .calendar-week-view,
[data-controller~='scheduler-playground'][data-theme='dark'] .calendar-month-view {
  background-color: #111827;             /* gray-900 — wrap behind the grid */
  border-color: #374151;
}

[data-controller~='scheduler-playground'][data-theme='dark'] .calendar-event {
  color: #e5e7eb;                        /* gray-200 — readable on dark cards */
}

[data-controller~='scheduler-playground'][data-theme='dark'] [data-calendar-root] .text-gray-500,
[data-controller~='scheduler-playground'][data-theme='dark'] [data-calendar-root] .text-gray-700 {
  color: #d1d5db;                        /* gray-300 */
}

[data-controller~='scheduler-playground'][data-theme='blue_accent'] [data-calendar-root] {
  --calendar-status-confirmed: #2563eb;  /* blue-600 */
  --calendar-status-pending: #f59e0b;    /* amber-500 */
}