:root {
  --sl-color-accent-low: oklch(85% 10% 280);
  --sl-color-accent: oklch(70% 15% 280);
  --sl-color-accent-high: oklch(55% 20% 280);
  --sl-color-text-accent: var(--sl-color-accent-high);
}

:root[data-theme='dark'] {
  --sl-color-accent-low: oklch(30% 10% 280);
  --sl-color-accent: oklch(65% 15% 280);
  --sl-color-accent-high: oklch(80% 20% 280);
  --sl-color-text-accent: var(--sl-color-accent-high);
}

/* Accessible text on accent backgrounds */
.sl-link-button.primary,
.sl-link-button.primary:hover {
  color: contrast-color(var(--sl-color-text-accent));
}

[aria-current='page'],
[aria-current='page']:hover,
[aria-current='page']:focus {
  color: contrast-color(var(--sl-color-text-accent));
}

starlight-file-tree .highlight {
  color: contrast-color(var(--sl-color-text-accent));
}

.skip-link a:focus {
  color: contrast-color(var(--sl-color-text-accent));
}

/* Hero inline picker */
.hero-picker {
  display: grid;
  place-items: start;
}

.hero-picker::part(panel) {
  display: block;
  position: static;
  opacity: 1;
}

/* Menu button override */
starlight-menu-button > button {
  min-width: unset;
  min-height: unset;
}

/* Typography */
:is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 6rem;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h2 {
  margin-block-start: 2.5rem;
}

h3 {
  margin-block-start: 2rem;
}

/* Prose rhythm */
.sl-markdown-content > * + * {
  margin-block-start: 1.25rem;
}

.sl-markdown-content > :is(h2, h3) + * {
  margin-block-start: 0.75rem;
}

/* Interactive demo controls */
button,
[role='button'],
summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: oklch(70% 15% 280 / 0.2);
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

/* Focus within interactive groups */
:is(.demo-group, .control-group):focus-within {
  outline: 1.5px solid var(--sl-color-accent);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Safe area insets */
@supports (padding: env(safe-area-inset-left)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}