/* ========================================
   Reset & Base
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* ========================================
   Theme Variables
   ======================================== */
[data-theme="light"] {
  --bg: #FFFFFF;
  --text: #1A1A1A;
  --text-secondary: #8E8E93;
  --surface: #F2F2F7;
  --separator: #E5E5EA;
  --accent: #007AFF;
  --accent-bg: #007AFF18;
}

[data-theme="dark"] {
  --bg: #0A0A0A;
  --text: #F0F0F0;
  --text-secondary: #636366;
  --surface: #1C1C1E;
  --separator: #38383A;
  --accent: #0A84FF;
  --accent-bg: #0A84FF18;
}

[data-theme="night"] {
  --bg: #000000;
  --text: #8B0000;
  --text-secondary: #4A0000;
  --surface: #0D0000;
  --separator: #1A0000;
  --accent: #8B0000;
  --accent-bg: #8B000018;
}

/* ========================================
   View System
   ======================================== */
.view {
  display: none;
}

.view[data-state="active"] {
  display: flex;
}

/* ========================================
   iOS Toggle (data-state driven)
   ======================================== */
.toggle {
  width: 51px;
  height: 31px;
  border-radius: 16px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
  flex-shrink: 0;
}

.toggle[data-state="on"] {
  background-color: #34C759;
}

.toggle[data-state="off"] {
  background-color: var(--separator);
}

.toggle .knob {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  top: 2px;
  transition: left 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.toggle[data-state="on"] .knob {
  left: 22px;
}

.toggle[data-state="off"] .knob {
  left: 2px;
}

/* ========================================
   Tab Bar (data-state driven)
   ======================================== */
[data-role="tab-bar"] {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

[data-role="tab-bar"][data-state="hidden"] {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

/* Tab Buttons */
[data-action="switch-tab"] {
  color: var(--text-secondary);
}

[data-action="switch-tab"][data-state="active"] {
  background-color: var(--accent);
  color: #FFFFFF;
}

/* ========================================
   Clock
   ======================================== */
[data-role="clock-view"] {
  background-color: var(--bg);
  transition: background-color 0.4s ease;
}

[data-role="clock-time"] {
  transition: font-family 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease;
}

.font-theme-indicator {
  transition: opacity 0.5s ease;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.colon-blink {
  animation: blink 1s step-end infinite;
}

/* ========================================
   Timer
   ======================================== */
.timer-ring {
  transform: rotate(-90deg);
}

.timer-ring-circle {
  transition: stroke-dashoffset 1s linear;
}

/* Timer Presets (data-state driven) */
[data-action="select-preset"] {
  background-color: var(--surface);
}

[data-action="select-preset"] span:first-child {
  color: var(--text);
}

[data-action="select-preset"] span:last-child {
  color: var(--text-secondary);
}

[data-action="select-preset"][data-state="selected"] {
  background-color: var(--accent);
}

[data-action="select-preset"][data-state="selected"] span:first-child {
  color: #FFFFFF;
}

[data-action="select-preset"][data-state="selected"] span:last-child {
  color: rgba(255, 255, 255, 0.67);
}

/* ========================================
   Recurrence & Day Buttons (data-state driven)
   ======================================== */
[data-action="select-recurrence"],
[data-action="toggle-day"] {
  background-color: var(--bg);
  color: var(--text);
}

[data-action="select-recurrence"][data-state="selected"],
[data-action="toggle-day"][data-state="selected"] {
  background-color: var(--accent);
  color: #FFFFFF;
}

/* Option Buttons (theme, snooze, sound) */
[data-action="select-theme"],
[data-action="select-snooze"],
[data-action="select-sound"] {
  background-color: var(--bg);
}

/* ========================================
   Alarm Alert
   ======================================== */
@keyframes alarm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.alarm-pulse {
  animation: alarm-pulse 1s ease-in-out infinite;
}

/* ========================================
   Utilities
   ======================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}