/* EyeLink IoT — Auto Theme (Sun-based) */
/* Toto téma se dynamicky přepíná mezi light.css a dark.css */

:root {
  /* Barvy se přepisují dynamicky přes JS */
  --primary: #e5a400;
  --surface: #ffffff;
  --card-bg: #ffffff;
  --text: #333333;
  --border: #e0e0e0;
}

/* Přechodové animace */
body,
.app-header,
.device-card,
.modal {
  transition: background-color 1s, color 1s, border-color 1s, box-shadow 1s;
}

/* Přepínání probíhá přes třídy */
body.auto-light {
  --surface: #ffffff;
  --card-bg: #ffffff;
  --text: #333333;
  --border: #e0e0e0;
}

body.auto-dark {
  --surface: #121212;
  --card-bg: #1e1e1e;
  --text: #e0e0e0;
  --border: #333;
}

/* Speciální třída pro přechod */
body.sunset-transition {
  animation: sunsetFade 60s linear forwards;
}

@keyframes sunsetFade {
  0% {
    --surface: #ffffff;
    --card-bg: #ffffff;
    --text: #333333;
  }
  50% {
    --surface: #f5f5f5;
    --card-bg: #f0f0f0;
    --text: #555555;
  }
  100% {
    --surface: #121212;
    --card-bg: #1e1e1e;
    --text: #e0e0e0;
  }
}

body.sunrise-transition {
  animation: sunriseFade 60s linear forwards;
}

@keyframes sunriseFade {
  0% {
    --surface: #121212;
    --card-bg: #1e1e1e;
    --text: #e0e0e0;
  }
  50% {
    --surface: #1a1a1a;
    --card-bg: #252525;
    --text: #c0c0c0;
  }
  100% {
    --surface: #ffffff;
    --card-bg: #ffffff;
    --text: #333333;
  }
}

/* Sunset/Sunrise indikátor */
.sun-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: 1000;
}

body.auto-light .sun-indicator {
  background: linear-gradient(to bottom, #FFD54F, #FFA726);
  box-shadow: 0 0 10px rgba(255, 179, 0, 0.5);
}

body.auto-dark .sun-indicator {
  background: linear-gradient(to bottom, #455A64, #263238);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
}