@import "tailwindcss";

:root {
  --color-cream: #fffefb;
  --color-brand-black: #201515;
  --color-dark-charcoal: #36342e;
  --color-brand-orange: #ff4f00;
  --color-sand: #c5c0b1;
  --color-warm-gray: #939084;
  --color-light-sand: #eceae3;
  --color-off-white: #fffdf9;

  --font-display: "Outfit", sans-serif;
  --font-primary: "Inter", sans-serif;
  --font-editorial: "Lora", serif;
}

.dark {
  --color-cream: #201515;
  --color-brand-black: #fffefb;
  --color-dark-charcoal: #fffefb; /* Swapped for legibility */
  --color-sand: #36342e;
  --color-light-sand: #36342e;
  --color-warm-gray: #c5c0b1;
  --color-off-white: #1a1212;
}

@theme {
  --color-cream: var(--color-cream);
  --color-brand-black: var(--color-brand-black);
  --color-dark-charcoal: var(--color-dark-charcoal);
  --color-brand-orange: var(--color-brand-orange);
  --color-sand: var(--color-sand);
  --color-warm-gray: var(--color-warm-gray);
  --color-light-sand: var(--color-light-sand);
  --color-off-white: var(--color-off-white);

  --font-display: var(--font-display);
  --font-primary: var(--font-primary);
  --font-editorial: var(--font-editorial);

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
}

/* Global Styles based on Design System */
body {
  background-color: var(--color-cream);
  color: var(--color-brand-black);
  font-family: var(--font-primary);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

.font-editorial {
  font-family: var(--font-editorial);
  letter-spacing: -0.04em;
}

/* Custom Inset Shadow for Tabs */
.tab-active {
  box-shadow: var(--color-brand-orange) 0px -4px 0px 0px inset;
}

.tab-hover:hover {
  box-shadow: var(--color-sand) 0px -4px 0px 0px inset;
}

/* Custom Transitions */
.transition-brand {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
  @apply p-2 rounded-full border border-sand hover:bg-light-sand transition-brand dark:border-dark-charcoal dark:hover:bg-dark-charcoal;
}

/* Quiz Specific Styles */
.quiz-card {
  @apply bg-cream border border-sand rounded-lg p-8 shadow-sm transition-brand dark:border-dark-charcoal dark:bg-brand-black;
}

.answer-choice {
  display: block !important;
  width: 100% !important;
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
  text-align: left !important;
  border: 1px solid var(--color-sand) !important;
  border-radius: 8px !important;
  background-color: var(--color-cream) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: var(--font-primary) !important;
  font-weight: 500 !important;
  font-size: 1.125rem !important;
  cursor: pointer;
}

.dark .answer-choice {
  background-color: var(--color-dark-charcoal) !important;
  border-color: #4e4b42 !important;
  color: var(--color-cream) !important;
}

.answer-choice:hover {
  border-color: var(--color-brand-black) !important;
  background-color: var(--color-light-sand) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .answer-choice:hover {
  border-color: var(--color-brand-orange) !important;
  background-color: #3f3d36 !important;
}

.choice-correct {
  border: 2px solid #22c55e !important;
  background-color: #f0fdf4 !important; /* solid green-50 */
  color: #166534 !important;
}

.dark .choice-correct {
  background-color: #064e3b !important; /* solid dark green-900 */
  color: #4ade80 !important;
  border-color: #22c55e !important;
}

.choice-correct span {
  background-color: #22c55e !important;
  color: #ffffff !important;
}

.choice-incorrect {
  border: 2px solid #ef4444 !important;
  background-color: #fef2f2 !important; /* solid red-50 */
  color: #991b1b !important;
}

.dark .choice-incorrect {
  background-color: #7f1d1d !important; /* solid dark red-900 */
  color: #f87171 !important;
  border-color: #ef4444 !important;
}

.choice-incorrect span {
  background-color: #ef4444 !important;
  color: #ffffff !important;
}

.progress-fill {
  @apply h-full bg-brand-orange transition-all duration-500 ease-out;
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; color: #ff4f00; }
}

.timer-warning {
  animation: timer-pulse 1s infinite;
}
  
#next-btn:disabled {
  @apply opacity-40 grayscale pointer-events-none;
  background-color: var(--color-sand) !important;
  border-color: var(--color-sand) !important;
  color: var(--color-brand-black) !important;
}