:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-charcoal-800);
  --color-text-muted: rgba(108, 117, 125, 1);
  --color-text-secondary: var(--color-slate-500);
  --color-border: rgba(222, 226, 230, 1);
  --color-primary: rgba(13, 110, 253, 1);
  --color-primary-rgb: 13, 110, 253;
  --color-secondary: var(--color-slate-500);
  --color-success: rgba(25, 135, 84, 1);
  --color-warning: rgba(255, 193, 7, 1);
  --color-danger: var(--color-red-500);
  --color-info: var(--color-teal-500);
  --color-light: var(--color-gray-200);
  --color-dark: var(--color-charcoal-700);

  /* Card and component colors */
  --color-card-bg: var(--color-surface);
  --color-card-border: var(--color-border);
  --color-hover: rgba(0, 0, 0, 0.05);
  --color-active: rgba(13, 110, 253, 0.1);

  /* Story specific colors */
  --color-story-nav-bg: var(--color-surface);
  --color-story-content-bg: var(--color-surface);
  --color-story-title: var(--color-primary);

  /* Genre badge colors (Light mode) */
  --genre-drama-bg: rgba(147, 51, 234, 0.1);
  --genre-drama-text: rgba(147, 51, 234, 1);
  --genre-romance-bg: rgba(236, 72, 153, 0.1);
  --genre-romance-text: rgba(236, 72, 153, 1);
  --genre-mystery-bg: rgba(31, 41, 55, 0.1);
  --genre-mystery-text: rgba(31, 41, 55, 1);
  --genre-sci-fi-bg: rgba(6, 182, 212, 0.1);
  --genre-sci-fi-text: rgba(6, 182, 212, 1);
  --genre-fantasy-bg: rgba(34, 197, 94, 0.1);
  --genre-fantasy-text: rgba(34, 197, 94, 1);
  --genre-horror-bg: rgba(239, 68, 68, 0.1);
  --genre-horror-text: rgba(239, 68, 68, 1);
  --genre-thriller-bg: rgba(249, 115, 22, 0.1);
  --genre-thriller-text: rgba(249, 115, 22, 1);
  --genre-fiction-bg: rgba(59, 130, 246, 0.1);
  --genre-fiction-text: rgba(59, 130, 246, 1);
}

/* Dark theme overrides */
.dark-theme {
  --color-background: rgba(17, 24, 39, 1);
  --color-surface: rgba(31, 41, 55, 1);
  --color-text: rgba(243, 244, 246, 1);
  --color-text-muted: rgba(156, 163, 175, 1);
  --color-text-secondary: rgba(209, 213, 219, 1);
  --color-border: rgba(55, 65, 81, 1);
  --color-primary: rgba(59, 130, 246, 1);
  --color-secondary: rgba(156, 163, 175, 1);
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-active: rgba(59, 130, 246, 0.1);

  --color-card-bg: rgba(31, 41, 55, 1);
  --color-card-border: rgba(55, 65, 81, 1);
  
  --color-story-nav-bg: rgba(31, 41, 55, 1);
  --color-story-content-bg: rgba(31, 41, 55, 1);
  --color-story-title: rgba(59, 130, 246, 1);

  /* Genre badge colors (Dark mode) */
  --genre-drama-bg: rgba(147, 51, 234, 0.2);
  --genre-drama-text: rgba(196, 181, 253, 1);
  --genre-romance-bg: rgba(236, 72, 153, 0.2);
  --genre-romance-text: rgba(251, 207, 232, 1);
  --genre-mystery-bg: rgba(75, 85, 99, 0.3);
  --genre-mystery-text: rgba(209, 213, 219, 1);
  --genre-sci-fi-bg: rgba(6, 182, 212, 0.2);
  --genre-sci-fi-text: rgba(165, 243, 252, 1);
  --genre-fantasy-bg: rgba(34, 197, 94, 0.2);
  --genre-fantasy-text: rgba(187, 247, 208, 1);
  --genre-horror-bg: rgba(239, 68, 68, 0.2);
  --genre-horror-text: rgba(254, 202, 202, 1);
  --genre-thriller-bg: rgba(249, 115, 22, 0.2);
  --genre-thriller-text: rgba(254, 215, 170, 1);
  --genre-fiction-bg: rgba(59, 130, 246, 0.2);
  --genre-fiction-text: rgba(191, 219, 254, 1);
}

/* Global Styles */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--color-background);
  color: var(--color-text);
  transition: all 0.3s ease;
  -webkit-overflow-scrolling: touch;
}

/* Typography */
.site-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.5rem;
  color: var(--color-text);
  margin: 0;
}

@media (max-width: 768px) {
  .site-title {
    font-size: 2rem;
  }
}

.site-subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--color-text-muted) !important;
}

.site-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Theme Toggle */
#theme-toggle {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#theme-toggle:hover {
  background-color: var(--color-hover);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

#theme-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

#theme-icon {
  font-size: 1.2rem;
  color: var(--color-text);
  transition: all 0.3s ease;
}

.dark-theme #theme-icon {
  color: #ffc107;
}

body:not(.dark-theme) #theme-icon {
  color: #0d6efd;
}

/* Navigation */
.navbar-nav .nav-link {
  color: var(--color-text);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  background-color: var(--color-active);
  color: var(--color-primary);
}

/* Cards */
.card {
  background-color: var(--color-card-bg);
  border-color: var(--color-card-border);
  border-radius: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Story Navigation */
.story-nav-card {
  height: fit-content;
  position: sticky;
  top: 20px;
}

.story-nav-item {
  padding: 1rem;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
  border: 1px solid transparent;
  background-color: var(--color-card-bg);
  pointer-events: auto;
  touch-action: manipulation;
}

.story-nav-item:hover {
  background-color: var(--color-hover);
  border-color: var(--color-border);
  transform: translateX(4px);
}

.story-nav-item.active {
  background-color: var(--color-active);
  border-color: var(--color-primary);
}

.story-title {
  color: var(--color-story-title) !important;
  font-weight: 600;
  line-height: 1.4;
}

/* Story Content */
#story-content {
  background-color: var(--color-story-content-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 1rem;
  min-height: 600px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 2rem;
}

#story-content h1 {
  font-family: 'Playfair Display', serif;
  color: var(--color-text);
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

#story-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

#story-content em {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* Fix mobile scroll issues */
@media (max-width: 768px) {
  #story-content {
    max-height: none;
    overflow-y: visible;
    padding: 1.5rem;
  }
  
  .story-nav-card {
    position: relative;
    top: auto;
  }
}

/* Story Meta */
.story-content-meta {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

/* Genre Badges */
.genre-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.genre-drama {
  background-color: var(--genre-drama-bg);
  color: var(--genre-drama-text);
}

.genre-romance {
  background-color: var(--genre-romance-bg);
  color: var(--genre-romance-text);
}

.genre-mystery {
  background-color: var(--genre-mystery-bg);
  color: var(--genre-mystery-text);
}

.genre-sci-fi {
  background-color: var(--genre-sci-fi-bg);
  color: var(--genre-sci-fi-text);
}

.genre-fantasy {
  background-color: var(--genre-fantasy-bg);
  color: var(--genre-fantasy-text);
}

.genre-horror {
  background-color: var(--genre-horror-bg);
  color: var(--genre-horror-text);
}

.genre-thriller {
  background-color: var(--genre-thriller-bg);
  color: var(--genre-thriller-text);
}

.genre-fiction {
  background-color: var(--genre-fiction-bg);
  color: var(--genre-fiction-text);
}

/* Search and Filters */
.form-control {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-control:focus {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-text);
  box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.form-select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.form-select:focus {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-text);
}

/* Loading Spinner */
.spinner-border {
  color: var(--color-primary);
}

/* Contact Page */
#contact-content {
  display: none;
}

.contact-card {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-card-bg) 100%);
  border: 1px solid var(--color-card-border);
  border-radius: 1rem;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
  font-family: 'Playfair Display', serif;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.contact-links a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.contact-links a:hover {
  text-decoration: underline;
}

/* Footer */
footer {
  background-color: var(--color-card-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 2rem 0;
  margin-top: 3rem;
}

.dark-theme footer {
  background-color: rgba(17, 24, 39, 1);
}

footer a {
  color: var(--color-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Text Utilities */
.text-muted {
  color: var(--color-text-muted) !important;
}

.text-primary {
  color: var(--color-primary) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .site-title {
    font-size: 2rem;
  }
  
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #story-content h1 {
    font-size: 2rem;
  }
  
  #story-content p {
    font-size: 1rem;
  }
}


/* Smooth Transitions */
* {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}