@import 'generative-ai-light.css';
/* ==========================================================================
   1000-Collocations Theme & High-Contrast Readability Engine
   File: 1000-Collocations/css/theme.css
   WCAG AA Compliance (>= 4.5:1 contrast ratio) for both Light & Dark modes.
   Includes Structural Contrast Shield and Phantom Class Resolvers.
   ========================================================================== */

:root {
  color-scheme: light;
  --bg-primary: #f8fafc;        /* slate-50 */
  --bg-secondary: #f1f5f9;      /* slate-100 */
  --bg-surface: #ffffff;        /* pure white */
  --bg-surface-alt: #f8fafc;
  --border-color: #e2e8f0;      /* slate-200 */
  --border-subtle: #cbd5e1;     /* slate-300 */
  
  --text-primary: #0f172a;      /* slate-900: 17:1 on white */
  --text-secondary: #334155;    /* slate-700: 9.6:1 on white */
  --text-muted: #475569;        /* slate-600: 5.9:1 on white - WCAG AA compliant */
  --text-hint: #64748b;         /* slate-500: 4.6:1 on white - passes 4.5:1 */
  
  --accent-blue: #2563eb;
  --accent-indigo: #4f46e5;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;

  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --card-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}

.dark {
  color-scheme: dark;
  --bg-primary: #0f172a;        /* slate-900 */
  --bg-secondary: #162032;      /* slate-850 custom */
  --bg-surface: #1e293b;        /* slate-800 */
  --bg-surface-alt: #243247;
  --border-color: #334155;      /* slate-700 */
  --border-subtle: #475569;     /* slate-600 */
  
  --text-primary: #f8fafc;      /* slate-50: 16:1 on slate-900 */
  --text-secondary: #e2e8f0;    /* slate-200: 12:1 on slate-900 */
  --text-muted: #cbd5e1;        /* slate-300: 9.2:1 on slate-900 */
  --text-hint: #94a3b8;         /* slate-400: 5.6:1 on slate-900 - passes 4.5:1 */

  --accent-blue: #3b82f6;
  --accent-indigo: #6366f1;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --card-shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   PHANTOM COLOR TOKENS RESOLVER
   Provides explicit definitions for all non-standard 3-digit color utilities
   used across Lessons 21-50 (slate, stone, zinc, and brand accents).
   ========================================================================== */

/* Custom Backgrounds */
.bg-slate-850, .dark .dark\:bg-slate-850 { background-color: #162032 !important; }
.bg-slate-855, .dark .dark\:bg-slate-855 { background-color: #131c2d !important; }
.bg-slate-955, .dark .dark\:bg-slate-955 { background-color: #0b1120 !important; }

.bg-stone-850, .dark .dark\:bg-stone-850 { background-color: #1c1917 !important; }
.bg-stone-955, .dark .dark\:bg-stone-955 { background-color: #0c0a09 !important; }

.bg-zinc-850, .dark .dark\:bg-zinc-850 { background-color: #18181b !important; }
.bg-zinc-955, .dark .dark\:bg-zinc-955 { background-color: #09090b !important; }

.bg-brand-deepDark, .dark .dark\:bg-brand-deepDark { background-color: #0c0a1a !important; }
.bg-brand-deception { background-color: rgba(239, 68, 68, 0.15) !important; }
.bg-brand-discord { background-color: rgba(139, 92, 246, 0.15) !important; }
.bg-brand-accent { background-color: rgba(59, 130, 246, 0.15) !important; }

/* Custom Borders */
.border-slate-850, .dark .dark\:border-slate-850 { border-color: #243247 !important; }
.border-slate-855, .dark .dark\:border-slate-855 { border-color: #202b3d !important; }
.border-stone-850, .dark .dark\:border-stone-850 { border-color: #292524 !important; }
.border-zinc-850, .dark .dark\:border-zinc-850 { border-color: #27272a !important; }

.dark .dark\:divide-slate-850 > :not([hidden]) ~ :not([hidden]),
.dark .dark\:divide-stone-850 > :not([hidden]) ~ :not([hidden]) {
  border-color: #243247 !important;
}

/* Custom Text Colors (Light Mode) */
html:not(.dark) .text-slate-350,
html:not(.dark) .text-slate-355,
html:not(.dark) .text-stone-350,
html:not(.dark) .text-stone-355 {
  color: #334155 !important; /* High-contrast slate-700 in light mode */
}

html:not(.dark) .text-slate-450,
html:not(.dark) .text-slate-455,
html:not(.dark) .text-stone-450,
html:not(.dark) .text-stone-455 {
  color: #475569 !important; /* High-contrast slate-600 in light mode */
}

html:not(.dark) .text-slate-650,
html:not(.dark) .text-slate-655,
html:not(.dark) .text-stone-650 {
  color: #1e293b !important;
}

html:not(.dark) .text-slate-805,
html:not(.dark) .text-stone-805 {
  color: #0f172a !important;
}

html:not(.dark) .text-indigo-650,
html:not(.dark) .text-indigo-550 {
  color: #4338ca !important; /* Rich indigo-700 in light mode */
}

html:not(.dark) .text-brand-deception { color: #dc2626 !important; }
html:not(.dark) .text-brand-discord { color: #7c3aed !important; }
html:not(.dark) .text-accent,
html:not(.dark) .text-brand-accent { color: #0284c7 !important; }
html:not(.dark) .text-brand-accentFire { color: #ea580c !important; }
html:not(.dark) .text-brand-accentWater { color: #0284c7 !important; }

/* Custom Hover Backgrounds (Dark Mode) */
.dark .dark\:hover\:bg-slate-805:hover,
.dark .dark\:hover\:bg-slate-850:hover,
.dark .dark\:hover\:bg-slate-855:hover,
.dark .dark\:hover\:bg-slate-880:hover {
  background-color: #1e293b !important; /* Standard slate-800 on hover */
}
.dark .dark\:hover\:bg-slate-850\/40:hover {
  background-color: rgba(30, 41, 59, 0.6) !important;
}
.dark .dark\:hover\:bg-stone-805:hover,
.dark .dark\:hover\:bg-stone-850:hover {
  background-color: #292524 !important; /* Standard stone-800 on hover */
}
.dark .dark\:hover\:bg-stone-850\/40:hover {
  background-color: rgba(41, 37, 36, 0.6) !important;
}
.dark .dark\:hover\:bg-zinc-850:hover {
  background-color: #27272a !important; /* Standard zinc-800 on hover */
}
.dark .dark\:hover\:bg-indigo-550:hover { background-color: #4f46e5 !important; }
.dark .dark\:hover\:bg-rose-550:hover { background-color: #e11d48 !important; }
.dark .dark\:hover\:bg-teal-550:hover { background-color: #0d9488 !important; }

/* Custom Hover Text Colors (Dark Mode) */
.dark .dark\:hover\:text-slate-150:hover,
.dark .dark\:hover\:text-slate-250:hover,
.dark .dark\:hover\:text-stone-150:hover,
.dark .dark\:hover\:text-slate-100:hover {
  color: #ffffff !important;
}
.dark .dark\:hover\:text-slate-350:hover {
  color: #e2e8f0 !important;
}

/* Custom Hover Text Colors (Light Mode) */
html:not(.dark) .hover\:text-slate-150:hover,
html:not(.dark) .hover\:text-slate-650:hover,
html:not(.dark) .hover\:text-slate-850:hover,
html:not(.dark) .hover\:text-slate-900:hover {
  color: #0f172a !important;
}
html:not(.dark) .hover\:text-stone-850:hover {
  color: #1c1917 !important;
}

/* Custom Text Colors (Dark Mode) */
.dark .text-slate-350,
.dark .dark\:text-slate-350,
.dark .text-slate-355,
.dark .dark\:text-slate-355,
.dark .text-stone-350,
.dark .dark\:text-stone-350,
.dark .text-stone-355,
.dark .dark\:text-stone-355 {
  color: #e2e8f0 !important; /* Crisp slate-200 in dark mode (12:1 contrast) */
}

.dark .text-slate-450,
.dark .dark\:text-slate-450,
.dark .text-slate-455,
.dark .dark\:text-slate-455,
.dark .text-stone-450,
.dark .dark\:text-stone-450,
.dark .text-stone-455,
.dark .dark\:text-stone-455 {
  color: #cbd5e1 !important; /* Crisp slate-300 in dark mode (9.2:1 contrast) */
}

.dark .text-slate-404,
.dark .text-slate-405,
.dark .dark\:text-slate-404,
.dark .dark\:text-slate-405,
.dark .text-stone-404,
.dark .text-stone-405,
.dark .dark\:text-stone-404,
.dark .dark\:text-stone-405 {
  color: #cbd5e1 !important;
}

.dark .text-slate-650,
.dark .dark\:text-slate-650,
.dark .text-stone-650,
.dark .dark\:text-stone-650 {
  color: #cbd5e1 !important;
}

.dark .text-brand-deception { color: #f87171 !important; }
.dark .text-brand-discord,
.dark .dark\:text-brand-discord { color: #c4b5fd !important; }
.dark .text-accent,
.dark .dark\:text-accent,
.dark .text-brand-accent { color: #38bdf8 !important; }
.dark .text-brand-accentFire { color: #fb923c !important; }
.dark .text-brand-accentWater { color: #38bdf8 !important; }

/* ==========================================================================
   STRUCTURAL THEME SHIELD (CRITICAL NARRATIVE & UI CONTRAST ENFORCEMENT)
   Guarantees 100% text visibility regardless of broken utility markup.
   ========================================================================== */

/* DARK MODE CONTRAST SHIELD */
.dark #narrative-body,
.dark #narrative-body p,
.dark #narrative-body span:not(.colloc-ref) {
  color: #e2e8f0 !important; /* Never black on black */
}

.dark .colloc-ref {
  color: #c4b5fd !important;
  border-bottom-color: #8b5cf6 !important;
}
.dark .colloc-ref:hover {
  background-color: rgba(139, 92, 246, 0.2) !important;
}

.dark #glossary-phrase { color: #f8fafc !important; }
.dark #glossary-definition { color: #e2e8f0 !important; }
.dark #glossary-example { color: #cbd5e1 !important; }

.dark #card-front-phrase { color: #ffffff !important; }
.dark #card-back-definition { color: #f8fafc !important; }
.dark #card-back-example { color: #e2e8f0 !important; }

.dark #quiz-question-text { color: #ffffff !important; }
.dark #quiz-options-grid button { color: #f8fafc !important; }

.dark #sandbox-input {
  color: #f8fafc !important;
  background-color: #0b1120 !important;
  border-color: #334155 !important;
}

.dark #dictionary-rows td {
  color: #cbd5e1 !important;
}
.dark #dictionary-rows td.font-bold,
.dark #dictionary-rows td [onclick*="triggerTTS"] {
  color: #f8fafc !important;
}

/* Fix dark text classes inside dark containers */
.dark .text-slate-800:not(button):not([class*="bg-"]):not(.ignore-shield),
.dark .text-slate-900:not(button):not([class*="bg-"]):not(.ignore-shield),
.dark .text-slate-950:not(button):not([class*="bg-"]):not(.ignore-shield),
.dark .text-stone-800:not(button):not([class*="bg-"]):not(.ignore-shield),
.dark .text-stone-900:not(button):not([class*="bg-"]):not(.ignore-shield) {
  color: #f1f5f9 !important;
}

/* LIGHT MODE CONTRAST SHIELD */
html:not(.dark) #narrative-body,
html:not(.dark) #narrative-body p,
html:not(.dark) #narrative-body span:not(.colloc-ref) {
  color: #0f172a !important; /* Never washed out on white */
}

html:not(.dark) .colloc-ref {
  color: #6d28d9 !important;
  border-bottom-color: #7c3aed !important;
}
html:not(.dark) .colloc-ref:hover {
  background-color: rgba(124, 58, 237, 0.1) !important;
}

/* Glossary card text contrast shield (adapts to whether card background is dark or light) */
html:not(.dark) #glossary-display:not([class*="from-white"]):not([class*="bg-white"]) #glossary-phrase { color: #ffffff !important; }
html:not(.dark) #glossary-display:not([class*="from-white"]):not([class*="bg-white"]) #glossary-definition { color: #e2e8f0 !important; }
html:not(.dark) #glossary-display:not([class*="from-white"]):not([class*="bg-white"]) #glossary-example { color: #cbd5e1 !important; }

html:not(.dark) #glossary-display[class*="from-white"] #glossary-phrase,
html:not(.dark) #glossary-display[class*="bg-white"] #glossary-phrase { color: #0f172a !important; }
html:not(.dark) #glossary-display[class*="from-white"] #glossary-definition,
html:not(.dark) #glossary-display[class*="bg-white"] #glossary-definition { color: #334155 !important; }
html:not(.dark) #glossary-display[class*="from-white"] #glossary-example,
html:not(.dark) #glossary-display[class*="bg-white"] #glossary-example { color: #475569 !important; }

html:not(.dark) #card-front-phrase { color: #0f172a !important; }
html:not(.dark) #quiz-question-text { color: #0f172a !important; }
html:not(.dark) #quiz-options-grid button { color: #0f172a !important; }

html:not(.dark) #sandbox-input {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) #dictionary-rows td {
  color: #334155 !important;
}
html:not(.dark) #dictionary-rows td.font-bold,
html:not(.dark) #dictionary-rows td [onclick*="triggerTTS"] {
  color: #0f172a !important;
}

/* Boost washed out grays in light mode */
html:not(.dark) .text-slate-400 {
  color: #475569 !important; /* 5.9:1 on white (WCAG AA compliant) */
}
html:not(.dark) .text-slate-300:not(button:disabled):not(.ignore-contrast) {
  color: #64748b !important; /* 4.6:1 on white */
}

/* Boost washed out grays in dark mode */
.dark .dark\:text-slate-500,
.dark .text-slate-500 {
  color: #94a3b8 !important; /* 5.6:1 on slate-900 */
}
.dark .dark\:text-slate-400 {
  color: #cbd5e1 !important; /* 9.2:1 on slate-900 */
}

/* ==========================================================================
   NAVIGATION & ACTION BUTTON HOVER SHIELD
   Guarantees all text and icons remain 100% visible on hover in any theme.
   ========================================================================== */

/* DARK MODE: Navigation & Sidebar Buttons on Hover */
.dark nav button:hover,
.dark [id^="nav-"]:hover,
.dark aside button:hover {
  background-color: #1e293b !important; /* Always dark slate-800 on hover */
  color: #ffffff !important;           /* Always bright white text */
}

.dark nav button:hover *,
.dark [id^="nav-"]:hover *,
.dark aside button:hover * {
  color: #ffffff !important;           /* Enforce white on all child spans & icons */
}

/* Maintain active module visual distinction when hovered in dark mode */
.dark nav button[class*="bg-brand"]:hover,
.dark [id^="nav-"][class*="bg-brand"]:hover {
  background-color: rgba(99, 102, 241, 0.25) !important;
  color: #c7d2fe !important;
}
.dark nav button[class*="bg-brand"]:hover *,
.dark [id^="nav-"][class*="bg-brand"]:hover * {
  color: #c7d2fe !important;
}

/* LIGHT MODE: Navigation & Sidebar Buttons on Hover */
html:not(.dark) nav button:not([class*="bg-brand"]):hover,
html:not(.dark) [id^="nav-"]:not([class*="bg-brand"]):hover,
html:not(.dark) aside button:not([class*="bg-brand"]):hover {
  background-color: #f1f5f9 !important; /* Soft slate-100 on hover */
  color: #0f172a !important;           /* Crisp slate-900 text */
}

html:not(.dark) nav button:not([class*="bg-brand"]):hover *,
html:not(.dark) [id^="nav-"]:not([class*="bg-brand"]):hover *,
html:not(.dark) aside button:not([class*="bg-brand"]):hover * {
  color: #0f172a !important;           /* Enforce dark slate on all child spans & icons */
}

/* Header Action Buttons (Settings, Modal Triggers) */
.dark header button:hover:not(#theme-toggle):not(#theme-shield-btn) {
  background-color: #1e293b !important;
  color: #ffffff !important;
}
.dark header button:hover:not(#theme-toggle):not(#theme-shield-btn) * {
  color: #ffffff !important;
}
html:not(.dark) header button:hover:not(#theme-toggle):not(#theme-shield-btn) {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}
html:not(.dark) header button:hover:not(#theme-toggle):not(#theme-shield-btn) * {
  color: #0f172a !important;
}

/* Mobile Bottom Navigation Bar on Hover */
.dark [id^="view-"] + div button:hover,
.dark nav.md\:hidden button:hover {
  color: #ffffff !important;
}
html:not(.dark) [id^="view-"] + div button:hover,
html:not(.dark) nav.md\:hidden button:hover {
  color: #0f172a !important;
}

/* ==========================================================================
   ACTIVE READABILITY SHIELD MODE (.theme-shield-active)
   When active, enforces maximum contrast (21:1 pure black/white) and clear borders.
   ========================================================================== */
html.theme-shield-active {
  --text-primary: #000000;
  --text-secondary: #111827;
}

html.theme-shield-active.dark {
  --text-primary: #ffffff;
  --text-secondary: #f9fafb;
}

html.theme-shield-active:not(.dark) #narrative-body p {
  color: #000000 !important;
  font-weight: 450 !important;
}

html.theme-shield-active.dark #narrative-body p {
  color: #ffffff !important;
  font-weight: 450 !important;
}

html.theme-shield-active:not(.dark) .colloc-ref {
  color: #4c1d95 !important;
  border-bottom: 2px solid #4c1d95 !important;
  font-weight: 700 !important;
}

html.theme-shield-active.dark .colloc-ref {
  color: #ddd6fe !important;
  border-bottom: 2px solid #a78bfa !important;
  font-weight: 700 !important;
}

html.theme-shield-active .card-front,
html.theme-shield-active #glossary-display,
html.theme-shield-active #quiz-options-grid button {
  border-width: 2px !important;
}

/* ==========================================================================
   FORM CONTROLS & INTERACTIVE ELEMENTS
   ========================================================================== */
select,
input[type="text"],
input[type="search"],
textarea {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dark select,
.dark input[type="text"],
.dark input[type="search"],
.dark textarea {
  background-color: #162032;
  color: #f8fafc;
  border-color: #334155;
}

.dark select:focus,
.dark input[type="text"]:focus,
.dark input[type="search"]:focus,
.dark textarea:focus {
  border-color: #3b82f6;
  outline: 2px solid rgba(59, 130, 246, 0.4);
  outline-offset: 1px;
}

select option {
  background-color: #ffffff;
  color: #0f172a;
}

.dark select option {
  background-color: #1e293b;
  color: #f8fafc;
}

button:disabled,
.btn-disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

html:not(.dark) button:disabled {
  background-color: #e2e8f0 !important;
  color: #475569 !important;
  border-color: #cbd5e1 !important;
}

.dark button:disabled {
  background-color: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

/* ==========================================================================
   INTERACTIVE CARDS & GLASSMORPHISM CLARITY
   ========================================================================== */
.backdrop-blur-md,
.backdrop-blur-sm,
.backdrop-blur-lg {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

html:not(.dark) .glass-panel {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: var(--card-shadow);
}

.dark .glass-panel {
  background: rgba(22, 32, 50, 0.85);
  border: 1px solid rgba(51, 65, 85, 0.6);
  box-shadow: var(--card-shadow-lg);
}

.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }
.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.rotate-y-180 { transform: rotateY(180deg); }

/* ==========================================================================
   NARRATIVE READING HIGHLIGHT (FULL STORY TTS)
   ========================================================================== */
.narrative-reading-active {
  background-color: rgba(99, 102, 241, 0.08) !important;
  border-left: 4px solid var(--accent-indigo) !important;
  padding-left: 1rem !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  box-shadow: 0 2px 8px -2px rgba(99, 102, 241, 0.15) !important;
  transition: all 0.25s ease !important;
}

.dark .narrative-reading-active {
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-left: 4px solid var(--accent-indigo) !important;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   CUSTOM SCROLLBAR (THEME-AWARE)
   ========================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* ==========================================================================
   SMOOTH TRANSITIONS
   ========================================================================== */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *:before,
html.theme-transitioning *:after {
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transitioning,
  html.theme-transitioning * {
    transition: none !important;
  }
}