/* Public docs use Empi's stable brand roles, not a signed-in user's palette. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --docs-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --docs-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --docs-screenshot-canvas: oklch(0.95 0.04 27);
  --docs-radius-sm: 5px;
  --docs-radius: 8px;
  --docs-radius-lg: 12px;
}

[data-md-color-scheme="default"] {
  --docs-brand: oklch(0.53 0.22 27);
  --docs-brand-text: oklch(0.50 0.22 27);
  --docs-brand-ink: oklch(0.97 0.01 27);
}

[data-md-color-scheme="slate"] {
  --docs-brand: oklch(0.66 0.22 27);
  --docs-brand-text: oklch(0.70 0.22 27);
  --docs-brand-ink: oklch(0.16 0.01 27);
}

body {
  --md-text-font: var(--docs-font);
  --md-code-font: var(--docs-mono);
  --md-primary-fg-color: var(--docs-brand-text);
  --md-accent-fg-color: var(--docs-brand-text);
  font-family: var(--docs-font);
}

code,
kbd,
pre {
  font-family: var(--docs-mono);
}

/* The locale-local home sheet defines structure. Brand and component roles live
   here so every locale, including pages without the home composition, agrees. */
.empi-home {
  --empi-soft: color-mix(in oklch, var(--docs-brand) 12%, var(--md-default-bg-color));
}

.empi-kicker,
.empi-accent,
.empi-card__icon {
  color: var(--docs-brand-text);
}

.empi-btn {
  border-radius: var(--docs-radius);
}

.empi-btn--primary {
  color: var(--docs-brand-ink) !important;
  background: var(--docs-brand);
}

.empi-btn--primary:hover {
  background: color-mix(in oklch, var(--docs-brand) 88%, var(--md-default-fg-color));
}

.empi-btn--ghost:hover,
.empi-card:hover {
  border-color: var(--docs-brand-text);
  color: var(--docs-brand-text) !important;
}

.empi-btn:focus-visible {
  outline-color: var(--docs-brand-text);
}

.empi-window,
.empi-card {
  border-radius: var(--docs-radius-lg);
}

.empi-loop__num {
  color: var(--docs-brand-ink);
  background: var(--docs-brand);
}

/* Product captures sit on the same quiet pink canvas used by the documentation. */
.md-typeset .empi-doc-shot {
  max-width: 38rem;
  margin: 1rem 0 1.5rem;
  padding: clamp(0.625rem, 1vw, 0.875rem);
  overflow: hidden;
  border-radius: var(--docs-radius-lg);
  background: var(--docs-screenshot-canvas);
}

.md-typeset .empi-doc-shot--compact { max-width: 28rem; }

.md-typeset .empi-doc-shot img {
  display: block;
  width: 100%;
  margin: 0;
  border-radius: var(--docs-radius);
}