/* Base variables (light) */
:root {
    --slh-bg: #ffffff;
    --slh-text: #1a1f2b;
    --slh-muted: #6c757d;
    --slh-border: #e5e7eb;

    --slh-surface: #ffffff;
    --slh-surface-alt: #f8f9fa;

    --slh-primary: #0d6efd;
    --slh-primary-contrast: #ffffff;

    --slh-orange: #ff7a00; /* your accent */
    --slh-link: #0d6efd;

    --slh-nav-bg: #f0f6ff;       /* left nav bg (light) */
    --slh-nav-text: #0b2447;
    --slh-nav-border: #e3e7ef;

    --slh-card-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
  }

  /* Dark overrides */
  body.theme-dark {
    --slh-bg: #12171f;
    --slh-text: #e6e8ee;
    --slh-muted: #a7b0bd;
    --slh-border: #2a3140;

    --slh-surface: #1a2230;
    --slh-surface-alt: #151b26;

    --slh-primary: #69a6ff;      /* boosted primary for dark */
    --slh-primary-contrast: #0b1220;

    --slh-orange: #ffa054;
    --slh-link: #8fb7ff;

    --slh-nav-bg: #0f1622;       /* left nav bg (dark) */
    --slh-nav-text: #e6e8ee;
    --slh-nav-border: #273044;

    --slh-card-shadow: 0 0.35rem 1rem rgba(0,0,0,0.35);
  }

  /* Global application */
  body {
    background: var(--slh-bg);
    color: var(--slh-text);
  }

  /* Text general */
  .text-muted { color: var(--slh-muted) !important; }
  a { color: var(--slh-link); }
  a:hover, a:focus { color: var(--slh-link); filter: brightness(1.15); }

  /* Borders */
  hr, .border, .border-top, .border-bottom, .border-orange { border-color: var(--slh-border) !important; }

  /* Cards & surfaces (exclude section guide cards which have bespoke palette) */
  body.theme-dark .card:not(.section-card) {
    background: var(--slh-surface);
    box-shadow: var(--slh-card-shadow);
    border-color: var(--slh-border);
  }
  body.theme-dark .card:not(.section-card) .card-body { color: var(--slh-text); }

  /* Page header row */
  .page-header { border-bottom: 1px solid var(--slh-border); }
  .page-title { color: var(--slh-text); }

  /* Buttons (primary + your orange accent) */
  .btn-primary {
    background: var(--slh-primary);
    border-color: var(--slh-primary);
    color: var(--slh-primary-contrast);
  }
  .btn-primary:hover { filter: brightness(1.05); }

  .btn-outline-primary {
    color: var(--slh-primary);
    border-color: var(--slh-primary);
  }
  .btn-outline-primary:hover {
    background: var(--slh-primary);
    color: var(--slh-primary-contrast);
  }

  .btn-orange {
    background: var(--slh-orange);
    border-color: var(--slh-orange);
    color: #fff;
  }
  .btn-orange:hover { filter: brightness(1.05); }

  /* Left sidebar */
  .sidebar-nav .nav-section {
    background: var(--slh-nav-bg);   /* keep background block visible */
    border-right: 1px solid var(--slh-nav-border);
    color: var(--slh-nav-text);
  }
  .guidelines-nav .nav-link {
    color: var(--slh-nav-text);
  }
  .guidelines-nav .nav-item.border-bottom {
    border-bottom-color: var(--slh-nav-border) !important;
  }

  /* Search overlay colors */
  .slh-search-dialog { background: var(--slh-primary); }
  .slh-search-header { background: color-mix(in srgb, var(--slh-primary) 85%, #000 15%); }
  #slh-search-input {
    background: var(--slh-surface);
    color: var(--slh-text);
  }
  .slh-search-backdrop { background: rgba(5, 10, 20, 0.7); }

  /* Book traversal links area */
  .book-traversal { border-top: 1px solid var(--slh-border); }
  .book-traversal__list a { color: var(--slh-link); }

  /* Floating infinite hint arrow */
  .infinite-hint {
    background: var(--slh-primary);
    color: var(--slh-primary-contrast);
  }

  /* Header bar tweaks (icons/text stay readable) */
  .site-header { background: var(--slh-surface-alt); }

  /* Utility to ensure icons in toggle are visible */
  .theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
  }

  .js-theme-toggle {
    line-height: 1;
  }

  body.theme-dark .js-theme-toggle.btn-outline-primary {
    color: var(--slh-primary);
    border-color: var(--slh-primary);
    background: transparent;
  }

  body.theme-dark .js-theme-toggle.btn-outline-primary:hover {
    color: var(--slh-primary-contrast);
    background: var(--slh-primary);
  }

  /* Optional: nice transition when switching */
  * {
    transition: background-color .15s linear, color .15s linear, border-color .15s linear;
  }