/* Spring Theme - Fresh Blooms & New Growth */
html[data-color="spring"]{ --brand-h:330; }

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

html[data-theme="dark"][data-color="spring"]{
  --bg: #1a1520;
  --card: #251f2d;
  --text: #fce7f3;
  --muted: #f9a8d4;
  --line: #3d2f45;
  --surface-2: #2d2538;
  --surface-3: #352c40;
}

html[data-theme="light"][data-color="spring"]{
  --bg: #fdf2f8;
  --card: #ffffff;
  --text: #831843;
  --muted: #db2777;
  --line: #fbcfe8;
  --surface-2: #fce7f3;
  --surface-3: #f9d5e5;
}

/* Flower decorations */
html[data-color="spring"] body::before{
  content: "🌸";
  position: fixed;
  top: 8%;
  left: 5%;
  font-size: 40px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  animation: bloomFloat1 14s ease-in-out infinite;
}

html[data-color="spring"] body::after{
  content: "🌷";
  position: fixed;
  top: 18%;
  right: 7%;
  font-size: 35px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: bloomFloat2 18s ease-in-out infinite;
}

html[data-color="spring"] .container::before{
  content: "🦋";
  position: fixed;
  bottom: 15%;
  right: 5%;
  font-size: 30px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
  animation: butterfly 10s ease-in-out infinite;
}

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

@keyframes bloomFloat2 {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(12px) rotate(-3deg); }
}

@keyframes butterfly {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(20px, -15px) rotate(10deg); }
  50% { transform: translate(0, -25px) rotate(-5deg); }
  75% { transform: translate(-15px, -10px) rotate(5deg); }
}

/* Container with floral border */
html[data-color="spring"] .container{
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #f9a8d4, #ec4899, #a855f7, #f472b6) border-box;
  box-shadow: 
    0 0 45px rgba(249, 168, 212, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Themed cards */
html[data-color="spring"] .themed-card::before{
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.9), rgba(219, 39, 119, 0.85));
}

html[data-color="spring"] .themed-card{
  color: #fff;
  border: 1px solid rgba(251, 207, 232, 0.4);
}

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

/* Progress bar */
html[data-color="spring"] .progress{
  background: linear-gradient(90deg, #f9a8d4, #ec4899, #db2777);
}

/* Status badges */
html[data-color="spring"] .status--current{
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fdf2f8;
}

html[data-color="spring"] .status--next{
  background: linear-gradient(135deg, #a855f7, #9333ea);
  color: #fdf2f8;
}

/* Buttons */
html[data-color="spring"] .btn{
  background: linear-gradient(135deg, #ec4899, #db2777);
  color: #fff;
}

html[data-color="spring"] .btn:hover{
  background: linear-gradient(135deg, #f472b6, #ec4899);
}

/* Schedule table */
html[data-color="spring"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(236, 72, 153, 0.15), transparent);
  border-left: 3px solid #ec4899;
}

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

/* Chips */
html[data-color="spring"] .chip[aria-pressed="true"]{
  background: rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
}

/* Dialogs */
html[data-color="spring"] dialog{
  border: 1px solid rgba(236, 72, 153, 0.3);
}

/* Scrollbar */
html[data-color="spring"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #f9a8d4, #db2777);
}