headplane/docs/app/app.css

@import "tailwindcss";
@import "fumadocs-ui/css/preset.css";
@import "../../app/tokens.css";

@theme {
  --font-sans: "Inter Variable", -apple-system, BlinkMacSystemFont, sans-serif;
}

@theme inline {
  --color-fd-background: var(--hp-canvas);
  --color-fd-foreground: var(--hp-fg);
  --color-fd-muted: var(--hp-subtle);
  --color-fd-muted-foreground: var(--hp-muted);
  --color-fd-popover: var(--hp-raised);
  --color-fd-popover-foreground: var(--hp-fg);
  --color-fd-card: var(--hp-surface);
  --color-fd-card-foreground: var(--hp-fg);
  --color-fd-border: var(--hp-line);
  --color-fd-primary: var(--hp-ink);
  --color-fd-primary-foreground: var(--hp-ink-fg);
  --color-fd-secondary: var(--hp-subtle);
  --color-fd-secondary-foreground: var(--hp-fg);
  --color-fd-accent: var(--hp-hover);
  --color-fd-accent-foreground: var(--hp-fg);
  --color-fd-ring: var(--hp-accent);
  --color-fd-overlay: var(--hp-backdrop);

  --color-fd-info: var(--hp-accent);
  --color-fd-warning: var(--hp-warn);
  --color-fd-error: var(--hp-bad);
  --color-fd-success: var(--hp-ok);
  --color-fd-idea: var(--hp-warn);
  --color-fd-diff-add: var(--hp-ok-subtle);
  --color-fd-diff-add-symbol: var(--hp-ok);
  --color-fd-diff-remove: var(--hp-bad-subtle);
  --color-fd-diff-remove-symbol: var(--hp-bad);
}

/* Fumadocs toggles `.dark` itself, so skip the app's system-preference fallback. */
html.dark {
  @apply dark-tokens;
}

body {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prose: app-style headings, accent links and the app's inline code chip. */
.prose {
  --tw-prose-body: var(--hp-fg);
  --tw-prose-headings: var(--hp-fg);
  --tw-prose-links: var(--hp-accent);
  --tw-prose-bold: var(--hp-fg);
  --tw-prose-code: var(--hp-fg);
  --tw-prose-bullets: var(--hp-faint);
  --tw-prose-counters: var(--hp-muted);
  --tw-prose-hr: var(--hp-line);
  --tw-prose-quotes: var(--hp-muted);
  --tw-prose-quote-borders: var(--hp-line-strong);
  --tw-prose-th-borders: var(--hp-line-strong);
  --tw-prose-td-borders: var(--hp-line);
}

.prose :where(h1, h2, h3, h4):not(:where(.not-prose *)) {
  overflow-wrap: anywhere;
}

.prose :where(h1):not(:where(.not-prose *)) {
  margin-bottom: 1rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prose :where(h2):not(:where(.not-prose *)) {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.prose :where(h3):not(:where(.not-prose *)) {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose :where(h4):not(:where(.not-prose *)) {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
}

.prose :where(a):not(:where(.not-prose *, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *)) {
  font-weight: inherit;
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklab, var(--hp-accent) 35%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.prose :where(a):not(:where(.not-prose *, h1 *, h2 *, h3 *, h4 *, h5 *, h6 *)):hover {
  text-decoration-color: var(--hp-accent);
}

.prose :where(code):not(:where(pre *, .not-prose *)) {
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--hp-line);
  border-radius: 0.25rem;
  background-color: var(--hp-subtle);
  font-size: 0.875em;
  font-weight: inherit;
  overflow-wrap: anywhere;
}

/* Unhighlighted languages wrap blank lines in an empty span, which Fumadocs' `.line:empty` misses. */
.shiki .line {
  min-height: 1lh;
}

/* Changelog: releases list tighter than prose. */
.release-notes > :first-child {
  margin-top: 0;
}

.release-notes > :last-child {
  margin-bottom: 0;
}

.release-section {
  margin-top: 2rem;
}

.release-section > :nth-child(2) {
  margin-top: 0.625rem;
}

.release-section > :last-child {
  margin-bottom: 0;
}

.release-notes :where(h3):not(:where(.not-prose *)) {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--hp-muted);
}

.release-notes :where(li) {
  margin-block: 0.375rem;
  line-height: 1.625;
}