:root {
  --primary-600: #3273dc; /* main brand */
  --primary-700: #2160c4; /* titles/strong accents */
  --primary-800: #375a7f; /* dark mode primary */
  --accent-400: #5c9ce6; /* hover/links */
  --warning-500: #ffdd57;
  /* Drawer colors */
  --drawer-bg-light: #ffffff;
  --drawer-bg-dark: #1f1f1f;
  --drawer-fg-light: #222222;
  --drawer-fg-dark: #eeeeee;
  --drawer-input-bg-light: #f0f0f0;
  --drawer-input-bg-dark: #2b2b2b;
}
/* default variables based on mode */
body { 
  --drawer-bg: var(--drawer-bg-light); 
  --drawer-fg: var(--drawer-fg-light);
  --drawer-input-bg: var(--drawer-input-bg-light);
}
body.is-dark { 
  --drawer-bg: var(--drawer-bg-dark); 
  --drawer-fg: var(--drawer-fg-dark);
  --drawer-input-bg: var(--drawer-input-bg-dark);
}

/* Global overrides to unify colors */
a,
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active {
  color: var(--primary-700);
}

a:hover {
  color: var(--accent-400);
}

.button.is-primary,
.is-primary.button {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
}

.button.is-primary:hover,
.is-primary.button:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
}

.title,
.section-title,
.novel-title {
  color: var(--primary-700);
}

/* Match homepage icon palette across all pages */
.navbar-item .icon.has-text-primary { color: hsl(171, 100%, 41%) !important; }
.navbar-item .icon.has-text-info { color: hsl(204, 86%, 53%) !important; }
.navbar-item .icon.has-text-warning { color: hsl(48, 100%, 67%) !important; }
.navbar-item .icon.has-text-danger { color: hsl(348, 100%, 61%) !important; }
.navbar-item .icon.has-text-success { color: hsl(141, 71%, 48%) !important; }
.navbar .icon:not(.has-text-primary):not(.has-text-danger):not(.has-text-info):not(.has-text-warning):not(.has-text-success) {
  
}
/* Let glyphs inherit color from their .icon wrapper */
.navbar .icon svg { fill: currentColor; }

/* Common components across pages */
.novel-info-box h1 { color: var(--primary-700); }
.chapter-index { background: var(--primary-600); color: #fff; }
.chapter-title-link { color: var(--primary-700); }
.chapter-title-link:hover { color: var(--primary-800); }

/* Mobile navbar drawer unify */
@media (max-width: 1024px) {
  .navbar-menu {
    display: none; /* Bulma toggles to block with is-active */
    background-color: var(--drawer-bg);
    color: var(--drawer-fg);
    padding: 1rem 1rem 2rem;
  }
  .navbar-menu.is-active {
    display: block;
  }
  .navbar-menu .navbar-item {
    align-items: center;
    gap: .75rem;
    font-size: 1.1rem;
    color: var(--drawer-fg);
  }
  .navbar-menu .navbar-item .icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }
  /* ensure all links/icons inside drawer use unified color (no blue) */
  .navbar-menu a,
  .navbar-menu a:hover,
  .navbar-menu a:active,
  .navbar-menu a:visited {
    color: var(--drawer-fg) !important;
  }
  /* Do NOT override explicit color helpers on icons */
  .navbar-menu .icon:not(.has-text-primary):not(.has-text-danger):not(.has-text-info):not(.has-text-warning):not(.has-text-success) {
    color: var(--drawer-fg) !important;
  }
  /* glyphs inherit from wrapper in drawer too */
  .navbar-menu .icon svg { fill: currentColor; }
  .navbar .close,
  .navbar .navbar-close,
  .navbar-menu .close,
  .navbar-menu .navbar-close {
    color: var(--drawer-fg) !important;
  }
  .navbar-menu .search-wrapper .input {
    border-radius: 999px;
    background-color: var(--drawer-input-bg);
    color: var(--drawer-fg);
    border: none;
  }
  .navbar-menu .search-wrapper .input::placeholder { color: rgba(127,127,127,.9); }
}

.tag.is-light {
  color: var(--primary-700);
}

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

body.is-dark a { color: #e4e4e4; transition: color 0.3s ease; }
body.is-dark input::placeholder { color: #e4e4e4; }
body.is-dark .navbar-menu { background-color: #1a1a1a; }
body.is-dark .button.is-primary { background-color: var(--primary-800); border-color: var(--primary-800); }
body.is-dark .card { background-color: #1e1e1e; color: #f5f5f5; }
body.is-dark .title, body.is-dark .subtitle { color: #f5f5f5; }
body.is-dark .completed { background-color: #ffdd57; color: #1a1a1a; }
body.is-dark .novel-card .subtitle { color: #d4d4d4; }
body.is-dark .card-footer-item { color: #e4e4e4; }
body.is-dark .section-title { color: #f5f5f5; }
body.is-dark .tabs a { color: #e4e4e4; }
body.is-dark .footer { background-color: #1a1a1a; color: #f5f5f5; border-top: 1px solid #2c2c2c; }
body.is-dark .footer a { color: #e4e4e4; }
body.is-dark .footer a:hover { color: #5c9ce6; }
body.is-dark .footer .title { color: #f5f5f5; }
body.is-dark .footer .input { background-color: #2a2a2a; border-color: #2c2c2c; color: #f5f5f5; }
body.is-dark .footer .input:focus { border-color: var(--primary-800); box-shadow: 0 0 0 0.125em rgba(55, 90, 127, 0.25); }
body.is-dark .search-wrapper .input { background-color: #2a2a2a; color: #f5f5f5; }
body.is-dark .search-wrapper .input:focus { background-color: #333; box-shadow: 0 0 0 2px rgba(92, 156, 230, 0.25); }
body.is-dark .search-wrapper .icon { color: #888; }
body.is-dark .navbar { background-color: #1a1a1a !important; border-bottom: 1px solid #2c2c2c; }
body.is-dark .navbar-item, body.is-dark .navbar-link { color: #f5f5f5 !important; }
body.is-dark .navbar-item:hover, body.is-dark .navbar-link:hover { background-color: #2a2a2a !important; color: #ffffff !important; }
body.is-dark .navbar-dropdown { background-color: #1a1a1a; border-top: 1px solid #333; }
body.is-dark .navbar-dropdown .navbar-item:hover { background-color: #2a2a2a; } 

/* Unify dark mode toggle icon color across all pages (desktop + mobile) */
.dark-mode-toggle,
.dark-mode-toggle i,
.mobile-dark-mode-toggle,
.mobile-dark-mode-toggle i {
  color: #fbbf24 !important; /* homepage yellow */
}

body.is-dark .dark-mode-toggle,
body.is-dark .dark-mode-toggle i,
body.is-dark .mobile-dark-mode-toggle,
body.is-dark .mobile-dark-mode-toggle i {
  color: #fbbf24 !important; /* keep same yellow in dark mode */
}