/* Winter Theme - Cool Ice & Snow */
html[data-color="winter"]{ --brand-h:200; }

/* Typography - Basis Fonts */
html[data-color="winter"] {
  font-family: var(--font-basis-primary);
}
html[data-color="winter"] .muted,
html[data-color="winter"] .help,
html[data-color="winter"] .label {
  font-family: var(--font-basis-secondary);
}

html[data-theme="dark"][data-color="winter"]{
  --bg: #0a1628;
  --card: #0f2140;
  --text: #e8f4fc;
  --muted: #7dd3fc;
  --line: #1e3a5f;
  --surface-2: #132d4a;
  --surface-3: #173352;
}

html[data-theme="light"][data-color="winter"]{
  --bg: #f0f9ff;
  --card: #ffffff;
  --text: #0c4a6e;
  --muted: #0284c7;
  --line: #bae6fd;
  --surface-2: #e0f2fe;
  --surface-3: #cce8fa;
}

/* Snowflake decorations */
html[data-color="winter"] body::before{
  content: "❄️";
  position: fixed;
  top: 8%;
  left: 6%;
  font-size: 38px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  animation: snowfall1 12s ease-in-out infinite;
}

html[data-color="winter"] body::after{
  content: "❄️";
  position: fixed;
  top: 15%;
  right: 10%;
  font-size: 28px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: snowfall2 16s ease-in-out infinite;
}

html[data-color="winter"] .container::before{
  content: "🌨️";
  position: fixed;
  bottom: 12%;
  left: 4%;
  font-size: 32px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  animation: snowfall1 20s ease-in-out infinite reverse;
}

@keyframes snowfall1 {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
  50% { transform: translateY(20px) rotate(180deg); opacity: 0.15; }
}

@keyframes snowfall2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-90deg); }
}

/* Container with icy border */
html[data-color="winter"] .container{
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #7dd3fc, #38bdf8, #0ea5e9, #bae6fd) border-box;
  box-shadow: 
    0 0 50px rgba(125, 211, 252, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.1);
}

/* Themed cards */
html[data-color="winter"] .themed-card::before{
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.9), rgba(14, 165, 233, 0.85));
}

html[data-color="winter"] .themed-card{
  color: #fff;
  border: 1px solid rgba(186, 230, 253, 0.4);
}

html[data-color="winter"] .themed-card .label,
html[data-color="winter"] .themed-card .muted,
html[data-color="winter"] .themed-card #currentName,
html[data-color="winter"] .themed-card #currentRoom,
html[data-color="winter"] .themed-card #currentTimeRange,
html[data-color="winter"] .themed-card #elapsedOut,
html[data-color="winter"] .themed-card #leftOut,
html[data-color="winter"] .themed-card #nextName,
html[data-color="winter"] .themed-card #nextRoom,
html[data-color="winter"] .themed-card #nextTimeRange,
html[data-color="winter"] .themed-card #nextInOut,
html[data-color="winter"] .themed-card #untilOut{
  color: #f0f9ff !important;
}

/* Progress bar */
html[data-color="winter"] .progress{
  background: linear-gradient(90deg, #7dd3fc, #38bdf8, #0ea5e9);
  box-shadow: 0 0 15px rgba(125, 211, 252, 0.4);
}

/* Status badges */
html[data-color="winter"] .status--current{
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #0a1628;
}

html[data-color="winter"] .status--next{
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #f0f9ff;
}

/* Buttons */
html[data-color="winter"] .btn{
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  color: #0a1628;
}

html[data-color="winter"] .btn:hover{
  background: linear-gradient(135deg, #7dd3fc, #38bdf8);
}

/* Schedule table */
html[data-color="winter"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.15), transparent);
  border-left: 3px solid #38bdf8;
}

html[data-color="winter"] .schedule th{
  border-bottom: 2px solid #38bdf8;
}

/* Chips */
html[data-color="winter"] .chip[aria-pressed="true"]{
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

/* Dialogs */
html[data-color="winter"] dialog{
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Scrollbar */
html[data-color="winter"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
}

/* Frost effect on cards */
html[data-theme="dark"][data-color="winter"] .card{
  box-shadow: 
    0 0 20px rgba(125, 211, 252, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.2);
}