/* Foundations and Flora — theme picker + lilac typography */

/* =========================================================
 * Theme picker
 * ========================================================= */

#theme-options:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;

  width: fit-content;
  max-width: 100%;

  margin: 0 0 1.35rem;
  padding: 0.38rem;

  border: 1px solid var(--flora-surface0);
  border-radius: 0.8rem;

  background:
    color-mix(in srgb, var(--flora-mantle) 88%, transparent);

  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--flora-text) 5%, transparent),
    0 4px 18px color-mix(in srgb, var(--flora-crust) 20%, transparent);
}

/* Remove Kodama's default surrounding parentheses. */
#theme-options:not(:empty)::before,
#theme-options:not(:empty)::after {
  content: none !important;
}

theme-option {
  display: block;
}

theme-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

theme-option > label {
  display: block;
  padding: 0.32rem 0.62rem;

  border: 1px solid transparent;
  border-radius: 0.55rem;

  color: var(--flora-subtext);
  background: transparent;

  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;

  cursor: pointer;
  user-select: none;

  transition:
    color 120ms ease,
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

/* Remove Kodama's default [selected] brackets. */
theme-option > label::before,
theme-option > label::after,
theme-option:has(input:checked) > label::before,
theme-option:has(input:checked) > label::after {
  content: none !important;
}

theme-option > label:hover {
  color: var(--flora-text);
  border-color: color-mix(in srgb, var(--flora-lavender) 30%, transparent);
  background: color-mix(in srgb, var(--flora-surface0) 48%, transparent);
}

theme-option:has(input:focus-visible) > label {
  outline: 2px solid var(--flora-lavender);
  outline-offset: 2px;
}

theme-option:has(input:checked) > label {
  color: var(--flora-base);
  border-color: color-mix(in srgb, var(--flora-lavender) 72%, transparent);
  background: linear-gradient(
    135deg,
    var(--flora-mauve),
    var(--flora-lavender)
  );

  box-shadow:
    0 2px 8px color-mix(in srgb, var(--flora-mauve) 22%, transparent);
}

/* Keep the picker compact on narrow screens. */
@media (max-width: 999px) {
  #theme-options:not(:empty) {
    margin-bottom: 0.8rem;
  }

  theme-option > label {
    padding: 0.28rem 0.52rem;
    font-size: 0.78rem;
  }
}

/* =========================================================
 * Lilac themes — mirror the custom Neovim candy palette
 *
 * Neovim roles:
 *   normal text    -> near-white / dark plum
 *   comments/meta  -> muted purple
 *   headings       -> candy purple
 *   strong         -> coral red
 *   emphasis       -> candy pink
 *   links          -> pastel blue
 *   inline math    -> orange
 *   code           -> peach
 * ========================================================= */

body:has(input[value="lilac-dark"]:checked),
body:has(input[value="lilac-light"]:checked) {
  --flora-prose: var(--flora-text);
  --flora-muted: var(--flora-subtext);
}

body:has(input[value="lilac-dark"]:checked) {
  --flora-strong: #ff829f;
  --flora-emphasis: #ff9bd8;
  --flora-link-special: #95c4ff;
  --flora-math: #ffa36b;
  --flora-inline-code: #ffc18f;
  --flora-heading-special: #d29cff;
}

body:has(input[value="lilac-light"]:checked) {
  /* Light counterparts preserve the same semantic hue roles at readable contrast. */
  --flora-strong: #ad3157;
  --flora-emphasis: #a13280;
  --flora-link-special: #355da6;
  --flora-math: #a64c1f;
  --flora-inline-code: #9b4b2d;
  --flora-heading-special: #7440a8;
}

body:has(input[value^="lilac-"]:checked) article strong,
body:has(input[value^="lilac-"]:checked) article b {
  color: var(--flora-strong);
}

body:has(input[value^="lilac-"]:checked) article em,
body:has(input[value^="lilac-"]:checked) article i {
  color: var(--flora-emphasis);
}

body:has(input[value^="lilac-"]:checked) article a:not(.hash):not(.slug) {
  color: var(--flora-link-special);
}

body:has(input[value^="lilac-"]:checked) article a:not(.hash):not(.slug):hover {
  color: var(--flora-emphasis);
}

body:has(input[value^="lilac-"]:checked) article code {
  color: var(--flora-inline-code);
}

/* Match the Neovim @markup.math role without recoloring text inside theorem metadata. */
body:has(input[value^="lilac-"]:checked) article p .katex,
body:has(input[value^="lilac-"]:checked) article li .katex,
body:has(input[value^="lilac-"]:checked) article .katex-display .katex {
  color: var(--flora-math);
}

/* Main article headings use the same candy-purple hierarchy as Neovim markdown. */
body:has(input[value^="lilac-"]:checked) article > h1,
body:has(input[value^="lilac-"]:checked) article > h2,
body:has(input[value^="lilac-"]:checked) article > h3 {
  color: var(--flora-heading-special) !important;
}

/* Slugs and peripheral metadata stay quiet, like comments in the editor. */
body:has(input[value^="lilac-"]:checked) .slug,
body:has(input[value^="lilac-"]:checked) .metadata,
body:has(input[value^="lilac-"]:checked) #references,
body:has(input[value^="lilac-"]:checked) #backlinks {
  color: var(--flora-muted);
}