/* =============================================================================
   JEWEL-TONE SEMANTIC SYSTEM — AuDHD-optimized, single theme
   Background: quiet chromatic violet (HSL 245, 15%, 20%)
   Semantic colors: high hue separation, controlled luminance, rich saturation.
   Surfaces: restrained, wide lightness gaps, screen-share resilient.
   =============================================================================

   DESIGN PRINCIPLE
   High hue separation + medium-high saturation + controlled luminance + quiet surfaces
   "Vivid enough to classify instantly, calm enough to live in for hours."

   CATEGORY → HUE MAP (JEWEL-TONE)
   ──────────────────────────────────────────────────────
   Hue°  Category                 HSL                    Gem
   0°    Warning/danger           hsl(0,   85%, 50%)     Ruby
   30°   Code (inline + blocks)   hsl(30,  85%, 48%)     Amber
   60°   Nav section labels       hsl(60,  85%, 42%)     Gold
   90°   Example admonition       hsl(90,  80%, 42%)     Peridot
   120°  Success/tip admonition   hsl(120, 80%, 40%)     Emerald
   150°  Content links            hsl(150, 80%, 42%)     Jade
   180°  Nav page links           hsl(180, 80%, 42%)     Turquoise
   210°  TOC links                hsl(210, 80%, 52%)     Sapphire
   240°  Info/note admonition     hsl(240, 80%, 55%)     Lapis
   270°  Header bar / chrome      hsl(270, 70%, 28%)     Amethyst
   300°  Headings + table headers hsl(300, 80%, 52%)     Orchid
   330°  Nav active state         hsl(330, 85%, 50%)     Rose

   SURFACE LIGHTNESS STACKING (min 4-6% gaps, screen-share resilient)
   Footer-dark  6% → Footer 10% → Code blocks 14% → Sidebar 14%
   → Page bg 20% → Code inline 26% → Header 28% (different hue)

   CONSTRAINT CHECKS
   ✓ Saturation 80-85% for all semantic colors
   ✓ Hue separation = 30° for all pairs
   ✓ No hue reuse across categories
   ✓ Background chromatic: hsl(245, 15%, 20%) — sat 15% = minimum
   ✓ Single theme — no variants, no toggle
   ✓ Chrome elements (scrollbar, blockquote, selection, back-to-top) → 270°
   ✓ Lightness perceptually equalized: bright hues (60-180°) at 40-42%,
     dark hues (0°, 210-330°) at 48-55% — normalized perceived brightness
   ✓ Dual-bg viable: all semantics at 40-55% L survive background changes
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. CORE PALETTE — background, text, surfaces
   --------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-hue: 245;

  /* Page background: quiet chromatic violet
     Surface stacking: 6% → 10% → 14% → 20% → 26% → 28%+ */
  --md-default-bg-color:            hsl(245, 15%, 20%);
  --md-default-bg-color--light:     hsl(245, 14%, 26%);
  --md-default-bg-color--lighter:   hsl(245, 12%, 32%);
  --md-default-bg-color--lightest:  hsl(245, 10%, 38%);

  /* Default text: warm off-white, slightly desaturated for calm reading */
  --md-default-fg-color:            hsla(230, 18%, 90%, 0.90);
  --md-default-fg-color--light:     hsla(230, 14%, 76%, 0.70);
  --md-default-fg-color--lighter:   hsla(230, 10%, 64%, 0.50);
  --md-default-fg-color--lightest:  hsla(230, 8%, 52%, 0.12);

  /* Header bar: 270° Amethyst */
  --md-primary-fg-color:            hsl(270, 70%, 38%);
  --md-primary-fg-color--light:     hsl(270, 65%, 48%);
  --md-primary-fg-color--dark:      hsl(270, 75%, 28%);
  --md-primary-bg-color:            hsl(0, 0%, 100%);
  --md-primary-bg-color--light:     hsla(0, 0%, 100%, 0.7);

  /* Accent (hover/focus): 330° Rose */
  --md-accent-fg-color:             hsl(330, 85%, 50%);
  --md-accent-fg-color--transparent: hsla(330, 85%, 50%, 0.1);
  --md-accent-bg-color:             hsl(330, 85%, 50%);
  --md-accent-bg-color--light:      hsla(330, 85%, 50%, 0.1);

  /* Content links: 150° Jade */
  --md-typeset-a-color:             hsl(150, 80%, 42%);

  /* Code: 30° Amber */
  --md-code-fg-color:               hsl(30, 85%, 48%);
  --md-code-bg-color:               hsl(245, 16%, 26%);
  --md-code-hl-color:               hsla(30, 85%, 48%, 0.12);
  --md-code-hl-number-color:        hsl(0, 85%, 50%);
  --md-code-hl-string-color:        hsl(120, 80%, 40%);
  --md-code-hl-keyword-color:       hsl(300, 80%, 52%);
  --md-code-hl-name-color:          hsl(210, 80%, 52%);
  --md-code-hl-operator-color:      hsl(330, 85%, 50%);
  --md-code-hl-punctuation-color:   hsla(230, 18%, 76%, 0.72);
  --md-code-hl-comment-color:       hsla(230, 14%, 52%, 0.62);
  --md-code-hl-generic-color:       hsl(150, 80%, 42%);
  --md-code-hl-variable-color:      hsl(30, 85%, 48%);
  --md-code-hl-function-color:      hsl(60, 85%, 42%);
  --md-code-hl-special-color:       hsl(270, 80%, 52%);

  /* Footer */
  --md-footer-bg-color:             hsl(245, 16%, 10%);
  --md-footer-bg-color--dark:       hsl(245, 16%, 6%);
  --md-footer-fg-color:             hsla(230, 18%, 90%, 0.72);
  --md-footer-fg-color--light:      hsla(230, 18%, 90%, 0.52);
  --md-footer-fg-color--lighter:    hsla(230, 18%, 90%, 0.32);

  /* Shadow */
  --md-shadow-z1: 0 0.2rem 0.5rem hsla(245, 30%, 6%, 0.4),
                  0 0 0.05rem hsla(245, 30%, 6%, 0.2);
  --md-shadow-z2: 0 0.2rem 0.5rem hsla(245, 30%, 6%, 0.6),
                  0 0 0.05rem hsla(245, 30%, 6%, 0.4);
  --md-shadow-z3: 0 0.2rem 0.5rem hsla(245, 30%, 6%, 0.8),
                  0 0 0.05rem hsla(245, 30%, 6%, 0.6);
}


/* ---------------------------------------------------------------------------
   2. TYPOGRAPHY — Atkinson Hyperlegible 500, JetBrains Mono, no ligatures
   --------------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.9rem;
  font-weight: 500;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}

.md-typeset code,
.md-typeset pre {
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}


/* ---------------------------------------------------------------------------
   2b. TRANSITIONS — smooth hover states
   --------------------------------------------------------------------------- */

.md-typeset a,
.md-nav__link,
.md-clipboard,
.md-typeset .tabbed-labels > label,
.md-typeset .headerlink {
  transition: color 0.15s ease;
}


/* ---------------------------------------------------------------------------
   3. HEADINGS + TABLE HEADERS — 300° Orchid
   --------------------------------------------------------------------------- */

.md-typeset h1 {
  color: hsl(300, 80%, 54%);
  font-weight: 600;
}

.md-typeset h2 {
  color: hsl(300, 80%, 52%);
  font-weight: 600;
  border-bottom: 1px solid hsl(300, 30%, 30%);
  padding-bottom: 0.3em;
}

.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: hsl(300, 80%, 52%);
  font-weight: 600;
}

.md-typeset th {
  color: hsl(300, 80%, 54%);
  background-color: hsl(300, 20%, 24%);
  font-weight: 600;
  border-bottom: 2px solid hsl(300, 40%, 34%);
}

.md-typeset td {
  border-bottom-color: hsl(245, 12%, 28%);
}

.md-typeset table:not([class]) {
  border: 1px solid hsl(245, 12%, 28%);
}

.md-typeset table:not([class]) tr:hover td {
  background-color: hsla(330, 30%, 24%, 0.15);
}


/* ---------------------------------------------------------------------------
   4. CONTENT LINKS — 150° Jade
   --------------------------------------------------------------------------- */

.md-typeset a {
  color: hsl(150, 80%, 42%);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: hsl(150, 85%, 50%);
}

/* Permalink anchors — quiet until hovered */
.md-typeset .headerlink {
  color: hsl(245, 12%, 34%);
}

.md-typeset .headerlink:hover {
  color: hsl(330, 85%, 50%);
}


/* ---------------------------------------------------------------------------
   5. NAV PAGE LINKS — 180° Turquoise
   --------------------------------------------------------------------------- */

.md-nav__link {
  color: hsl(180, 80%, 42%) !important;
  font-weight: 500;
}

.md-nav__link:hover {
  color: hsl(180, 85%, 50%) !important;
}


/* ---------------------------------------------------------------------------
   6. NAV SECTION LABELS — 60° Gold
   --------------------------------------------------------------------------- */

.md-nav__item--nested > .md-nav__link {
  color: hsl(60, 85%, 42%) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}


/* ---------------------------------------------------------------------------
   7. NAV ACTIVE STATE — 330° Rose
   --------------------------------------------------------------------------- */

.md-nav__link--active,
.md-nav__link[data-md-state="blur"] {
  color: hsl(330, 85%, 50%) !important;
}

.md-nav__item .md-nav__link--active {
  color: hsl(330, 85%, 50%) !important;
  font-weight: 600;
}

/* Active indicator bar */
.md-nav--primary .md-nav__link--active {
  border-left: 3px solid hsl(330, 85%, 50%);
  padding-left: 0.5rem;
}


/* ---------------------------------------------------------------------------
   8. TOC LINKS — 210° Sapphire
   --------------------------------------------------------------------------- */

.md-nav--secondary .md-nav__link {
  color: hsl(210, 80%, 52%) !important;
  font-weight: 500;
}

.md-nav--secondary .md-nav__link:hover {
  color: hsl(210, 85%, 58%) !important;
}

.md-nav--secondary .md-nav__link--active {
  color: hsl(210, 85%, 60%) !important;
  font-weight: 600;
}

/* TOC label — force Sapphire, override material default */
[data-md-color-scheme="slate"] .md-nav--secondary > .md-nav__title {
  color: hsl(210, 80%, 52%) !important;
}

[data-md-color-scheme="slate"] .md-nav--secondary > .md-nav__title .md-nav__icon {
  color: hsl(210, 80%, 52%) !important;
}

.md-nav--secondary label.md-nav__title {
  color: hsl(210, 80%, 52%) !important;
}


/* ---------------------------------------------------------------------------
   9. CODE — 30° Amber
   --------------------------------------------------------------------------- */

.md-typeset code {
  color: hsl(30, 85%, 48%);
  background-color: hsl(245, 16%, 26%);
  border: none;
  padding: 0.05em 0.3em;
  border-radius: 3px;
}

.md-typeset pre {
  background-color: hsl(245, 16%, 14%);
  border: 1px solid hsl(245, 12%, 26%);
  border-radius: 4px;
}

.md-typeset pre code {
  border: none;
  background: none;
  padding: 0;
}

/* Copy button */
.md-clipboard {
  color: hsl(245, 12%, 38%);
}

.md-clipboard:hover {
  color: hsl(330, 85%, 50%);
}


/* ---------------------------------------------------------------------------
   10. ADMONITIONS — each type gets its own hue, jewel-tone
   --------------------------------------------------------------------------- */

/* Warning: 0° Ruby */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: hsl(0, 85%, 45%);
  background-color: hsla(0, 70%, 18%, 0.25);
}
.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background-color: hsla(0, 70%, 26%, 0.35);
  color: hsl(0, 85%, 52%);
}
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
  background-color: hsl(0, 85%, 45%);
}

/* Danger: 0° Ruby (deeper) */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: hsl(0, 85%, 42%);
  background-color: hsla(0, 70%, 16%, 0.3);
}
.md-typeset .admonition.danger > .admonition-title,
.md-typeset details.danger > summary {
  background-color: hsla(0, 70%, 22%, 0.4);
  color: hsl(0, 85%, 50%);
}
.md-typeset .admonition.danger > .admonition-title::before,
.md-typeset details.danger > summary::before {
  background-color: hsl(0, 85%, 42%);
}

/* Info / Note: 240° Lapis */
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: hsl(240, 80%, 50%);
  background-color: hsla(240, 65%, 18%, 0.25);
}
.md-typeset .admonition.info > .admonition-title,
.md-typeset details.info > summary,
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.note > summary {
  background-color: hsla(240, 65%, 26%, 0.35);
  color: hsl(240, 80%, 58%);
}
.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before,
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset details.note > summary::before {
  background-color: hsl(240, 80%, 50%);
}

/* Success / Tip: 120° Emerald */
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: hsl(120, 80%, 36%);
  background-color: hsla(120, 65%, 16%, 0.25);
}
.md-typeset .admonition.success > .admonition-title,
.md-typeset details.success > summary,
.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  background-color: hsla(120, 65%, 22%, 0.35);
  color: hsl(120, 80%, 44%);
}
.md-typeset .admonition.success > .admonition-title::before,
.md-typeset details.success > summary::before,
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset details.tip > summary::before {
  background-color: hsl(120, 80%, 36%);
}

/* Example: 90° Peridot */
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: hsl(90, 80%, 38%);
  background-color: hsla(90, 65%, 16%, 0.25);
}
.md-typeset .admonition.example > .admonition-title,
.md-typeset details.example > summary {
  background-color: hsla(90, 65%, 22%, 0.35);
  color: hsl(90, 80%, 46%);
}
.md-typeset .admonition.example > .admonition-title::before,
.md-typeset details.example > summary::before {
  background-color: hsl(90, 80%, 38%);
}


/* ---------------------------------------------------------------------------
   11. CONTENT TABS
   --------------------------------------------------------------------------- */

.md-typeset .tabbed-labels > label {
  color: hsl(180, 80%, 42%);
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.md-typeset .tabbed-labels > label:hover {
  color: hsl(180, 85%, 50%);
}

.md-typeset .tabbed-labels > label.tabbed-labels--active,
.md-typeset .tabbed-labels > .tabbed-input:checked + label {
  color: hsl(330, 85%, 50%);
  border-bottom-color: hsl(330, 85%, 50%);
}

.md-typeset .tabbed-set {
  border-bottom: 1px solid hsl(245, 12%, 28%);
}


/* ---------------------------------------------------------------------------
   12. SEARCH
   --------------------------------------------------------------------------- */

.md-search__input {
  background-color: hsl(245, 15%, 26%);
  color: hsla(230, 18%, 90%, 0.90);
}

.md-search__input::placeholder {
  color: hsla(230, 14%, 60%, 0.5);
}

.md-search-result__link:hover {
  background-color: hsl(245, 14%, 28%);
}

.md-search-result mark {
  color: hsl(330, 85%, 50%);
  background-color: hsla(330, 85%, 50%, 0.15);
}


/* ---------------------------------------------------------------------------
   13. SIDEBAR / NAVIGATION SURFACE
   --------------------------------------------------------------------------- */

/* Left sidebar: subtle right edge to separate from content */
.md-sidebar--primary {
  border-right: 1px solid hsl(245, 12%, 26%);
}

/* Right sidebar (TOC): subtle left edge */
.md-sidebar--secondary {
  border-left: 1px solid hsl(245, 12%, 26%);
}

/* Kill the dark title box — make it seamless with the nav */
.md-nav--primary > .md-nav__title {
  background-color: transparent;
}

/* Scrollbar — 270° Amethyst chrome */
.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
  background-color: hsl(270, 55%, 32%);
}

.md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover {
  background-color: hsl(270, 65%, 40%);
}


/* ---------------------------------------------------------------------------
   14. HEADER BAR — 270° Amethyst
   --------------------------------------------------------------------------- */

.md-header {
  background-color: hsl(270, 70%, 28%);
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 0 0.4rem hsla(270, 70%, 10%, 0.6);
}


/* ---------------------------------------------------------------------------
   15. FOOTER
   --------------------------------------------------------------------------- */

.md-footer {
  background-color: hsl(245, 16%, 10%);
}

.md-footer-meta {
  background-color: hsl(245, 16%, 6%);
}

.md-footer a {
  color: hsl(150, 80%, 42%);
}


/* ---------------------------------------------------------------------------
   16. MERMAID DIAGRAMS
   --------------------------------------------------------------------------- */

.mermaid {
  --md-mermaid-font-family: "Atkinson Hyperlegible", sans-serif;
  --md-mermaid-edge-color: hsl(230, 14%, 52%);
  --md-mermaid-node-bg-color: hsl(245, 15%, 26%);
  --md-mermaid-node-fg-color: hsl(230, 18%, 88%);
  --md-mermaid-label-bg-color: hsl(245, 15%, 20%);
  --md-mermaid-label-fg-color: hsl(230, 18%, 84%);
}


/* ---------------------------------------------------------------------------
   17. TASK LISTS (roadmap checkboxes)
   --------------------------------------------------------------------------- */

.md-typeset .task-list-indicator::before {
  background-color: hsl(245, 12%, 30%);
}

.md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: hsl(120, 80%, 36%);
}


/* ---------------------------------------------------------------------------
   18. BLOCKQUOTES — 270° Amethyst chrome
   --------------------------------------------------------------------------- */

.md-typeset blockquote {
  border-left: 0.2rem solid hsl(270, 65%, 42%);
  color: hsla(230, 14%, 82%, 0.8);
}


/* ---------------------------------------------------------------------------
   19. HORIZONTAL RULES
   --------------------------------------------------------------------------- */

.md-typeset hr {
  border-bottom-color: hsl(245, 12%, 28%);
}


/* ---------------------------------------------------------------------------
   20. SELECTION — 270° Amethyst chrome
   --------------------------------------------------------------------------- */

::selection {
  background-color: hsla(270, 75%, 42%, 0.35);
  color: hsl(0, 0%, 100%);
}


/* ---------------------------------------------------------------------------
   21. BACK TO TOP BUTTON — 270° Amethyst chrome
   --------------------------------------------------------------------------- */

.md-top {
  background-color: hsl(270, 70%, 36%);
  color: white;
}

.md-top:hover {
  background-color: hsl(270, 70%, 44%);
}


/* ---------------------------------------------------------------------------
   22. NAVIGATION PROGRESS BAR — 330° Rose
   --------------------------------------------------------------------------- */

.md-progress {
  background-color: hsl(330, 85%, 50%);
}