:root {
  --background: 0 0% 100%;
  --foreground: 20 14.3% 4.1%;
  --muted: 60 4.8% 95.9%;
  --muted-foreground: 25 5.3% 44.7%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 14.3% 4.1%;
  --card: 0 0% 100%;
  --card-foreground: 20 14.3% 4.1%;
  --border: 20 5.9% 90%;
  --input: 20 5.9% 90%;
  --primary: 207 90% 54%;
  --primary-color: #1e90ff;
  --primary-foreground: 211 100% 99%;
  --secondary: 60 4.8% 95.9%;
  --secondary-foreground: 24 9.8% 10%;
  --accent: 207 90% 54%;
  --accent-color: #1e90ff;
  --accent-foreground: 24 9.8% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 60 9.1% 97.8%;
  --ring: 20 14.3% 4.1%;
  --radius: 0.5rem;
  --light: #f8fafc;
  --dark: #0f172a;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --primary: 207 90% 54%;
  --primary-color: #3b82f6;
  --primary-foreground: 211 100% 99%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 207 90% 54%;
  --accent-color: #3b82f6;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --ring: 240 4.9% 83.9%;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

.piano-key {
  box-sizing: border-box;
}

.white-key {
  border-width: 1px;
  position: relative;
  z-index: 1;
}

.black-key {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
}

.highlighted {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.timer-circle {
  transition: stroke-dashoffset 0.5s linear;
  stroke-linecap: round;
}

/* Custom Switch - explicit styles */
.switch {
  display: inline-flex;
  height: 24px;
  width: 44px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-color: #d1d5db;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.switch.checked {
  background-color: var(--primary-color) !important;
}

.switch-thumb {
  pointer-events: none;
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(0);
}

.switch.checked .switch-thumb {
  transform: translateX(20px) !important;
}

.switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--primary-color);
}

/* Radio Group Item - explicit styles */
.radio-input {
  aspect-ratio: 1 / 1;
  height: 16px;
  width: 16px;
  border-radius: 9999px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  outline: none;
}

.radio-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--primary-color);
}

.radio-input:checked {
  background-color: #ffffff;
}

.radio-input:checked::before {
  content: '';
  display: block;
  height: 10px;
  width: 10px;
  border-radius: 9999px;
  background-color: var(--primary-color);
}

.note-accidental {
  color: #000000;
  font-style: italic;
  font-weight: 600;
  margin-left: 0.1em;
  display: inline-block;
  font-size: 0.85em;
  vertical-align: super;
  position: relative;
  top: -0.05em;
  text-shadow: none;
  opacity: 0.95;
}