/* =====================================================================
   Calendar Theme – WINTER (v3, wrapper-first + fallback)
   =====================================================================
   Scope:
   - Primary:  .calendar[data-theme="winter"]        (set by JS)
   - Fallback: .calendar:has([data-calendar][data-theme="winter"]) (SSR/early)
   Responsibilities:
   - Theme tokens + theme-driven visuals only
   - Additive overrides only (never redefines layout/structure)
   ===================================================================== */

/* ---------------------------
   Theme Tokens
   --------------------------- */
.calendar[data-theme="winter"],
@supports selector(:has(*)) {
  .calendar:has([data-calendar][data-theme="winter"])
} {
  /* Accent system */
  --theme-accent-primary: #8ecaff;          /* icy blue */
  --theme-accent-secondary: #b8a9ff;        /* winter violet */
  --theme-accent-soft: rgba(142, 202, 255, 0.18);
  --theme-accent-glow: rgba(142, 202, 255, 0.38);

  /* Text */
  --theme-text-primary: rgba(242, 245, 255, 0.96);
  --theme-text-secondary: rgba(207, 215, 255, 0.82);
  --theme-text-muted: rgba(154, 166, 216, 0.85);

  /* Small additive surface tint (do not fight card layer) */
  --theme-surface-tint: rgba(255, 255, 255, 0.02);

  /* Ambient background */
  --theme-bg-gradient:
    radial-gradient(circle at 20% 15%, rgba(142, 202, 255, 0.12), transparent 55%),
    radial-gradient(circle at 80% 10%, rgba(184, 169, 255, 0.14), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(100, 120, 255, 0.10), transparent 70%);

  /* Bridge into modal token system (calendar.modal.css) */
  --cal-accent: rgba(142, 202, 255, 0.92);
  --cal-focus: rgba(142, 202, 255, 0.65);
}

/* ---------------------------
   Background atmosphere
   --------------------------- */
.calendar[data-theme="winter"] {
  background: var(--theme-bg-gradient);
}

@supports selector(:has(*)) {
  .calendar:has([data-calendar][data-theme="winter"]) {
    background: var(--theme-bg-gradient);
  }
}

/* =====================================================================
   Cards (additive)
   ===================================================================== */

/* Subtle surface tint without overriding your base shadows/bg */
.calendar[data-theme="winter"] .calendar-card {
  background-image: linear-gradient(180deg, var(--theme-surface-tint), transparent);
}

/* Text tuning */
.calendar[data-theme="winter"] .calendar-card__title {
  color: var(--theme-text-primary);
}
.calendar[data-theme="winter"] .calendar-card__subtitle {
  color: var(--theme-text-secondary);
}
.calendar[data-theme="winter"] .calendar-card__description {
  color: rgba(207, 215, 255, 0.74);
}

/* Decorative icon glow */
.calendar[data-theme="winter"] .calendar-card__icon img {
  filter:
    drop-shadow(0 0 6px var(--theme-accent-soft))
    drop-shadow(0 0 14px var(--theme-accent-glow));
}

/* Dot rim */
.calendar[data-theme="winter"] .calendar-card__dot {
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.10),
    0 0 14px rgba(142, 202, 255, 0.10);
}

/* Active card glow (additive, keep base shadows) */
.calendar[data-theme="winter"] .calendar-card.is-active {
  box-shadow:
    var(--card-shadow, 0 10px 30px rgba(0, 0, 0, 0.45)),
    inset 0 0 0 2px rgba(142, 202, 255, 0.40),
    0 18px 55px rgba(142, 202, 255, 0.12);
}

/* Hover only for interactive cards */
.calendar[data-theme="winter"] .calendar-card[data-calendar-state="open"]:hover,
.calendar[data-theme="winter"] .calendar-card[data-calendar-state="active"]:hover {
  box-shadow:
    var(--card-shadow-hover, 0 14px 36px rgba(0, 0, 0, 0.48)),
    inset 0 0 0 1px rgba(142, 202, 255, 0.22),
    0 22px 70px rgba(142, 202, 255, 0.10);
}

/* Locked: keep your policy; only tiny text lift */
.calendar[data-theme="winter"] .calendar-card[data-calendar-state="locked"] {
  color: rgba(242, 245, 255, 0.78);
}

/* =====================================================================
   Modal (additive, tokens + mild surface)
   ===================================================================== */
.calendar[data-theme="winter"] .calendar-modal-container {
  background:
    linear-gradient(180deg, rgba(18, 22, 48, 0.96), rgba(10, 12, 28, 0.96));
  border-color: rgba(142, 202, 255, 0.16);
  box-shadow:
    var(--cal-shadow, 0 18px 60px rgba(0, 0, 0, 0.65)),
    0 0 30px rgba(142, 202, 255, 0.12);
}

.calendar[data-theme="winter"] .calendar-modal-title {
  color: var(--theme-text-primary);
}

.calendar[data-theme="winter"] .calendar-modal-body {
  color: var(--theme-text-secondary);
}

/* Buttons inside modal (toolbar + downloads) */
.calendar[data-theme="winter"] .calendar-modal .cal-btn,
.calendar[data-theme="winter"] .calendar-downloads__btn {
  border-color: rgba(142, 202, 255, 0.18);
}

/* Focus reinforcement */
.calendar[data-theme="winter"] :focus-visible {
  outline-color: var(--theme-accent-primary);
}

/* =====================================================================
   Fallback selectors (no wrapper attr yet, but data-calendar exists)
   ===================================================================== */
@supports selector(:has(*)) {
  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card {
    background-image: linear-gradient(180deg, var(--theme-surface-tint), transparent);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card__title {
    color: var(--theme-text-primary);
  }
  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card__subtitle {
    color: var(--theme-text-secondary);
  }
  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card__description {
    color: rgba(207, 215, 255, 0.74);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card__icon img {
    filter:
      drop-shadow(0 0 6px var(--theme-accent-soft))
      drop-shadow(0 0 14px var(--theme-accent-glow));
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card__dot {
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.10),
      0 0 14px rgba(142, 202, 255, 0.10);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card.is-active {
    box-shadow:
      var(--card-shadow, 0 10px 30px rgba(0, 0, 0, 0.45)),
      inset 0 0 0 2px rgba(142, 202, 255, 0.40),
      0 18px 55px rgba(142, 202, 255, 0.12);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card[data-calendar-state="open"]:hover,
  .calendar:has([data-calendar][data-theme="winter"]) .calendar-card[data-calendar-state="active"]:hover {
    box-shadow:
      var(--card-shadow-hover, 0 14px 36px rgba(0, 0, 0, 0.48)),
      inset 0 0 0 1px rgba(142, 202, 255, 0.22),
      0 22px 70px rgba(142, 202, 255, 0.10);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-modal-container {
    background:
      linear-gradient(180deg, rgba(18, 22, 48, 0.96), rgba(10, 12, 28, 0.96));
    border-color: rgba(142, 202, 255, 0.16);
    box-shadow:
      var(--cal-shadow, 0 18px 60px rgba(0, 0, 0, 0.65)),
      0 0 30px rgba(142, 202, 255, 0.12);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-modal-title {
    color: var(--theme-text-primary);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-modal-body {
    color: var(--theme-text-secondary);
  }

  .calendar:has([data-calendar][data-theme="winter"]) .calendar-modal .cal-btn,
  .calendar:has([data-calendar][data-theme="winter"]) .calendar-downloads__btn {
    border-color: rgba(142, 202, 255, 0.18);
  }

  .calendar:has([data-calendar][data-theme="winter"]) :focus-visible {
    outline-color: var(--theme-accent-primary);
  }
}

/* =====================================================================
   Reduced motion safety (disable decorative glow only)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .calendar[data-theme="winter"] .calendar-card__icon img {
    filter: none !important;
  }

  .calendar[data-theme="winter"] .calendar-card.is-active,
  .calendar[data-theme="winter"] .calendar-card[data-calendar-state="open"]:hover,
  .calendar[data-theme="winter"] .calendar-card[data-calendar-state="active"]:hover {
    box-shadow: var(--card-shadow, 0 10px 30px rgba(0, 0, 0, 0.45)) !important;
  }
}