/* ===============================
   Document-level setup
   =============================== */

html,
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

/* ===============================
   Clean, legible design system
   =============================== */

:root {
  /* Light, airy background */
  --bg-primary: #f8f9fa;
  --bg-secondary: #ffffff;

  /* Subtle accent colors (used sparingly) */
  --accent-blue: #2563eb;
  --accent-blue-light: #3b82f6;
  --accent-green: #059669;
  --accent-purple: #7c3aed;

  /* Text with excellent contrast */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  /* Borders and dividers */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;

  /* Shadows for depth */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Main background */
.cosmic-bg {
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(to bottom, #f8f9fa 0%, #f1f3f5 100%);
}

/* Remove the old glow effect - we don't need it */
.text-glow {
  /* Clean headings without distracting effects */
}

/* ===============================
   Utility classes for Tailwind
   =============================== */

/* Background colors */
.bg-dark-card {
  background-color: var(--bg-secondary);
}

.bg-dark-card\/70,
.bg-dark-card\/60 {
  background-color: var(--bg-secondary);
}

/* Border colors */
.border-dark-border {
  border-color: var(--border-light);
}

/* Text colors */
.text-text-primary {
  color: var(--text-primary);
}

.text-text-secondary {
  color: var(--text-secondary);
}

.text-deep-bg {
  color: var(--bg-secondary);
}

/* Accent button colors */
.bg-accent-cyan {
  background-color: var(--accent-blue);
  color: white;
}

.bg-accent-purple {
  background-color: var(--accent-purple);
  color: white;
}

.bg-accent-green {
  background-color: var(--accent-green);
  color: white;
}

.bg-accent-cyan:hover,
.bg-accent-purple:hover,
.bg-accent-green:hover {
  opacity: 0.9;
}

/* Fill-in-blank answer display - force black text on light green background */
.fill-blank-input[readonly] {
  color: #000000 !important;
  background-color: #bbf7d0 !important;
  border-color: #22c55e !important;
  font-weight: 600 !important;
}