/* ==========================================================================
   CSS Custom Properties & Variables
   ========================================================================== */

:root {
  --gradient-light-depth: linear-gradient(180deg, #FFFDF5 0%, #FAFAFA 100%);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #F9F9FB;
  /* Light mode default */
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
}

.dark body {
  background-color: #121212;
  /* Dark mode background */
}

/* ==========================================================================
   Component Styles
   ========================================================================== */

/* Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* LiquidGlass Effect - Optimized for mobile */
.liquidGlass-wrapper {
  position: relative;
  display: flex;
  font-weight: 600;
  overflow: hidden;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquidGlass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
    backdrop-filter: blur(3px);
}

.liquidGlass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.10);
  /* Light mode tint */
  pointer-events: none;
}

.dark .liquidGlass-tint {
  background: rgba(30, 30, 30, 0.10);
  /* Dark mode tint */
}

.liquidGlass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
  /* Light mode shine */
  pointer-events: none;
}

.dark .liquidGlass-shine {
  box-shadow: inset 2px 2px 1px 0 rgba(60, 60, 60, 0.5),
    inset -1px -1px 1px 1px rgba(60, 60, 60, 0.5);
  /* Dark mode shine */
}

.liquidGlass-text {
  z-index: 3;
  width: 100%;
}

/* Header Styles */
header {
  position: relative;
}

/* Mobile Touch Optimizations */
button,
a,
.book-link,
.cursor-pointer {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button {
  min-height: 44px;
  min-width: 44px;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {

  button,
  a,
  .book-link {
    min-height: 40px;
    min-width: 40px;
  }

  /* Better touch feedback */
  .book-card,
  .path-book-card {
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
  }

  .book-card:active,
  .path-book-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
}

/* Interactive Elements */
.book-card,
.path-book-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Book Card Hover Effect */
.book-card {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s;
}

.book-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Progress Bar */
.finished-progress {
  background-color: #22c55e;
}

/* Book Chapter Styling */
span:has(.book-chapter-label),
.book-chapter-label {
  text-align: center;
  line-height: 1.2;
  color: #1C1C1E;
  /* Light mode text */
}

.dark span:has(.book-chapter-label),
.dark .book-chapter-label {
  color: #E0E0E0;
  /* Dark mode text */
}

.dark .text-text-primary {
  color: var(--tw-colors-dark-text-primary);
  /* Ensure primary text is light in dark mode */
}

.chapter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6E6E73;
  /* Light mode text */
}

.dark .chapter-label {
  color: #A0A0A0;
  /* Dark mode text */
}

/* Swipe Animations */
@keyframes swipe-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-20%);
    opacity: 0;
  }
}

@keyframes swipe-out-right {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(20%);
    opacity: 0;
  }
}

@keyframes swipe-in-left {
  from {
    transform: translateX(20%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes swipe-in-right {
  from {
    transform: translateX(-20%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.swipe-out-left {
  animation: swipe-out-left 0.2s ease-out forwards;
}

.swipe-out-right {
  animation: swipe-out-right 0.2s ease-out forwards;
}

.swipe-in-left {
  animation: swipe-in-left 0.2s ease-out forwards;
}

.swipe-in-right {
  animation: swipe-in-right 0.2s ease-out forwards;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Loading Overlay */
#loading-overlay {
  display: none;
}

/* Pure JS View Transitions - Removed for instant switching */
/*
.view-main.transition-out {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.view-reading.transition-in {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.view-main.transition-in {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.view-reading.transition-out {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

.view-path.transition-in {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.view-path.transition-out {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
*/

/* Path Book Card Styles */
.path-book-card.uncompleted {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.path-book-card.completed {
  opacity: 1;
  filter: grayscale(0%);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
  /* Subtle gold glow */
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.path-book-card.completed:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
}