/*
 * An Honest Host brand tokens, mapped onto Starlight's CSS custom properties.
 * Source palette: design spec § 8.
 */

:root {
  /* Brand palette — constants across modes */
  --anhh-primary: #1a56db;
  --anhh-primary-hover: #2563eb;
  --anhh-accent: #00d4aa;

  /* Typography */
  --sl-font: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
  --sl-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;

  /* Map brand → Starlight accent (both modes) */
  --sl-color-accent: var(--anhh-primary);
  --sl-color-accent-high: var(--anhh-primary-hover);
  --sl-color-accent-low: rgba(26, 86, 219, 0.15);
}

/* Dark mode — Starlight default */
:root,
:root[data-theme='dark'] {
  --anhh-bg: #0a1628;
  --anhh-bg-elevated: #111827;
  --anhh-bg-surface: #1e293b;
  --anhh-text-primary: #f0f4ff;
  --anhh-text-secondary: #94a3b8;
  --anhh-text-muted: #64748b;
  --anhh-border-color: #334155;
  --anhh-accent-dim: rgba(0, 212, 170, 0.1);
  --anhh-accent-border: rgba(0, 212, 170, 0.2);

  --sl-color-bg: var(--anhh-bg);
  --sl-color-bg-nav: var(--anhh-bg-elevated);
  --sl-color-bg-sidebar: var(--anhh-bg-elevated);
  --sl-color-bg-inline-code: var(--anhh-bg-surface);
  --sl-color-text: var(--anhh-text-primary);
  --sl-color-text-accent: var(--anhh-accent);
  --sl-color-gray-1: var(--anhh-text-primary);
  --sl-color-gray-2: var(--anhh-text-secondary);
  --sl-color-gray-3: var(--anhh-text-muted);
  --sl-color-gray-4: var(--anhh-border-color);
  --sl-color-hairline: var(--anhh-border-color);
}

/* Light mode */
:root[data-theme='light'] {
  --anhh-bg: #f0f4ff;
  --anhh-bg-elevated: #ffffff;
  --anhh-bg-surface: #e2e8f0;
  --anhh-text-primary: #0f172a;
  --anhh-text-secondary: #334155;     /* bumped from #475569 for AA contrast on muted UI text */
  --anhh-text-muted: #475569;         /* bumped from #94a3b8 — same reason */
  --anhh-border-color: #cbd5e1;
  --anhh-accent-dim: rgba(0, 212, 170, 0.08);
  --anhh-accent-border: rgba(0, 212, 170, 0.3);

  /*
   * Darker accent for light mode so inline accent-coloured text and links
   * (Starlight binds --sl-color-text-accent) pass WCAG AA against the bg.
   * The brand teal #00d4aa is only ~1.7:1 on the cream background; #047857
   * is ~6:1, which clears AA.
   */
  --anhh-accent-on-light: #047857;

  --sl-color-bg: var(--anhh-bg);
  --sl-color-bg-nav: var(--anhh-bg-elevated);
  --sl-color-bg-sidebar: var(--anhh-bg-elevated);
  --sl-color-bg-inline-code: var(--anhh-bg-surface);
  --sl-color-text: var(--anhh-text-primary);
  --sl-color-text-accent: var(--anhh-accent-on-light);
  --sl-color-gray-1: var(--anhh-text-primary);
  --sl-color-gray-2: var(--anhh-text-secondary);
  --sl-color-gray-3: var(--anhh-text-muted);
  --sl-color-gray-4: var(--anhh-border-color);
  --sl-color-hairline: var(--anhh-border-color);
}

/* Accent-teal callout — used by paid-addon-callout.mdx, support-link.mdx, tip <Aside>s */
.anhh-accent-callout {
  background: var(--anhh-accent-dim);
  border: 1px solid var(--anhh-accent-border);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

/* Tighten body line-height a touch for docs density */
body {
  line-height: 1.6;
}

/*
 * Active sidebar item — Starlight default uses --sl-color-text-accent as the
 * background, which on our teal (#00d4aa) gave only ~3:1 contrast against the
 * dark gray text. Override with our primary blue + white text so contrast
 * exceeds WCAG AA in both modes.
 *
 * Starlight scopes its rules via Astro's data-astro-cid-* attributes, so we
 * need at least matching specificity. `:is(html)` adds a class-equivalent.
 */
/*
 * Specificity bump: customCss loads BEFORE Starlight's component-scoped CSS,
 * and Starlight's rule has specificity (0,2,0) via its scoped class. We use
 * a doubled attribute selector + html prefix for (0,2,1) to override.
 */
html [aria-current='page'][aria-current='page'],
html [aria-current='page'][aria-current='page']:hover,
html [aria-current='page'][aria-current='page']:focus {
  background-color: var(--anhh-primary);
  color: #ffffff;
}