/*
 * Color scheme matched to Periscope's own theme (assets/css/app.css,
 * i2-light / i2-dark daisyUI themes), from the feat/69-improved-query-editor
 * branch — not yet on main, so re-sync these values if that theme changes
 * before merging: https://gitlab.com/i2ns/systems/scratch/periscope/-/blob/feat/69-improved-query-editor/assets/css/app.css
 *
 * Requires `primary = "custom"` and `accent = "custom"` on both palette
 * entries in zensical.toml.
 *
 * Zensical's --md-primary-fg-color drives link color (--md-typeset-a-color).
 * Periscope's own hyperlinks use `link-secondary` (see splash.ex's link to
 * Insight Console), not `primary` — so --md-primary-fg-color is sourced from
 * Periscope's --color-secondary here, giving reddish links in light mode and
 * yellowish links in dark mode, matching Periscope's actual link color.
 *
 * --md-primary-fg-color--light/--dark have no equivalent in Periscope's
 * (single-tone) secondary color, so they're derived by shifting lightness
 * while keeping the same hue/chroma.
 */

/* Light mode — matches i2-light */
[data-md-color-scheme="default"] {
  --md-default-bg-color: oklch(100% 0 0);
  --md-default-fg-color: oklch(7% 0.044 280);
}

[data-md-color-scheme="default"][data-md-color-primary="custom"] {
  --md-primary-fg-color: oklch(59% 0.196 31);
  --md-primary-fg-color--light: oklch(72% 0.196 31);
  --md-primary-fg-color--dark: oklch(46% 0.196 31);
  --md-primary-bg-color: oklch(98.7% 0.016 31.436);
  --md-primary-bg-color--light: oklch(98.7% 0.016 31.436 / 70%);
}

[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-accent-fg-color: oklch(74% 0.088 204);
  --md-accent-fg-color--transparent: oklch(74% 0.088 204 / 10%);
  --md-accent-bg-color: oklch(98.4% 0.006 188.416);
  --md-accent-bg-color--light: oklch(98.4% 0.006 188.416 / 70%);
}

/* Dark mode — matches i2-dark */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: oklch(7% 0.044 280);
  --md-default-fg-color: oklch(93% 0.010 280);
}

[data-md-color-scheme="slate"][data-md-color-primary="custom"] {
  --md-primary-fg-color: oklch(81% 0.16 94);
  --md-primary-fg-color--light: oklch(90% 0.16 94);
  --md-primary-fg-color--dark: oklch(65% 0.16 94);
  --md-primary-bg-color: oklch(18.7% 0.160 94);
  --md-primary-bg-color--light: oklch(18.7% 0.160 94 / 70%);
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: oklch(74% 0.088 204);
  --md-accent-fg-color--transparent: oklch(74% 0.088 204 / 10%);
  --md-accent-bg-color: oklch(18.4% 0.088 204);
  --md-accent-bg-color--light: oklch(18.4% 0.088 204 / 70%);
}

/*
 * Zensical hardcodes all link hovers to the accent color
 * (.md-typeset a:hover { color: var(--md-accent-fg-color) }). Periscope
 * instead darkens the link's own color on hover — daisyUI's .link-secondary
 * uses `color-mix(in oklab, var(--color-secondary) 80%, #000)`. Same formula
 * here, applied to whichever scheme is active.
 */
.md-typeset a:hover {
  color: color-mix(in oklab, var(--md-primary-fg-color) 80%, #000);
}

/*
 * Same fix for the "On this page" (secondary) nav. The relevant rule isn't
 * `.md-nav__link--active` (that class only appears on a mobile drawer label,
 * never on the desktop TOC's per-heading links — the "active" heading is
 * tracked by JS at runtime, not baked into a class). The actual desktop
 * hover rule is `.md-nav--secondary .md-nav__link[href]:hover`, at higher
 * specificity than a plain `.md-nav__link--active:hover` — hence needing an
 * equally-specific override here.
 */
.md-nav--secondary .md-nav__link[href]:hover,
.md-nav--secondary .md-nav__link[href]:focus {
  color: color-mix(in oklab, var(--md-primary-fg-color) 80%, #000);
}

/* Same rule again for the mobile/narrow-viewport integrated nav variant. */
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary .md-nav__link:hover,
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary .md-nav__link:focus {
  color: color-mix(in oklab, var(--md-primary-fg-color) 80%, #000);
}