@import "./tokens.css";

:root {
  --sl-color-accent: var(--sh-brand);
  --sl-color-accent-high: var(--sh-brand-2);
  --sl-color-accent-low: var(--sh-brand-deep);
  --sl-font: var(--sh-font-sans);
  --sl-font-mono: var(--sh-font-mono);
  --sl-text-h1: var(--sh-h2);
  --sl-text-h2: var(--sh-h3);
}

:root[data-theme="dark"],
:root {
  --sl-color-bg: var(--sh-charcoal);
  --sl-color-bg-nav: color-mix(in srgb, var(--sh-charcoal) 86%, transparent);
  --sl-color-bg-sidebar: var(--sh-charcoal-2);
  --sl-color-hairline: var(--sh-hairline);
  --sl-color-text: var(--sh-white);
  --sl-color-text-accent: var(--sl-color-accent-high);
}

:root[data-theme="light"] {
  --sl-color-bg: var(--sh-paper);
  --sl-color-bg-nav: color-mix(in srgb, var(--sh-paper) 90%, transparent);
  --sl-color-bg-sidebar: var(--sh-paper-2);
  --sl-color-hairline: var(--sh-hairline);
  --sl-color-text: var(--sh-ink);
  --sl-color-accent-low: var(--sh-brand-2);
}

.sl-markdown-content table {
  font-variant-numeric: tabular-nums;
}

.placeholder-pdf {
  display: grid;
  gap: var(--sh-space-2);
  padding: var(--card-pad);
  border: 1px dashed var(--sh-card-border);
  border-radius: var(--radius-card-md);
  background: var(--sh-card-bg);
}

.site-banner a {
  color: inherit;
}

.site-title img,
.sl-nav-logo img {
  height: var(--sh-logo-h);
  width: auto;
  max-width: 148px;
}