/* app/assets/stylesheets/theme.css */

/* ============================================
   DARK THEME (Default)
   ============================================ */
:root {
  /* Background colors - avoiding pure black */
  --color-bg-primary: #0f172a; /* Main background (slate-900) */
  --color-bg-secondary: #1e293b; /* Secondary surfaces (slate-800) */
  --color-bg-tertiary: #334155; /* Cards, panels (slate-700) */
  --color-bg-hover: #475569; /* Hover states (slate-600) */
  --color-bg-active: #64748b; /* Active states (slate-500) */

  /* Text colors - maintaining high contrast */
  --color-text-primary: #f1f5f9; /* Main text (contrast 13.8:1) */
  --color-text-secondary: #cbd5e1; /* Secondary text (contrast 9.2:1) */
  --color-text-muted: #94a3b8; /* Muted text (contrast 5.1:1) */
  --color-text-disabled: #64748b; /* Disabled text */
  --color-text-inverse: #ffffff; /* Text on light backgrounds */

  /* Border colors */
  --color-border-primary: #475569; /* Default borders */
  --color-border-secondary: #334155; /* Subtle borders */
  --color-border-focus: #818cf8; /* Focus rings (lighter for dark) */
  --color-border-error: #f87171; /* Error states */

  /* Shadow colors - softer in dark mode */
  --color-shadow-sm: rgba(0, 0, 0, 0.2);
  --color-shadow-md: rgba(0, 0, 0, 0.3);
  --color-shadow-lg: rgba(0, 0, 0, 0.4);

  /* Accent colors - adjusted for dark background */
  --color-accent-primary: #818cf8; /* Lighter primary for contrast */
  --color-accent-hover: #a5b4fc; /* Hover state */
  --color-accent-active: #c7d2fe; /* Active state */
  --color-accent-light: #312e81; /* Dark accent background */

  /* Status colors - adjusted brightness */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;

  /* Special UI elements */
  --color-code-bg: #1e293b;
  --color-code-text: #e2e8f0;
  --color-selection-bg: #1e3a8a;
  --color-selection-text: #bfdbfe;

  /* Transitions */
  --transition-duration: 200ms;
  --transition-easing: ease-in-out;
}

/* ============================================
   LIGHT THEME
   ============================================ */
:root[data-theme="light"] {
  /* Background colors */
  --color-bg-primary: #ffffff; /* Main background */
  --color-bg-secondary: #f9fafb; /* Secondary surfaces */
  --color-bg-tertiary: #f3f4f6; /* Cards, panels */
  --color-bg-hover: #f3f4f6; /* Hover states */
  --color-bg-active: #e5e7eb; /* Active/pressed states */

  /* Text colors */
  --color-text-primary: #111827; /* Main text (contrast 16.1:1) */
  --color-text-secondary: #374151; /* Secondary text (contrast 10.3:1) */
  --color-text-muted: #6b7280; /* Muted text (contrast 4.7:1) */
  --color-text-disabled: #9ca3af; /* Disabled text */
  --color-text-inverse: #0f172a; /* Text on dark backgrounds */

  /* Border colors */
  --color-border-primary: #d1d5db; /* Default borders */
  --color-border-secondary: #e5e7eb; /* Subtle borders */
  --color-border-focus: #6366f1; /* Focus rings */
  --color-border-error: #ef4444; /* Error states */

  /* Shadow colors */
  --color-shadow-sm: rgba(0, 0, 0, 0.05);
  --color-shadow-md: rgba(0, 0, 0, 0.1);
  --color-shadow-lg: rgba(0, 0, 0, 0.15);

  /* Accent colors (brand) */
  --color-accent-primary: #6366f1; /* Primary brand color */
  --color-accent-hover: #4f46e5; /* Hover state */
  --color-accent-active: #4338ca; /* Active state */
  --color-accent-light: #e0e7ff; /* Light accent background */

  /* Status colors */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* Special UI elements */
  --color-code-bg: #f3f4f6;
  --color-code-text: #1f2937;
  --color-selection-bg: #dbeafe;
  --color-selection-text: #1e40af;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-duration: 0ms;
  }
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  width: 40px;
  height: 40px;
  padding: 0;

  /* Appearance */
  background-color: var(--color-bg-secondary);
  border: 2px solid var(--color-border-primary);
  border-radius: 8px;
  color: var(--color-text-primary);
  cursor: pointer;

  /* Transitions */
  transition: all var(--transition-duration) var(--transition-easing);

  /* Remove default button styles */
  font: inherit;
  outline: none;
}

/* Hover state */
.theme-toggle-btn:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-border-focus);
  transform: scale(1.05);
}

/* Focus state (keyboard navigation) */
.theme-toggle-btn:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--color-accent-light);
}

/* Active state (clicking) */
.theme-toggle-btn:active {
  transform: scale(0.95);
  background-color: var(--color-bg-active);
}

/* Icon styling */
.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-primary);
  transition: transform var(--transition-duration) var(--transition-easing);
}

.theme-toggle-btn:hover svg {
  transform: rotate(15deg);
}

/* Disabled state (if needed) */
.theme-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hidden utility class */
.hidden {
  display: none;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .theme-toggle-btn {
    width: 44px; /* Larger touch target */
    height: 44px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .theme-toggle-btn:focus {
    outline-width: 3px;
  }
}

/* Reduced motion for theme toggle */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-btn,
  .theme-toggle-btn svg {
    transition: none !important;
  }
}

/* ============================================
   GLOBAL DARK THEME OVERRIDES
   Override Tailwind classes with CSS variables
   ============================================

   NOTE ON !important USAGE:
   All dark theme overrides use !important to reliably override Tailwind utility classes.
   This is intentional and justified because:

   1. Tailwind utilities are designed with high specificity
   2. Overriding them without !important would require complex selector chains
   3. The theme system must work consistently across all pages
   4. !important provides clear intent: "theme always wins"

   Alternative approaches (e.g., :root[data-theme="dark"] html body .text-gray-900)
   would be more complex, harder to maintain, and more fragile.

   This is a standard pattern for CSS theme systems that need to override
   utility-first frameworks like Tailwind CSS.
   ============================================ */

/* ============================================
   TAILWIND OVERRIDES FOR DEFAULT (DARK) THEME
   Remove hardcoded light colors from views
   ============================================ */
/* Override gradients - remove them in dark theme */
:root .bg-gradient-to-br,
:root .bg-gradient-to-r,
:root .bg-gradient-to-l,
:root .bg-gradient-to-t,
:root .bg-gradient-to-b {
  background-image: none !important;
  background-color: var(--color-bg-primary) !important;
}

/* Restore gradients in light theme */
:root[data-theme="light"] .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-l {
  background-image: linear-gradient(to left, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
  background-color: transparent !important;
}

/* Override light background colors in dark theme (default) */
:root .bg-white {
  background-color: var(--color-bg-secondary) !important;
}

:root .bg-gray-50,
:root .bg-gray-100 {
  background-color: var(--color-bg-secondary) !important;
}

:root .bg-gray-200 {
  background-color: var(--color-bg-tertiary) !important;
}

/* Override colored backgrounds in dark theme (default) */
:root .bg-indigo-50 {
  background-color: rgba(99, 102, 241, 0.15) !important; /* indigo with opacity */
}

:root .bg-purple-50 {
  background-color: rgba(168, 85, 247, 0.15) !important; /* purple with opacity */
}

:root .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.15) !important; /* blue with opacity */
}

:root .bg-teal-50 {
  background-color: rgba(20, 184, 166, 0.15) !important; /* teal with opacity */
}

:root .bg-green-50 {
  background-color: rgba(34, 197, 94, 0.15) !important; /* green with opacity */
}

/* Override colored borders in dark theme (default) */
:root .border-indigo-100 {
  border-color: rgba(99, 102, 241, 0.3) !important;
}

:root .border-purple-100 {
  border-color: rgba(168, 85, 247, 0.3) !important;
}

:root .border-blue-100 {
  border-color: rgba(59, 130, 246, 0.3) !important;
}

:root .border-teal-100 {
  border-color: rgba(20, 184, 166, 0.3) !important;
}

:root .border-green-100 {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* Override colored text in dark theme (default) */
:root .text-indigo-900,
:root .text-indigo-700 {
  color: #c7d2fe !important; /* light indigo */
}

:root .text-purple-900,
:root .text-purple-700 {
  color: #e9d5ff !important; /* light purple */
}

:root .text-blue-900,
:root .text-blue-700 {
  color: #dbeafe !important; /* light blue */
}

:root .text-teal-900,
:root .text-teal-700 {
  color: #ccfbf1 !important; /* light teal */
}

:root .text-green-900 {
  color: #bbf7d0 !important; /* light green */
}

/* Restore original colors in light theme */
:root[data-theme="light"] .bg-white {
  background-color: #ffffff !important;
}

:root[data-theme="light"] .bg-gray-50 {
  background-color: #f9fafb !important;
}

:root[data-theme="light"] .bg-gray-100 {
  background-color: #f3f4f6 !important;
}

:root[data-theme="light"] .bg-gray-200 {
  background-color: #e5e7eb !important;
}

/* Restore colored backgrounds in light theme */
:root[data-theme="light"] .bg-indigo-50 {
  background-color: #eef2ff !important;
}

:root[data-theme="light"] .bg-purple-50 {
  background-color: #faf5ff !important;
}

:root[data-theme="light"] .bg-blue-50 {
  background-color: #eff6ff !important;
}

:root[data-theme="light"] .bg-teal-50 {
  background-color: #f0fdfa !important;
}

:root[data-theme="light"] .bg-green-50 {
  background-color: #f0fdf4 !important;
}

/* Restore colored borders in light theme */
:root[data-theme="light"] .border-indigo-100 {
  border-color: #e0e7ff !important;
}

:root[data-theme="light"] .border-purple-100 {
  border-color: #f3e8ff !important;
}

:root[data-theme="light"] .border-blue-100 {
  border-color: #dbeafe !important;
}

:root[data-theme="light"] .border-teal-100 {
  border-color: #ccfbf1 !important;
}

:root[data-theme="light"] .border-green-100 {
  border-color: #dcfce7 !important;
}

/* Restore colored text in light theme */
:root[data-theme="light"] .text-indigo-900 {
  color: #312e81 !important;
}

:root[data-theme="light"] .text-indigo-700 {
  color: #4338ca !important;
}

:root[data-theme="light"] .text-purple-900 {
  color: #581c87 !important;
}

:root[data-theme="light"] .text-purple-700 {
  color: #7e22ce !important;
}

:root[data-theme="light"] .text-blue-900 {
  color: #1e3a8a !important;
}

:root[data-theme="light"] .text-blue-700 {
  color: #1d4ed8 !important;
}

:root[data-theme="light"] .text-teal-900 {
  color: #134e4a !important;
}

:root[data-theme="light"] .text-teal-700 {
  color: #0f766e !important;
}

:root[data-theme="light"] .text-green-900 {
  color: #14532d !important;
}

/* Override Tailwind text colors */
:root[data-theme="dark"] .text-gray-900 {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .text-gray-800 {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .text-gray-700 {
  color: var(--color-text-secondary) !important;
}
:root[data-theme="dark"] .text-gray-600 {
  color: var(--color-text-secondary) !important;
}
:root[data-theme="dark"] .text-gray-500 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-400 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-300 {
  color: var(--color-text-muted) !important;
}
:root[data-theme="dark"] .text-gray-100 {
  color: #f3f4f6 !important; /* light gray for dark theme */
}

/* Override text colors in LIGHT theme - make them darker for better contrast */
:root[data-theme="light"] .text-gray-900 {
  color: #000000 !important; /* Pure black for maximum contrast */
}

:root[data-theme="light"] .text-gray-700 {
  color: #1f2937 !important; /* gray-800 - much darker than default gray-700 */
}

:root[data-theme="light"] .text-purple-600 {
  color: #6d28d9 !important; /* purple-800 - darker than default purple-600 */
}

/* Override Tailwind background colors */
:root[data-theme="dark"] .bg-white {
  background-color: var(--color-bg-secondary) !important;
}
:root[data-theme="dark"] .bg-white\/90 {
  background-color: rgba(30, 41, 59, 0.9) !important;
}
:root[data-theme="dark"] .bg-gray-50 {
  background-color: var(--color-bg-secondary) !important;
}
:root[data-theme="dark"] .bg-gray-100 {
  background-color: var(--color-bg-tertiary) !important;
}
:root[data-theme="dark"] .bg-gray-200 {
  background-color: var(--color-bg-hover) !important;
}
:root[data-theme="dark"] .bg-gray-300 {
  background-color: #374151 !important; /* gray-700 for disabled button */
}
:root[data-theme="dark"] .bg-gray-700 {
  background-color: #374151 !important; /* darker background */
}
:root[data-theme="dark"] .bg-gray-800 {
  background-color: #1f2937 !important; /* darker background */
}

/* DaisyUI base colors - theme-aware backgrounds */
:root[data-theme="dark"] .bg-base-100 {
  background-color: var(--color-bg-primary) !important; /* #0f172a */
}
:root[data-theme="dark"] .bg-base-200 {
  background-color: var(--color-bg-secondary) !important; /* #1e293b */
}
:root[data-theme="dark"] .bg-base-300 {
  background-color: var(--color-bg-tertiary) !important; /* #334155 - lighter for better contrast */
}

:root[data-theme="light"] .bg-base-100 {
  background-color: #ffffff !important;
}
:root[data-theme="light"] .bg-base-200 {
  background-color: #f9fafb !important; /* gray-50 */
}
:root[data-theme="light"] .bg-base-300 {
  background-color: #f3f4f6 !important; /* gray-100 */
}

/* Devise Forms - Elevated Surface

   Specificity: 0-3-1 (attribute + pseudo-class + class)
   Matches: app/views/layouts/devise.html.haml `.devise-auth-card`

   Provides visual separation for authentication forms in dark theme
   by using --color-bg-secondary (#1e293b) instead of --color-bg-primary (#0f172a).

   If Devise layout changes classes, update the `.devise-auth-card` selector.
*/
:root[data-theme="dark"] .devise-auth-card {
  background-color: var(--color-bg-secondary) !important;
}

/* Override Tailwind border colors */
:root[data-theme="dark"] .border-white {
  border-color: var(--color-border-primary) !important;
}
:root[data-theme="dark"] .border-gray-300 {
  border-color: var(--color-border-primary) !important;
}
:root[data-theme="dark"] .border-gray-200 {
  border-color: var(--color-border-secondary) !important;
}

/* Override indigo colors for links/buttons */
:root[data-theme="dark"] .text-indigo-600 {
  color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .bg-indigo-600 {
  background-color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .hover\:bg-indigo-700:hover {
  background-color: var(--color-accent-hover) !important;
}
:root[data-theme="dark"] .hover\:text-gray-900:hover {
  color: var(--color-text-primary) !important;
}
:root[data-theme="dark"] .focus\:ring-indigo-500:focus {
  --tw-ring-color: var(--color-accent-primary) !important;
}
:root[data-theme="dark"] .focus\:border-indigo-500:focus {
  border-color: var(--color-accent-primary) !important;
}

/* Override green colors (success states, highlights) */
:root[data-theme="dark"] .bg-green-100 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}
:root[data-theme="dark"] .bg-green-600 {
  background-color: var(--color-success) !important;
}
:root[data-theme="dark"] .bg-green-700 {
  background-color: #047857 !important; /* darker green for better contrast */
}
:root[data-theme="dark"] .bg-green-800 {
  background-color: #065f46 !important; /* very dark green */
}
:root[data-theme="dark"] .bg-green-900 {
  background-color: #064e3b !important; /* even darker green */
}
:root[data-theme="dark"] .bg-green-950 {
  background-color: #042f2e !important; /* almost black green */
}
:root[data-theme="dark"] .bg-teal-800 {
  background-color: #115e59 !important; /* dark teal */
}
:root[data-theme="dark"] .bg-teal-900 {
  background-color: #134e4a !important; /* darker teal */
}
:root[data-theme="dark"] .bg-teal-950 {
  background-color: #042f2e !important; /* almost black teal */
}
:root[data-theme="dark"] .hover\:bg-green-700:hover {
  background-color: #059669 !important;
}
:root[data-theme="dark"] .text-green-700 {
  color: var(--color-success) !important;
}
:root[data-theme="dark"] .border-green-500 {
  border-color: var(--color-success) !important;
}

/* Override form input styles */
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

:root[data-theme="dark"] input[type="email"]:focus,
:root[data-theme="dark"] input[type="password"]:focus,
:root[data-theme="dark"] input[type="text"]:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-accent-primary) !important;
}

/* Override link colors */
:root[data-theme="dark"] a {
  color: var(--color-accent-primary) !important;
}

:root[data-theme="dark"] a:hover {
  color: var(--color-accent-hover) !important;
}

/* Remove gradient backgrounds in dark mode */
:root[data-theme="dark"] .bg-gradient-to-br,
:root[data-theme="dark"] .bg-gradient-to-r {
  background-image: none !important;
}

/* Override green backgrounds with dark gradient */
:root[data-theme="dark"] .bg-gradient-to-r.from-green-50 {
  background: linear-gradient(to right, #1e293b, #334155) !important;
}

/* Override character creation block gradient (purple to indigo) */
:root[data-theme="dark"] .bg-gradient-to-r.from-purple-500.to-indigo-600 {
  background: linear-gradient(to right, #7c3aed, #4f46e5) !important;
}

/* Override book summary block gradient (indigo to purple) */
:root[data-theme="dark"] .bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(to right, #4f46e5, #7c3aed) !important;
}

/* Override publishers hero gradient - significantly darker in dark theme, lighter in light theme */
:root[data-theme="dark"] .publishers-hero.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(
    to right,
    #1f2937,
    #111827
  ) !important; /* gray-800 to gray-900 - very dark */
}

:root[data-theme="light"] .publishers-hero.bg-gradient-to-r.from-indigo-600.to-purple-600 {
  background: linear-gradient(
    to right,
    #6b7280,
    #4b5563
  ) !important; /* gray-500 to gray-600 - lighter by 2 tones */
}

/* Override colored icon backgrounds */
:root[data-theme="dark"] .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.15) !important;
}
:root[data-theme="dark"] .bg-yellow-100 {
  background-color: rgba(251, 191, 36, 0.15) !important;
}

/* Override colored text for icons */
:root[data-theme="dark"] .text-blue-600 {
  color: #60a5fa !important;
}
:root[data-theme="dark"] .text-green-600 {
  color: var(--color-success) !important;
}
:root[data-theme="dark"] .text-yellow-600 {
  color: #fbbf24 !important;
}

/* Override green borders */
:root[data-theme="dark"] .border-green-200 {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

/* ============================================
   HTML ELEMENT STYLES
   Smooth scroll for anchor navigation
   ============================================ */
html {
  scroll-behavior: smooth;
}

/* Disable smooth scroll for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================
   BODY ELEMENT STYLES
   Apply theme colors to body (NO TRANSITIONS to prevent flash)
   ============================================ */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Apply transitions only when theme is fully loaded */
body.theme-transitions-enabled {
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

/* Fix hover states for language switcher and buttons */
:root[data-theme="dark"] .hover\:bg-gray-100:hover {
  background-color: var(--color-bg-hover) !important;
  color: var(--color-text-primary) !important;
}

:root[data-theme="dark"] .text-white {
  color: #ffffff !important;
}

/* ============================================
   CUSTOM SELECT STYLING
   ============================================ */
.styled-select {
  /* Ensure proper background and text colors */
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-primary) !important;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
}

.styled-select:hover {
  border-color: var(--color-border-focus);
}

.styled-select:focus {
  border-color: var(--color-border-focus) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Style for select options */
.styled-select option {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  padding: 0.5rem 1rem;
}

/* Placeholder option styling */
.styled-select option:disabled {
  color: var(--color-text-muted);
}

/* Dark theme adjustments */
:root[data-theme="dark"] .styled-select {
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;
}

:root[data-theme="dark"] .styled-select option {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* ============================================
   REVIEW ISSUE/WIN BLOCKS - DARK THEME
   ============================================ */
:root[data-theme="dark"] .bg-red-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .bg-blue-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .bg-purple-50 {
  background-color: #0f0f0f !important; /* almost black for dark theme */
}

:root[data-theme="dark"] .text-gray-700 {
  color: #d1d5db !important; /* gray-300 for better readability */
}

:root[data-theme="dark"] .text-red-900 {
  color: #fca5a5 !important; /* red-300 for better readability in dark theme */
}

/* ============================================
   BOOK COMPLETION - FIX TAILWIND OKLCH COLORS
   ============================================ */
/* Override broken Tailwind 4.x OKLCH colors for light theme */
.book-progress-container .bg-indigo-50 {
  background-color: #eef2ff;
}
.book-progress-container .bg-purple-50 {
  background-color: #faf5ff;
}
.book-progress-container .bg-blue-50 {
  background-color: #eff6ff;
}
.book-progress-container .bg-teal-50 {
  background-color: #f0fdfa;
}
.book-progress-container .bg-green-50 {
  background-color: #f0fdf4;
}

.book-progress-container .text-gray-900 {
  color: #111827;
}
.book-progress-container .text-indigo-900 {
  color: #312e81;
}
.book-progress-container .text-purple-900 {
  color: #581c87;
}
.book-progress-container .text-blue-900 {
  color: #1e3a8a;
}
.book-progress-container .text-teal-900 {
  color: #134e4a;
}
.book-progress-container .text-green-900 {
  color: #14532d;
}

.book-progress-container .text-indigo-700 {
  color: #4338ca;
}
.book-progress-container .text-purple-700 {
  color: #7e22ce;
}
.book-progress-container .text-blue-700 {
  color: #1d4ed8;
}
.book-progress-container .text-teal-700 {
  color: #0f766e;
}
.book-progress-container .text-green-700 {
  color: #15803d;
}

.book-progress-container .border-indigo-100 {
  border-color: #e0e7ff;
}
.book-progress-container .border-purple-100 {
  border-color: #f3e8ff;
}
.book-progress-container .border-blue-100 {
  border-color: #dbeafe;
}
.book-progress-container .border-teal-100 {
  border-color: #ccfbf1;
}
.book-progress-container .border-green-100 {
  border-color: #dcfce7;
}

/* Dark theme overrides - restore dark theme colors */
:root[data-theme="dark"] .book-progress-container .bg-indigo-50 {
  background-color: rgba(49, 46, 129, 0.3); /* dark:bg-indigo-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-purple-50 {
  background-color: rgba(88, 28, 135, 0.3); /* dark:bg-purple-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-blue-50 {
  background-color: rgba(30, 58, 138, 0.3); /* dark:bg-blue-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-teal-50 {
  background-color: rgba(19, 78, 74, 0.3); /* dark:bg-teal-900 dark:bg-opacity-30 */
}
:root[data-theme="dark"] .book-progress-container .bg-green-50 {
  background-color: rgba(20, 83, 45, 0.3); /* dark:bg-green-900 dark:bg-opacity-30 */
}

:root[data-theme="dark"] .book-progress-container .text-gray-900,
:root[data-theme="dark"] .book-progress-container .text-indigo-900,
:root[data-theme="dark"] .book-progress-container .text-purple-900,
:root[data-theme="dark"] .book-progress-container .text-blue-900,
:root[data-theme="dark"] .book-progress-container .text-teal-900,
:root[data-theme="dark"] .book-progress-container .text-green-900 {
  color: #e5e7eb; /* gray-200 */
}

:root[data-theme="dark"] .book-progress-container .text-indigo-700,
:root[data-theme="dark"] .book-progress-container .text-purple-700,
:root[data-theme="dark"] .book-progress-container .text-blue-700,
:root[data-theme="dark"] .book-progress-container .text-teal-700,
:root[data-theme="dark"] .book-progress-container .text-green-700 {
  color: #9ca3af; /* gray-400 */
}

:root[data-theme="dark"] .book-progress-container .border-indigo-100 {
  border-color: rgba(67, 56, 202, 0.7); /* dark:border-indigo-700 */
}
:root[data-theme="dark"] .book-progress-container .border-purple-100 {
  border-color: rgba(126, 34, 206, 0.7); /* dark:border-purple-700 */
}
:root[data-theme="dark"] .book-progress-container .border-blue-100 {
  border-color: rgba(29, 78, 216, 0.7); /* dark:border-blue-700 */
}
:root[data-theme="dark"] .book-progress-container .border-teal-100 {
  border-color: rgba(15, 118, 110, 0.7); /* dark:border-teal-700 */
}
:root[data-theme="dark"] .book-progress-container .border-green-100 {
  border-color: rgba(21, 128, 61, 0.7); /* dark:border-green-700 */
}

/* ============================================
   REVIEW SUMMARY CARDS - ENSURE VISIBILITY
   ============================================ */
.review-summary-card {
  background-color: white !important;
}

:root[data-theme="dark"] .review-summary-card {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Review summary main block - light background in light theme, almost black in dark theme */
.review-summary-block {
  background-color: #f3e8ff !important; /* purple-100 - very light purple for light theme */
}

:root[data-theme="dark"] .review-summary-block {
  background-color: #1a1a2e !important; /* Almost black for dark theme */
}

/* Review summary block - text colors for light theme (dark text on light background) */
.review-summary-block h3 {
  color: #111827 !important; /* gray-900 for light theme */
}

.review-summary-block p {
  color: #111827 !important; /* gray-900 for light theme */
}

.review-summary-block span {
  color: #374151 !important; /* gray-700 for light theme */
}

/* Keep dark theme text colors unchanged */
:root[data-theme="dark"] .review-summary-block h3 {
  color: white !important;
}

:root[data-theme="dark"] .review-summary-block p {
  color: #e5e7eb !important; /* gray-200 */
}

:root[data-theme="dark"] .review-summary-block span {
  color: #d1d5db !important; /* gray-300 */
}

/* ============================================
   BUTTON CURSOR FIX - ALL BUTTONS
   ============================================ */
/* Ensure all buttons have pointer cursor when not disabled */
button:not(:disabled),
button:not([disabled]),
input[type="submit"]:not(:disabled),
input[type="button"]:not(:disabled),
a[role="button"]:not(:disabled) {
  cursor: pointer !important;
}

/* Ensure disabled buttons have not-allowed cursor */
button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="button"]:disabled,
a[role="button"][disabled] {
  cursor: not-allowed !important;
}
/* app/assets/stylesheets/button_theme.css */

/* Orange button theme variations */
.btn-orange-theme {
  background-color: rgb(249 115 22); /* orange-500 */
}

.btn-orange-theme:hover {
  background-color: rgb(234 88 12); /* orange-600 */
}

/* Dark theme overrides */
html[data-theme="dark"] .btn-orange-theme {
  background-color: rgb(124 45 18); /* orange-900 - very muted orange */
}

html[data-theme="dark"] .btn-orange-theme:hover {
  background-color: rgb(67 20 7); /* orange-950 - almost brown */
}
/* app/assets/stylesheets/cookie_consent.css */
.cookie-consent-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #f9fafb;
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2);
  border-top: 2px solid #d1d5db;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  display: none;
}

.cookie-consent-banner p,
.cookie-consent-banner span,
.cookie-consent-banner div:not(:has(button)) {
  color: #111827 !important;
}

.cookie-consent-banner button.bg-blue-600,
.cookie-consent-banner button.dark\:bg-blue-500 {
  color: #ffffff !important;
}

.cookie-consent-banner button.bg-white {
  color: #111827 !important;
}

/* Dark theme styles */
[data-theme="dark"] .cookie-consent-banner,
.dark .cookie-consent-banner,
html.dark .cookie-consent-banner {
  background-color: #1f2937;
  border-top-color: #374151;
  box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .cookie-consent-banner p,
[data-theme="dark"] .cookie-consent-banner span,
[data-theme="dark"] .cookie-consent-banner div:not(:has(button)),
.dark .cookie-consent-banner p,
.dark .cookie-consent-banner span,
.dark .cookie-consent-banner div:not(:has(button)),
html.dark .cookie-consent-banner p,
html.dark .cookie-consent-banner span,
html.dark .cookie-consent-banner div:not(:has(button)) {
  color: #f3f4f6 !important;
}

[data-theme="dark"] .cookie-consent-banner button.bg-white,
.dark .cookie-consent-banner button.bg-white,
html.dark .cookie-consent-banner button.bg-white {
  color: #111827 !important;
}

[data-theme="dark"] .cookie-consent-banner button.dark\:bg-gray-800,
.dark .cookie-consent-banner button.dark\:bg-gray-800,
html.dark .cookie-consent-banner button.dark\:bg-gray-800 {
  color: #f3f4f6 !important;
}

.cookie-consent-banner.show {
  transform: translateY(0);
  display: block !important;
}
/* app/assets/stylesheets/book_wizard.css */

.wizard-step {
  display: none;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wizard-step.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Safari-friendly select styling */
#wizard-form select,
.wizard-step select,
select[data-step] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  padding: 1rem 2rem !important;
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--color-border-primary) !important;
  border-radius: 1.5rem !important;
  background-color: var(--color-bg-primary) !important;
  color: var(--color-text-primary) !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.5rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 3rem !important;
  box-shadow: 0 1px 2px 0 var(--color-shadow-sm) !important;
  transition: all var(--transition-duration) var(--transition-easing) !important;
  cursor: pointer !important;
}

#wizard-form select:hover,
.wizard-step select:hover,
select[data-step]:hover {
  box-shadow: 0 4px 6px -1px var(--color-shadow-md), 0 2px 4px -2px var(--color-shadow-sm) !important;
  border-color: var(--color-text-disabled) !important;
}

#wizard-form select:focus,
.wizard-step select:focus,
select[data-step]:focus {
  outline: none !important;
  border-color: var(--color-border-focus) !important;
  box-shadow: 0 0 0 3px var(--color-accent-light) !important;
}
/* app/assets/stylesheets/book_characters.css */

/* ============================================
   BOOK CHARACTER CONSTRUCTOR FORM STYLES
   ============================================ */

/* Select boxes styling for character constructor */
.book-character-form select,
form[action*="/book_characters"] select {
  /* Remove default browser styling */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  /* Explicit colors for light theme */
  background-color: #ffffff !important;
  color: #1f2937 !important;

  /* Add custom dropdown arrow using SVG */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 0.75rem center !important;
  background-repeat: no-repeat !important;
  background-size: 1.5em 1.5em !important;
  padding-right: 3rem !important; /* Space for arrow */

  /* Ensure cursor pointer for better UX */
  cursor: pointer !important;

  /* Smooth transitions */
  transition: all var(--transition-duration, 200ms) var(--transition-easing, ease-in-out) !important;
}

/* Option elements - ensure visibility */
.book-character-form select option,
form[action*="/book_characters"] select option {
  background-color: #ffffff;
  color: #1f2937;
  padding: 0.5rem;
}

/* Hover state for select boxes */
.book-character-form select:hover,
form[action*="/book_characters"] select:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06) !important;
  border-color: #9ca3af !important;
}

/* Focus state for select boxes */
.book-character-form select:focus,
form[action*="/book_characters"] select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3) !important;
}

/* Dark theme overrides for character form selects */
:root[data-theme="dark"] .book-character-form select,
:root[data-theme="dark"] form[action*="/book_characters"] select {
  background-color: var(--color-bg-secondary) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-primary) !important;

  /* Update arrow color for dark theme */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="dark"] .book-character-form select:focus,
:root[data-theme="dark"] form[action*="/book_characters"] select:focus {
  background-color: var(--color-bg-tertiary) !important;
  border-color: var(--color-accent-primary) !important;
}

/* Datalist input styling (for name autocomplete) */
.book-character-form input[list],
form[action*="/book_characters"] input[list] {
  position: relative;
}

/* Optional: Add subtle indicator for datalist fields */
.book-character-form input[list]::after,
form[action*="/book_characters"] input[list]::after {
  content: "";
  /* No visual indicator needed - HTML5 datalist provides native UI */
}

/* Ensure datalist dropdown works properly */
datalist {
  display: none; /* Hidden by default, shown by browser when input is focused */
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
  .book-character-form select,
  form[action*="/book_characters"] select {
    /* Larger touch targets on mobile */
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom on focus */
  }

  .book-character-form input[list],
  form[action*="/book_characters"] input[list] {
    font-size: 16px; /* Prevent iOS zoom on focus */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .book-character-form select,
  .book-character-form input,
  form[action*="/book_characters"] select,
  form[action*="/book_characters"] input {
    transition: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .book-character-form select,
  form[action*="/book_characters"] select {
    border-width: 3px !important;
  }

  .book-character-form select:focus,
  form[action*="/book_characters"] select:focus {
    outline-width: 3px !important;
  }
}

/* Disabled state styling */
.book-character-form select:disabled,
form[action*="/book_characters"] select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f3f4f6;
}

:root[data-theme="dark"] .book-character-form select:disabled,
:root[data-theme="dark"] form[action*="/book_characters"] select:disabled {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-disabled);
}

/* ============================================
   WIZARD STEPS FUNCTIONALITY
   ============================================ */

/* Hide all wizard steps by default */
.wizard-step {
  display: none;
}

/* Show only active step */
.wizard-step.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

/* Fade in animation for step transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Disable animation for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .wizard-step.active {
    animation: none;
  }
}
/* app/assets/stylesheets/autosave.css
 * Frontend styling for autosave functionality
 * Created: 2025-11-10
 */

/* ============================================
   LOADING ANIMATION
   Pulsing dots during save operation
   ============================================ */
@keyframes autosave-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.autosave-dots {
  display: inline-block;
  animation: autosave-pulse 1.5s infinite ease-in-out;
}

/* ============================================
   BUTTON STATE TRANSITIONS
   Smooth color changes (200ms)
   ============================================ */
button[type="submit"] {
  transition: background-color 200ms ease-in-out,
              border-color 200ms ease-in-out,
              color 200ms ease-in-out,
              opacity 200ms ease-in-out,
              transform 200ms ease-in-out;
}

/* Prevent layout shift during state changes */
button[type="submit"] {
  min-width: fit-content;
}

/* ============================================
   ERROR MESSAGE STYLING
   Inline validation errors
   ============================================ */
.autosave-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-error, #ef4444);
  font-weight: 500;
}

/* Dark theme support */
:root[data-theme="dark"] .autosave-error {
  color: var(--color-error, #f87171);
}

/* ============================================
   SCREEN READER ONLY UTILITY
   Visually hidden but accessible
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================
   INPUT ERROR STATE
   Red border for invalid fields
   ============================================ */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--color-error, #ef4444) !important;
  border-width: 2px;
}

/* Dark theme error border */
:root[data-theme="dark"] input[aria-invalid="true"],
:root[data-theme="dark"] textarea[aria-invalid="true"],
:root[data-theme="dark"] select[aria-invalid="true"] {
  border-color: var(--color-error, #f87171) !important;
}

/* Focus ring on invalid fields */
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  outline: 2px solid var(--color-error, #ef4444);
  outline-offset: 2px;
}

/* ============================================
   REDUCED MOTION SUPPORT
   Respect user preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .autosave-dots {
    animation: none;
    opacity: 1;
  }

  button[type="submit"] {
    transition: none;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   Enhanced visibility for accessibility
   ============================================ */
@media (prefers-contrast: high) {
  .autosave-error {
    font-weight: 700;
    text-decoration: underline;
  }

  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  select[aria-invalid="true"] {
    border-width: 3px !important;
  }
}

/* ============================================
   MOBILE OPTIMIZATIONS
   Touch-friendly targets
   ============================================ */
@media (max-width: 640px) {
  button[type="submit"] {
    min-height: 44px; /* WCAG 2.1 AA minimum touch target */
    padding: 12px 16px;
  }

  .autosave-error {
    font-size: 0.8125rem; /* 13px - slightly smaller on mobile */
  }
}
/* app/assets/stylesheets/how_to_earn.css */

/* CTA Block styling for light theme only - dark theme uses default */
html[data-theme="light"] .cta-block-earn {
  background: linear-gradient(135deg, #312e81 0%, #581c87 50%, #1e3a8a 100%) !important;
}

html[data-theme="light"] .cta-block-earn h2,
html[data-theme="light"] .cta-block-earn p,
html[data-theme="light"] .cta-block-earn a:last-child {
  color: white !important;
}

html[data-theme="light"] .cta-block-earn a:last-child {
  border-color: white !important;
}

html[data-theme="light"] .cta-block-earn a:last-child:hover {
  background: white !important;
  color: #312e81 !important;
}
/* app/assets/stylesheets/errors.css */

/* Giant error code sizes for error pages */
.text-\[120px\] {
  font-size: 120px;
}

.md\:text-\[180px\] {
  font-size: 180px;
}

.lg\:text-\[220px\] {
  font-size: 220px;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
  .md\:text-\[180px\] {
    font-size: 180px;
  }
}

@media (min-width: 1024px) {
  .lg\:text-\[220px\] {
    font-size: 220px;
  }
}
/* app/assets/stylesheets/profile.css */
.tab-button {
  padding: 0.875rem 1.25rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  transition: all 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.tab-button:hover {
  color: #4f46e5;
  background-color: #f9fafb;
}

.tab-button.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
  background-color: #fafafa;
}

@media (max-width: 768px) {
  .tab-button {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  .tab-button svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }
}
/* app/assets/stylesheets/carousel.css */

/* Scroll-snap utilities for carousel */
.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-mandatory {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

/* Hide scrollbar while maintaining scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* Smooth scrolling behavior */
.snap-x,
.snap-mandatory {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure cursor pointer for navigation buttons */
[data-carousel-prev],
[data-carousel-next],
[data-carousel-indicator] {
  cursor: pointer;
}
/* app/assets/stylesheets/public_preview.css */

/**
 * Public Book Preview Styles
 *
 * CRITICAL: All interactive elements MUST have cursor: pointer
 * This includes:
 * - Chapter items in table of contents
 * - "Read more" links
 * - Review section links
 * - Call-to-action buttons
 * - Navigation links
 */

/* Table of Contents - Chapter Items */
.border-l-4.cursor-pointer {
  cursor: pointer;
}

.border-l-4.cursor-pointer:hover {
  transform: translateX(4px);
  transition: all 0.2s ease-in-out;
}

/* Review Summary Card - Enhanced styling */
.review-summary-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.dark .review-summary-card {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.review-summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhanced interactive elements - ensure cursor: pointer */
a[href].cursor-pointer,
button.cursor-pointer,
.cursor-pointer {
  cursor: pointer !important;
}

/* Chapter excerpts - prose styling */
.prose {
  line-height: 1.75;
}

.prose p {
  margin-bottom: 1em;
}

.dark .prose {
  color: #e5e7eb;
}

/* Gradient backgrounds for sections */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

/* Hero section animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.max-w-5xl > .bg-white:first-child {
  animation: fadeInUp 0.6s ease-out;
}

/* Table of contents items - interactive feedback */
nav[aria-label] .cursor-pointer {
  position: relative;
  overflow: hidden;
}

nav[aria-label] .cursor-pointer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(79, 70, 229, 0.05);
  transition: left 0.3s ease;
}

nav[aria-label] .cursor-pointer:hover::before {
  left: 0;
}

.dark nav[aria-label] .cursor-pointer::before {
  background: rgba(129, 140, 248, 0.1);
}

/* Chapter preview articles - enhanced spacing */
article[aria-labelledby] {
  scroll-margin-top: 2rem;
}

/* Review badge animation */
.inline-flex.items-center.gap-2.px-4.py-2 {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Call to action button - enhanced hover effect */
.transform.hover\:scale-105 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform.hover\:scale-105:hover {
  cursor: pointer;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  h3 {
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

/* Dark mode specific enhancements */
.dark {
  /* Ensure good contrast in dark mode */
  --tw-prose-body: #e5e7eb;
  --tw-prose-headings: #f9fafb;
  --tw-prose-links: #a78bfa;
  --tw-prose-bold: #f3f4f6;
  --tw-prose-quotes: #d1d5db;
}

/* Focus states for accessibility */
a:focus,
button:focus {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.dark a:focus,
.dark button:focus {
  outline-color: #818cf8;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Print styles */
@media print {
  .bg-gradient-to-br,
  .bg-gradient-to-r {
    background: white !important;
    color: black !important;
  }

  .shadow-xl,
  .shadow-2xl {
    box-shadow: none !important;
  }

  nav[aria-label] .cursor-pointer:hover::before {
    display: none;
  }
}
/* app/assets/stylesheets/application.css */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 * IMPORTANT: Order matters! Load files in the correct order:
 * 1. theme.css - theme variables and overrides (must be after Tailwind)
 * 2. button_theme.css - button styles
 * 3. cookie_consent.css - cookie banner styles
 * 4. book_wizard.css - wizard form styles
 * 5. book_characters.css - character styles
 * 6. autosave.css - autosave indicator styles
 */

/*












 */