/**
 * Handbook link colors — loaded AFTER globals.css so cascade wins.
 *
 * Why this file exists:
 * - body uses text-[var(--wh-text)]; inline-flex <Link>s skip globals `a { color: burnt-rose }`
 *   and inherit cream text in dark mode → looks white on pale peach tints.
 * - Tailwind @layer utilities can emit after unlayered chunks; html/body/#id bumps specificity.
 * - globals.css uses unlayered `a:not([class*="inline-flex"]):hover { color: #B56B6F }` which
 *   beats @layer utilities hover:text-* (higher specificity than `.hover\:…:hover`). Revert so
 *   handbook links keep their Tailwind hover colors.
 */

/*
 * Text selection — full handbook subtree (not only links). Browser default (blue/white)
 * clashes with the warm palette; dark mode had no rule and fell back to system blue.
 * Badge/callout lines below restore solid fills + white text (same intent as globals.css).
 */
html:not(.dark) body #wh-handbook-root *::-moz-selection {
  background-color: rgba(218, 124, 71, 0.38);
  color: #4b2e2a;
}
html:not(.dark) body #wh-handbook-root *::selection {
  background-color: rgba(218, 124, 71, 0.38);
  color: #4b2e2a;
}

html.dark body #wh-handbook-root *::-moz-selection, html[data-theme="dark"] body #wh-handbook-root *::-moz-selection {
  background-color: rgba(218, 124, 71, 0.42);
  color: #f3e6d6;
}

html.dark body #wh-handbook-root *::selection,
html[data-theme="dark"] body #wh-handbook-root *::selection {
  background-color: rgba(218, 124, 71, 0.42);
  color: #f3e6d6;
}

/* Dual [class*="…"] matches tinted badges without `/` in one attribute (cssnano-safe). */
html:not(.dark) body #wh-handbook-root [class*="bg-burnt-rose"][class*="text-burnt-rose"]::-moz-selection, html:not(.dark) body #wh-handbook-root [class*="bg-burnt-rose"][class*="text-burnt-rose"] *::-moz-selection {
  background-color: var(--wh-burnt-rose);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-burnt-rose"][class*="text-burnt-rose"]::selection,
html:not(.dark) body #wh-handbook-root [class*="bg-burnt-rose"][class*="text-burnt-rose"] *::selection {
  background-color: var(--wh-burnt-rose);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-harvest-orange"][class*="text-harvest-orange"]::-moz-selection, html:not(.dark) body #wh-handbook-root [class*="bg-harvest-orange"][class*="text-harvest-orange"] *::-moz-selection {
  background-color: var(--wh-harvest-orange);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-harvest-orange"][class*="text-harvest-orange"]::selection,
html:not(.dark) body #wh-handbook-root [class*="bg-harvest-orange"][class*="text-harvest-orange"] *::selection {
  background-color: var(--wh-harvest-orange);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-moss-sage"][class*="text-moss-sage"]::-moz-selection, html:not(.dark) body #wh-handbook-root [class*="bg-moss-sage"][class*="text-moss-sage"] *::-moz-selection {
  background-color: var(--wh-moss-sage);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-moss-sage"][class*="text-moss-sage"]::selection,
html:not(.dark) body #wh-handbook-root [class*="bg-moss-sage"][class*="text-moss-sage"] *::selection {
  background-color: var(--wh-moss-sage);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-saffron-dust"][class*="text-saffron-dust"]::-moz-selection, html:not(.dark) body #wh-handbook-root [class*="bg-saffron-dust"][class*="text-saffron-dust"] *::-moz-selection {
  background-color: var(--wh-saffron-dust);
  color: white;
}
html:not(.dark) body #wh-handbook-root [class*="bg-saffron-dust"][class*="text-saffron-dust"]::selection,
html:not(.dark) body #wh-handbook-root [class*="bg-saffron-dust"][class*="text-saffron-dust"] *::selection {
  background-color: var(--wh-saffron-dust);
  color: white;
}

/**
 * Branded handbook links: global unlayered `a { color: burnt rose }` + UA :link/:visited
 * can yield blue/purple or hide Tailwind text-* on inline links. #wh-handbook-root beats
 * the global anchor rule; :link/:visited cover visited + unvisited. No !important — hover
 * still uses `a:hover { color: revert-layer }` below so `hover:text-*` utilities work.
 */
html body #wh-handbook-root a[class*="text-harvest-orange"]:link,
html body #wh-handbook-root a[class*="text-harvest-orange"]:visited {
  color: var(--wh-harvest-orange);
}
html.dark body #wh-handbook-root a[class*="text-harvest-orange"]:link,
html.dark body #wh-handbook-root a[class*="text-harvest-orange"]:visited,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-harvest-orange"]:link,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-harvest-orange"]:visited {
  color: #f4a261;
}

html body #wh-handbook-root a[class*="text-burnt-rose"]:link,
html body #wh-handbook-root a[class*="text-burnt-rose"]:visited {
  color: var(--wh-burnt-rose);
}
html.dark body #wh-handbook-root a[class*="text-burnt-rose"]:link,
html.dark body #wh-handbook-root a[class*="text-burnt-rose"]:visited,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-burnt-rose"]:link,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-burnt-rose"]:visited {
  color: #e8a0a4;
}

html body #wh-handbook-root a[class*="text-moss-sage"]:link,
html body #wh-handbook-root a[class*="text-moss-sage"]:visited {
  color: var(--wh-moss-sage);
}
html.dark body #wh-handbook-root a[class*="text-moss-sage"]:link,
html.dark body #wh-handbook-root a[class*="text-moss-sage"]:visited,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-moss-sage"]:link,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-moss-sage"]:visited {
  color: #9ebf8f;
}

/**
 * globals.css forces every button:focus-visible to a moss ring (box-shadow !important).
 * On handbook parchment/peach that reads muddy; use a bark outline like other focus chrome.
 */
html body #wh-handbook-root button:focus-visible {
  outline: 2px solid #4b2e2a !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Light mode: selected tab label stays clearly bark on pastel active gradients */
html:not(.dark) body #wh-handbook-root [role="tab"][data-state="active"] {
  color: #4b2e2a !important;
}

/**
 * Restore Tailwind hover colors for non–inline-flex links (same exclusion as globals a:hover).
 * revert-layer pulls `color` back from @layer utilities so hover:text-* works again.
 *
 * Do NOT apply revert-layer to branded text-* handbook links: revert-layer can resolve to the
 * UA :link color (blue). Those links use explicit :hover below (matching hover:text-*/80).
 */
html body #wh-handbook-root a:not([class*="inline-flex"]):not([class*="text-harvest-orange"]):not([class*="text-burnt-rose"]):not([class*="text-moss-sage"]):hover {
  color: revert-layer;
}

/* Branded handbook links — explicit /80 hover (Tailwind opacity); beats globals unlayered a:hover */
html body #wh-handbook-root a[class*="text-harvest-orange"]:not([class*="inline-flex"]):hover {
  color: rgba(218, 124, 71, 0.8);
}
html.dark body #wh-handbook-root a[class*="text-harvest-orange"]:not([class*="inline-flex"]):hover,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-harvest-orange"]:not([class*="inline-flex"]):hover {
  color: rgba(244, 162, 97, 0.8);
}

html body #wh-handbook-root a[class*="text-burnt-rose"]:not([class*="inline-flex"]):hover {
  color: rgba(201, 122, 126, 0.8);
}
html.dark body #wh-handbook-root a[class*="text-burnt-rose"]:not([class*="inline-flex"]):hover,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-burnt-rose"]:not([class*="inline-flex"]):hover {
  color: rgba(232, 160, 164, 0.8);
}

html body #wh-handbook-root a[class*="text-moss-sage"]:not([class*="inline-flex"]):hover {
  color: rgba(163, 163, 128, 0.8);
}
html.dark body #wh-handbook-root a[class*="text-moss-sage"]:not([class*="inline-flex"]):hover,
html[data-theme="dark"] body #wh-handbook-root a[class*="text-moss-sage"]:not([class*="inline-flex"]):hover {
  color: rgba(158, 191, 143, 0.8);
}

/* Tinted CTA chips: substring bg-harvest-orange covers bg-harvest-orange/NN without '/' in [class*="…"]. */
html body #wh-handbook-root a[class*="bg-harvest-orange"] {
  color: #4b2e2a !important;
}

html.dark body #wh-handbook-root a[class*="bg-harvest-orange"],
html[data-theme="dark"] body #wh-handbook-root a[class*="bg-harvest-orange"] {
  color: #e6d8c8 !important;
}

html body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-active,
html body #wh-handbook-root aside[aria-label="Handbook sections"] a[aria-current="page"] {
  color: #4b2e2a !important;
}

html.dark body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-active,
html.dark body #wh-handbook-root aside[aria-label="Handbook sections"] a[aria-current="page"],
html[data-theme="dark"] body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-active,
html[data-theme="dark"] body #wh-handbook-root aside[aria-label="Handbook sections"] a[aria-current="page"] {
  color: #f1c57a !important;
}

html body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link {
  color: rgba(75, 46, 42, 0.75) !important;
}

html.dark body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link,
html[data-theme="dark"] body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link {
  color: #c9b7a3 !important;
}

html body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:hover,
html body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:focus-visible {
  color: #4b2e2a !important;
}

html.dark body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:hover,
html[data-theme="dark"] body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:hover,
html.dark body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:focus-visible,
html[data-theme="dark"] body #wh-handbook-root aside[aria-label="Handbook sections"] a.handbook-sidebar-link:focus-visible {
  color: #f3e6d6 !important;
}

html body #wh-handbook-root a.handbook-inline-cta {
  color: #4b2e2a !important;
}

html.dark body #wh-handbook-root a.handbook-inline-cta,
html[data-theme="dark"] body #wh-handbook-root a.handbook-inline-cta {
  color: #f3e6d6 !important;
}

html body #wh-handbook-root a.handbook-inline-cta:hover,
html body #wh-handbook-root a.handbook-inline-cta:focus-visible {
  color: #4b2e2a !important;
}

html.dark body #wh-handbook-root a.handbook-inline-cta:hover,
html[data-theme="dark"] body #wh-handbook-root a.handbook-inline-cta:hover,
html.dark body #wh-handbook-root a.handbook-inline-cta:focus-visible,
html[data-theme="dark"] body #wh-handbook-root a.handbook-inline-cta:focus-visible {
  color: #f3e6d6 !important;
}