/* ================================================================
   Part 1: Color Palette
   Raw color values only. Never referenced directly in site-base.css.
   ================================================================ */
:root {
    /* ACS Blue scale (steel blue, academic) */
    --palette-acs-blue-800:  #0b3061;
    --palette-acs-blue-700:  #124077;
    --palette-acs-blue-600:  #1a5296;
    --palette-acs-blue-500:  #2869b4;
    --palette-acs-blue-400:  #5a91cc;
    --palette-acs-blue-200:  #9bbede;
    --palette-acs-blue-100:  #cddff2;

    /* RSC Teal scale (deep teal, academic) */
    --palette-rsc-teal-800:  #003d46;
    --palette-rsc-teal-700:  #005060;
    --palette-rsc-teal-600:  #006874;
    --palette-rsc-teal-500:  #008090;
    --palette-rsc-teal-400:  #2a9daa;
    --palette-rsc-teal-200:  #7ccad0;
    --palette-rsc-teal-100:  #bfe7eb;

    /* Elsevier Orange scale (warm amber, academic) */
    --palette-elsevier-orange-800:  #4d2400;
    --palette-elsevier-orange-700:  #7a3c00;
    --palette-elsevier-orange-600:  #a05000;
    --palette-elsevier-orange-500:  #e87722;
    --palette-elsevier-orange-400:  #f09650;
    --palette-elsevier-orange-200:  #f8c99a;
    --palette-elsevier-orange-100:  #fde8d0;

    /* Wiley Navy scale (deep navy, academic) */
    --palette-wiley-navy-800:  #001a3d;
    --palette-wiley-navy-700:  #002558;
    --palette-wiley-navy-600:  #003478;
    --palette-wiley-navy-500:  #004ba8;
    --palette-wiley-navy-400:  #4d80c0;
    --palette-wiley-navy-200:  #97b8de;
    --palette-wiley-navy-100:  #ccd9ef;

    /* Neutral scale (shared) */
    --palette-gray-950:  #0f172a;
    --palette-gray-900:  #111827;
    --palette-gray-850:  #1a2332;
    --palette-gray-800:  #1f2937;
    --palette-gray-750:  #273549;
    --palette-gray-700:  #374151;
    --palette-gray-600:  #4b5563;
    --palette-gray-500:  #6b7280;
    --palette-gray-400:  #9ca3af;
    --palette-gray-300:  #d1d5db;
    --palette-gray-200:  #e5e7eb;
    --palette-gray-100:  #f3f4f6;
    --palette-gray-050:  #f9fafb;
    --palette-white:     #ffffff;

    /* Accent — academic gold (shared) */
    --palette-amber-400: #c5922a;
    --palette-amber-500: #aa7b1e;

    /* Status (shared) */
    --palette-green-600: #16a34a;
    --palette-red-600:   #dc2626;
}


/* ================================================================
   Part 2: Layout Variables (brand/theme-independent)
   ================================================================ */
:root {
    --content-max-width:      1200px;
    --content-padding-x:      1.5rem;
    --content-padding-x-sm:   0.75rem;
}


/* ================================================================
   Part 3a: Semantic Variables — ACS Light (default)
   site-base.css uses ONLY semantic vars, never palette vars directly.
   ================================================================ */
:root {
    /* Site chrome */
    --header-bg:                var(--palette-acs-blue-600);
    --header-text:              var(--palette-white);
    --footer-bg:                var(--palette-acs-blue-600);
    --footer-text:              var(--palette-white);
    --footer-link:              var(--palette-acs-blue-100);

    /* Navigation */
    --nav-bg:                   var(--palette-white);
    --nav-border:               var(--palette-acs-blue-600);
    --nav-item-color:           var(--palette-acs-blue-600);
    --nav-item-border:          var(--palette-acs-blue-600);
    --nav-item-hover-bg:        var(--palette-acs-blue-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-acs-blue-700);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-white);
    --nav-mobile-link-color:    var(--palette-acs-blue-600);
    --nav-mobile-link-hover-bg: var(--palette-acs-blue-100);

    /* Page body */
    --body-bg:                  var(--palette-gray-200);
    --content-bg:               var(--palette-white);
    --content-shadow:           0 1px 4px rgba(0, 0, 0, 0.08);

    /* Typography */
    --text-primary:             var(--palette-gray-900);
    --text-secondary:           var(--palette-gray-600);
    --text-muted:               var(--palette-gray-500);
    --link-color:               var(--palette-acs-blue-600);
    --link-hover:               var(--palette-acs-blue-800);

    /* Headings */
    --heading-bg:               var(--palette-gray-100);
    --h1-border-color:          var(--palette-acs-blue-600);
    --h2-border-color:          var(--palette-acs-blue-600);
    --h3-border-color:          var(--palette-acs-blue-400);
    --h4-border-color:          var(--palette-acs-blue-600);
    --h5-border-color:          var(--palette-acs-blue-700);
    --h6-border-color:          var(--palette-amber-400);

    /* Components */
    --hr-primary:               var(--palette-acs-blue-600);
    --hr-light:                 var(--palette-gray-300);
    --toc-item-border:          var(--palette-acs-blue-600);
    --toc-item-color:           var(--palette-acs-blue-600);
    --toc-item-hover-bg:        var(--palette-acs-blue-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-400);
    --blockquote-bg:            var(--palette-gray-050);
    --blockquote-text:          var(--palette-gray-600);

    /* Home page */
    --home-icon-color:          var(--palette-acs-blue-600);
    --home-card-border:         var(--palette-acs-blue-600);
    --home-card-hover-bg:       var(--palette-acs-blue-600);
    --home-card-hover-color:    var(--palette-white);

    /* Brand/theme switcher buttons */
    --theme-btn-color:          var(--palette-white);
    --theme-btn-hover-bg:       rgba(255, 255, 255, 0.2);
    --theme-btn-active-bg:      rgba(255, 255, 255, 0.35);
    --theme-btn-active-color:   var(--palette-white);
}


/* ================================================================
   Part 3b: ACS Dark
   Applied when <html data-theme="dark"> (brand defaults to acs)
   ================================================================ */
[data-theme="dark"] {
    /* Site chrome */
    --header-bg:                var(--palette-acs-blue-700);
    --footer-bg:                var(--palette-acs-blue-700);
    --footer-link:              var(--palette-acs-blue-200);

    /* Navigation */
    --nav-bg:                   var(--palette-gray-850);
    --nav-border:               var(--palette-acs-blue-500);
    --nav-item-color:           var(--palette-acs-blue-400);
    --nav-item-border:          var(--palette-acs-blue-500);
    --nav-item-hover-bg:        var(--palette-acs-blue-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-acs-blue-500);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-gray-850);
    --nav-mobile-link-color:    var(--palette-acs-blue-400);
    --nav-mobile-link-hover-bg: var(--palette-gray-700);

    /* Page body */
    --body-bg:                  var(--palette-gray-900);
    --content-bg:               var(--palette-gray-800);
    --content-shadow:           0 1px 6px rgba(0, 0, 0, 0.4);

    /* Typography */
    --text-primary:             var(--palette-gray-100);
    --text-secondary:           var(--palette-gray-300);
    --text-muted:               var(--palette-gray-400);
    --link-color:               var(--palette-acs-blue-400);
    --link-hover:               var(--palette-acs-blue-200);

    /* Headings */
    --heading-bg:               var(--palette-gray-700);
    --h1-border-color:          var(--palette-acs-blue-400);
    --h2-border-color:          var(--palette-acs-blue-400);
    --h3-border-color:          var(--palette-acs-blue-400);
    --h4-border-color:          var(--palette-acs-blue-400);
    --h5-border-color:          var(--palette-acs-blue-500);
    --h6-border-color:          var(--palette-amber-500);

    /* Components */
    --hr-primary:               var(--palette-acs-blue-500);
    --hr-light:                 var(--palette-gray-600);
    --toc-item-border:          var(--palette-acs-blue-500);
    --toc-item-color:           var(--palette-acs-blue-400);
    --toc-item-hover-bg:        var(--palette-acs-blue-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-600);
    --blockquote-bg:            var(--palette-gray-750);
    --blockquote-text:          var(--palette-gray-300);

    /* Home page */
    --home-icon-color:          var(--palette-acs-blue-400);
    --home-card-border:         var(--palette-acs-blue-500);
    --home-card-hover-bg:       var(--palette-acs-blue-600);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3c: RSC Light
   Applied when <html data-brand="rsc">
   ================================================================ */
[data-brand="rsc"] {
    /* Site chrome */
    --header-bg:                var(--palette-rsc-teal-600);
    --footer-bg:                var(--palette-rsc-teal-600);
    --footer-link:              var(--palette-rsc-teal-100);

    /* Navigation */
    --nav-bg:                   var(--palette-white);
    --nav-border:               var(--palette-rsc-teal-600);
    --nav-item-color:           var(--palette-rsc-teal-600);
    --nav-item-border:          var(--palette-rsc-teal-600);
    --nav-item-hover-bg:        var(--palette-rsc-teal-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-rsc-teal-700);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-white);
    --nav-mobile-link-color:    var(--palette-rsc-teal-600);
    --nav-mobile-link-hover-bg: var(--palette-rsc-teal-100);

    /* Page body */
    --body-bg:                  var(--palette-gray-200);
    --content-bg:               var(--palette-white);
    --content-shadow:           0 1px 4px rgba(0, 0, 0, 0.08);

    /* Typography */
    --text-primary:             var(--palette-gray-900);
    --text-secondary:           var(--palette-gray-600);
    --text-muted:               var(--palette-gray-500);
    --link-color:               var(--palette-rsc-teal-600);
    --link-hover:               var(--palette-rsc-teal-800);

    /* Headings */
    --heading-bg:               var(--palette-gray-100);
    --h1-border-color:          var(--palette-rsc-teal-600);
    --h2-border-color:          var(--palette-rsc-teal-600);
    --h3-border-color:          var(--palette-rsc-teal-400);
    --h4-border-color:          var(--palette-rsc-teal-600);
    --h5-border-color:          var(--palette-rsc-teal-700);
    --h6-border-color:          var(--palette-amber-400);

    /* Components */
    --hr-primary:               var(--palette-rsc-teal-600);
    --hr-light:                 var(--palette-gray-300);
    --toc-item-border:          var(--palette-rsc-teal-600);
    --toc-item-color:           var(--palette-rsc-teal-600);
    --toc-item-hover-bg:        var(--palette-rsc-teal-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-400);
    --blockquote-bg:            var(--palette-gray-050);
    --blockquote-text:          var(--palette-gray-600);

    /* Home page */
    --home-icon-color:          var(--palette-rsc-teal-600);
    --home-card-border:         var(--palette-rsc-teal-600);
    --home-card-hover-bg:       var(--palette-rsc-teal-600);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3d: RSC Dark
   Applied when <html data-brand="rsc" data-theme="dark">
   ================================================================ */
[data-brand="rsc"][data-theme="dark"] {
    /* Site chrome */
    --header-bg:                var(--palette-rsc-teal-700);
    --footer-bg:                var(--palette-rsc-teal-700);
    --footer-link:              var(--palette-rsc-teal-200);

    /* Navigation */
    --nav-bg:                   var(--palette-gray-850);
    --nav-border:               var(--palette-rsc-teal-500);
    --nav-item-color:           var(--palette-rsc-teal-400);
    --nav-item-border:          var(--palette-rsc-teal-500);
    --nav-item-hover-bg:        var(--palette-rsc-teal-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-rsc-teal-500);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-gray-850);
    --nav-mobile-link-color:    var(--palette-rsc-teal-400);
    --nav-mobile-link-hover-bg: var(--palette-gray-700);

    /* Page body */
    --body-bg:                  var(--palette-gray-900);
    --content-bg:               var(--palette-gray-800);
    --content-shadow:           0 1px 6px rgba(0, 0, 0, 0.4);

    /* Typography */
    --text-primary:             var(--palette-gray-100);
    --text-secondary:           var(--palette-gray-300);
    --text-muted:               var(--palette-gray-400);
    --link-color:               var(--palette-rsc-teal-400);
    --link-hover:               var(--palette-rsc-teal-200);

    /* Headings */
    --heading-bg:               var(--palette-gray-700);
    --h1-border-color:          var(--palette-rsc-teal-400);
    --h2-border-color:          var(--palette-rsc-teal-400);
    --h3-border-color:          var(--palette-rsc-teal-400);
    --h4-border-color:          var(--palette-rsc-teal-400);
    --h5-border-color:          var(--palette-rsc-teal-500);
    --h6-border-color:          var(--palette-amber-500);

    /* Components */
    --hr-primary:               var(--palette-rsc-teal-500);
    --hr-light:                 var(--palette-gray-600);
    --toc-item-border:          var(--palette-rsc-teal-500);
    --toc-item-color:           var(--palette-rsc-teal-400);
    --toc-item-hover-bg:        var(--palette-rsc-teal-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-600);
    --blockquote-bg:            var(--palette-gray-750);
    --blockquote-text:          var(--palette-gray-300);

    /* Home page */
    --home-icon-color:          var(--palette-rsc-teal-400);
    --home-card-border:         var(--palette-rsc-teal-500);
    --home-card-hover-bg:       var(--palette-rsc-teal-600);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3e: Elsevier Light
   Applied when <html data-brand="elsevier">
   ================================================================ */
[data-brand="elsevier"] {
    /* Site chrome */
    --header-bg:                var(--palette-elsevier-orange-500);
    --footer-bg:                var(--palette-elsevier-orange-500);
    --footer-link:              var(--palette-elsevier-orange-100);

    /* Navigation */
    --nav-bg:                   var(--palette-white);
    --nav-border:               var(--palette-elsevier-orange-500);
    --nav-item-color:           var(--palette-elsevier-orange-600);
    --nav-item-border:          var(--palette-elsevier-orange-500);
    --nav-item-hover-bg:        var(--palette-elsevier-orange-500);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-elsevier-orange-600);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-white);
    --nav-mobile-link-color:    var(--palette-elsevier-orange-600);
    --nav-mobile-link-hover-bg: var(--palette-elsevier-orange-100);

    /* Page body */
    --body-bg:                  var(--palette-gray-200);
    --content-bg:               var(--palette-white);
    --content-shadow:           0 1px 4px rgba(0, 0, 0, 0.08);

    /* Typography */
    --text-primary:             var(--palette-gray-900);
    --text-secondary:           var(--palette-gray-600);
    --text-muted:               var(--palette-gray-500);
    --link-color:               var(--palette-elsevier-orange-600);
    --link-hover:               var(--palette-elsevier-orange-800);

    /* Headings */
    --heading-bg:               var(--palette-gray-100);
    --h1-border-color:          var(--palette-elsevier-orange-500);
    --h2-border-color:          var(--palette-elsevier-orange-500);
    --h3-border-color:          var(--palette-elsevier-orange-400);
    --h4-border-color:          var(--palette-elsevier-orange-500);
    --h5-border-color:          var(--palette-elsevier-orange-600);
    --h6-border-color:          var(--palette-amber-400);

    /* Components */
    --hr-primary:               var(--palette-elsevier-orange-500);
    --hr-light:                 var(--palette-gray-300);
    --toc-item-border:          var(--palette-elsevier-orange-500);
    --toc-item-color:           var(--palette-elsevier-orange-600);
    --toc-item-hover-bg:        var(--palette-elsevier-orange-500);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-400);
    --blockquote-bg:            var(--palette-gray-050);
    --blockquote-text:          var(--palette-gray-600);

    /* Home page */
    --home-icon-color:          var(--palette-elsevier-orange-500);
    --home-card-border:         var(--palette-elsevier-orange-500);
    --home-card-hover-bg:       var(--palette-elsevier-orange-500);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3f: Elsevier Dark
   Applied when <html data-brand="elsevier" data-theme="dark">
   ================================================================ */
[data-brand="elsevier"][data-theme="dark"] {
    /* Site chrome */
    --header-bg:                var(--palette-elsevier-orange-600);
    --footer-bg:                var(--palette-elsevier-orange-600);
    --footer-link:              var(--palette-elsevier-orange-200);

    /* Navigation */
    --nav-bg:                   var(--palette-gray-850);
    --nav-border:               var(--palette-elsevier-orange-500);
    --nav-item-color:           var(--palette-elsevier-orange-400);
    --nav-item-border:          var(--palette-elsevier-orange-500);
    --nav-item-hover-bg:        var(--palette-elsevier-orange-500);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-elsevier-orange-600);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-gray-850);
    --nav-mobile-link-color:    var(--palette-elsevier-orange-400);
    --nav-mobile-link-hover-bg: var(--palette-gray-700);

    /* Page body */
    --body-bg:                  var(--palette-gray-900);
    --content-bg:               var(--palette-gray-800);
    --content-shadow:           0 1px 6px rgba(0, 0, 0, 0.4);

    /* Typography */
    --text-primary:             var(--palette-gray-100);
    --text-secondary:           var(--palette-gray-300);
    --text-muted:               var(--palette-gray-400);
    --link-color:               var(--palette-elsevier-orange-400);
    --link-hover:               var(--palette-elsevier-orange-200);

    /* Headings */
    --heading-bg:               var(--palette-gray-700);
    --h1-border-color:          var(--palette-elsevier-orange-400);
    --h2-border-color:          var(--palette-elsevier-orange-400);
    --h3-border-color:          var(--palette-elsevier-orange-400);
    --h4-border-color:          var(--palette-elsevier-orange-400);
    --h5-border-color:          var(--palette-elsevier-orange-500);
    --h6-border-color:          var(--palette-amber-500);

    /* Components */
    --hr-primary:               var(--palette-elsevier-orange-500);
    --hr-light:                 var(--palette-gray-600);
    --toc-item-border:          var(--palette-elsevier-orange-500);
    --toc-item-color:           var(--palette-elsevier-orange-400);
    --toc-item-hover-bg:        var(--palette-elsevier-orange-500);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-600);
    --blockquote-bg:            var(--palette-gray-750);
    --blockquote-text:          var(--palette-gray-300);

    /* Home page */
    --home-icon-color:          var(--palette-elsevier-orange-400);
    --home-card-border:         var(--palette-elsevier-orange-500);
    --home-card-hover-bg:       var(--palette-elsevier-orange-500);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3g: Wiley Light
   Applied when <html data-brand="wiley">
   ================================================================ */
[data-brand="wiley"] {
    /* Site chrome */
    --header-bg:                var(--palette-wiley-navy-600);
    --footer-bg:                var(--palette-wiley-navy-600);
    --footer-link:              var(--palette-wiley-navy-100);

    /* Navigation */
    --nav-bg:                   var(--palette-white);
    --nav-border:               var(--palette-wiley-navy-600);
    --nav-item-color:           var(--palette-wiley-navy-600);
    --nav-item-border:          var(--palette-wiley-navy-600);
    --nav-item-hover-bg:        var(--palette-wiley-navy-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-wiley-navy-700);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-white);
    --nav-mobile-link-color:    var(--palette-wiley-navy-600);
    --nav-mobile-link-hover-bg: var(--palette-wiley-navy-100);

    /* Page body */
    --body-bg:                  var(--palette-gray-200);
    --content-bg:               var(--palette-white);
    --content-shadow:           0 1px 4px rgba(0, 0, 0, 0.08);

    /* Typography */
    --text-primary:             var(--palette-gray-900);
    --text-secondary:           var(--palette-gray-600);
    --text-muted:               var(--palette-gray-500);
    --link-color:               var(--palette-wiley-navy-600);
    --link-hover:               var(--palette-wiley-navy-800);

    /* Headings */
    --heading-bg:               var(--palette-gray-100);
    --h1-border-color:          var(--palette-wiley-navy-600);
    --h2-border-color:          var(--palette-wiley-navy-600);
    --h3-border-color:          var(--palette-wiley-navy-400);
    --h4-border-color:          var(--palette-wiley-navy-600);
    --h5-border-color:          var(--palette-wiley-navy-700);
    --h6-border-color:          var(--palette-amber-400);

    /* Components */
    --hr-primary:               var(--palette-wiley-navy-600);
    --hr-light:                 var(--palette-gray-300);
    --toc-item-border:          var(--palette-wiley-navy-600);
    --toc-item-color:           var(--palette-wiley-navy-600);
    --toc-item-hover-bg:        var(--palette-wiley-navy-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-400);
    --blockquote-bg:            var(--palette-gray-050);
    --blockquote-text:          var(--palette-gray-600);

    /* Home page */
    --home-icon-color:          var(--palette-wiley-navy-600);
    --home-card-border:         var(--palette-wiley-navy-600);
    --home-card-hover-bg:       var(--palette-wiley-navy-600);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3h: Wiley Dark
   Applied when <html data-brand="wiley" data-theme="dark">
   ================================================================ */
[data-brand="wiley"][data-theme="dark"] {
    /* Site chrome */
    --header-bg:                var(--palette-wiley-navy-700);
    --footer-bg:                var(--palette-wiley-navy-700);
    --footer-link:              var(--palette-wiley-navy-200);

    /* Navigation */
    --nav-bg:                   var(--palette-gray-850);
    --nav-border:               var(--palette-wiley-navy-500);
    --nav-item-color:           var(--palette-wiley-navy-400);
    --nav-item-border:          var(--palette-wiley-navy-500);
    --nav-item-hover-bg:        var(--palette-wiley-navy-600);
    --nav-item-hover-color:     var(--palette-white);
    --nav-item-active-bg:       var(--palette-wiley-navy-500);
    --nav-item-active-color:    var(--palette-white);
    --nav-mobile-bg:            var(--palette-gray-850);
    --nav-mobile-link-color:    var(--palette-wiley-navy-400);
    --nav-mobile-link-hover-bg: var(--palette-gray-700);

    /* Page body */
    --body-bg:                  var(--palette-gray-900);
    --content-bg:               var(--palette-gray-800);
    --content-shadow:           0 1px 6px rgba(0, 0, 0, 0.4);

    /* Typography */
    --text-primary:             var(--palette-gray-100);
    --text-secondary:           var(--palette-gray-300);
    --text-muted:               var(--palette-gray-400);
    --link-color:               var(--palette-wiley-navy-400);
    --link-hover:               var(--palette-wiley-navy-200);

    /* Headings */
    --heading-bg:               var(--palette-gray-700);
    --h1-border-color:          var(--palette-wiley-navy-400);
    --h2-border-color:          var(--palette-wiley-navy-400);
    --h3-border-color:          var(--palette-wiley-navy-400);
    --h4-border-color:          var(--palette-wiley-navy-400);
    --h5-border-color:          var(--palette-wiley-navy-500);
    --h6-border-color:          var(--palette-amber-500);

    /* Components */
    --hr-primary:               var(--palette-wiley-navy-500);
    --hr-light:                 var(--palette-gray-600);
    --toc-item-border:          var(--palette-wiley-navy-500);
    --toc-item-color:           var(--palette-wiley-navy-400);
    --toc-item-hover-bg:        var(--palette-wiley-navy-600);
    --toc-item-hover-color:     var(--palette-white);
    --blockquote-border:        var(--palette-gray-600);
    --blockquote-bg:            var(--palette-gray-750);
    --blockquote-text:          var(--palette-gray-300);

    /* Home page */
    --home-icon-color:          var(--palette-wiley-navy-400);
    --home-card-border:         var(--palette-wiley-navy-500);
    --home-card-hover-bg:       var(--palette-wiley-navy-600);
    --home-card-hover-color:    var(--palette-white);
}


/* ================================================================
   Part 3i: Mourning (致哀灰)
   Applied when <html data-brand="mourning">
   Full-page grayscale via CSS filter. Fixed light mode, no switcher.
   ================================================================ */
[data-brand="mourning"] {
    filter: grayscale(100%);
}