/* Fall Theme - Warm Autumn Colors */
html[data-color="fall"]{ --brand-h:25; }

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

html[data-theme="dark"][data-color="fall"]{
  --bg: #1a1512;
  --card: #2d2319;
  --text: #f5e6d3;
  --muted: #d4915c;
  --line: #4a3728;
  --surface-2: #352a1f;
  --surface-3: #3d3125;
}

html[data-theme="light"][data-color="fall"]{
  --bg: #fdf6ed;
  --card: #ffffff;
  --text: #3d2914;
  --muted: #b5651d;
  --line: #e8d5c4;
  --surface-2: #faf0e4;
  --surface-3: #f5e6d6;
}

/* Fall leaf decorations */
html[data-color="fall"] body::before{
  content: "🍂";
  position: fixed;
  top: 10%;
  left: 5%;
  font-size: 40px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
  animation: fallLeaf1 15s ease-in-out infinite;
}

html[data-color="fall"] body::after{
  content: "🍁";
  position: fixed;
  top: 20%;
  right: 8%;
  font-size: 35px;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  animation: fallLeaf2 18s ease-in-out infinite;
}

@keyframes fallLeaf1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(30px) rotate(15deg); }
}

@keyframes fallLeaf2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(-10deg); }
}

/* Container with warm border */
html[data-color="fall"] .container{
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #d4915c, #8b4513, #cd853f, #daa520) border-box;
  box-shadow: 
    0 0 40px rgba(212, 145, 92, 0.1),
    0 20px 50px rgba(0, 0, 0, 0.15);
}

/* Themed cards */
html[data-color="fall"] .themed-card::before{
  background: linear-gradient(135deg, rgba(212, 145, 92, 0.9), rgba(139, 69, 19, 0.85));
}

html[data-color="fall"] .themed-card{
  color: #fff;
  border: 1px solid rgba(218, 165, 32, 0.3);
}

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

/* Progress bar */
html[data-color="fall"] .progress{
  background: linear-gradient(90deg, #d4915c, #cd853f, #daa520);
}

/* Status badges */
html[data-color="fall"] .status--current{
  background: linear-gradient(135deg, #d4915c, #cd853f);
  color: #1a1512;
}

html[data-color="fall"] .status--next{
  background: linear-gradient(135deg, #8b4513, #a0522d);
  color: #fdf6ed;
}

/* Buttons */
html[data-color="fall"] .btn{
  background: linear-gradient(135deg, #d4915c, #cd853f);
  color: #1a1512;
}

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

/* Schedule table */
html[data-color="fall"] .schedule tr.active{
  background: linear-gradient(90deg, rgba(212, 145, 92, 0.15), transparent);
  border-left: 3px solid #d4915c;
}

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

/* Chips */
html[data-color="fall"] .chip[aria-pressed="true"]{
  background: rgba(212, 145, 92, 0.2);
  border-color: #d4915c;
}

/* Dialogs */
html[data-color="fall"] dialog{
  border: 1px solid rgba(212, 145, 92, 0.3);
}

/* Scrollbar */
html[data-color="fall"] ::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #d4915c, #8b4513);
}