/* Summer Theme - Warm Sunshine & Beach Vibes */
html[data-color="summer"]{ --brand-h:45; }

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

html[data-theme="dark"][data-color="summer"]{
  --bg: #1a1a0f;
  --card: #2d2a1a;
  --text: #fef9c3;
  --muted: #fbbf24;
  --line: #4a4528;
  --surface-2: #3a361f;
  --surface-3: #434025;
}

html[data-theme="light"][data-color="summer"]{
  --bg: #fefce8;
  --card: #ffffff;
  --text: #713f12;
  --muted: #d97706;
  --line: #fde68a;
  --surface-2: #fef9c3;
  --surface-3: #fef08a;
}

/* Summer decorations */
html[data-color="summer"] body::before{
  content: "☀️";
  position: fixed;
  top: 5%;
  right: 8%;
  font-size: 50px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
  animation: sunPulse 8s ease-in-out infinite;
}

html[data-color="summer"] body::after{
  content: "🏖️";
  position: fixed;
  bottom: 8%;
  left: 5%;
  font-size: 35px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

html[data-color="summer"] .container::before{
  content: "🌴";
  position: fixed;
  bottom: 10%;
  right: 4%;
  font-size: 40px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  animation: palmSway 6s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.25; }
}

@keyframes palmSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* Container with sunny border */
html[data-color="summer"] .container{
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #fbbf24, #f59e0b, #ea580c, #fcd34d) border-box;
  box-shadow: 
    0 0 50px rgba(251, 191, 36, 0.15),
    0 20px 50px rgba(0, 0, 0, 0.12);
}

/* Themed cards */
html[data-color="summer"] .themed-card::before{
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(245, 158, 11, 0.85));
}

html[data-color="summer"] .themed-card{
  color: #1a1a0f;
  border: 1px solid rgba(253, 230, 138, 0.5);
}

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

/* Progress bar */
html[data-color="summer"] .progress{
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #ea580c);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
}

/* Status badges */
html[data-color="summer"] .status--current{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a0f;
}

html[data-color="summer"] .status--next{
  background: linear-gradient(135deg, #ea580c, #dc2626);
  color: #fefce8;
}

/* Buttons */
html[data-color="summer"] .btn{
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1a0f;
}

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

/* Schedule table */
html[data-color="summer"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), transparent);
  border-left: 3px solid #fbbf24;
}

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

/* Chips */
html[data-color="summer"] .chip[aria-pressed="true"]{
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
}

/* Dialogs */
html[data-color="summer"] dialog{
  border: 1px solid rgba(251, 191, 36, 0.3);
}

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

/* Warm glow effect */
html[data-theme="light"][data-color="summer"] .card{
  box-shadow: 
    0 0 20px rgba(251, 191, 36, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.08);
}