/*
 * Calendar Scheduler — theming contract
 *
 * All colors and key layout dimensions are exposed as CSS custom properties.
 * The calendar root carries `data-calendar-root="true"` (set by the JS package),
 * so override theme values with one CSS rule:
 *
 *   [data-calendar-root] {
 *     --calendar-status-confirmed: #2563eb;
 *     --calendar-slot-height: 60px;
 *   }
 *
 * JS layout math reads these variables via getComputedStyle() so visual tweaks
 * and positioning math stay in sync.
 */

[data-calendar-root] {
  /* Status colors — left border + bar accents */
  --calendar-status-confirmed: #000000;
  --calendar-status-pending: #9ca3af;   /* gray-400 */
  --calendar-status-completed: #d1d5db; /* gray-300 */
  --calendar-status-cancelled: #ef4444; /* red-500 */

  /* Calendar block (vacation, training, etc.) */
  --calendar-block-bg: #f3f4f6;     /* gray-100 */
  --calendar-block-border: #6b7280; /* gray-500 */

  /* Surfaces */
  --calendar-event-bg: #ffffff;
  --calendar-event-radius: 0.375rem;       /* 6px / radius-md */
  --calendar-grid-line: #f3f4f6;           /* gray-100 */
  --calendar-header-bg: #ffffff;
  --calendar-empty-slot-hover: #f9fafb;    /* gray-50 */

  /* Layout (read by JS for positioning math) */
  --calendar-slot-height: 48px;
  --calendar-time-column-width: 80px;
  --calendar-min-resource-width: 180px;
  --calendar-month-cell-min-height: 110px;

  /* Typography */
  --calendar-time-label-size: 0.75rem;  /* text-xs */
  --calendar-event-text-size: 0.75rem;  /* text-xs */
}