@import 'tailwindcss';
@import 'fumadocs-ui/css/preset.css';

/* ── Treeship color tokens ─────────────────────────────── */
@theme {
  --color-treeship-green: #4ade80;
  --color-treeship-green-dim: rgba(74, 222, 128, 0.08);
  --color-treeship-green-border: rgba(74, 222, 128, 0.2);
  --color-treeship-green-code: rgba(74, 222, 128, 0.09);
  --color-treeship-text: #ededed;
  --color-treeship-muted: #999999;

  --color-fd-background: #0a0f0a;
  --color-fd-foreground: #ededed;
  --color-fd-muted: #1a1f1a;
  --color-fd-muted-foreground: #999999;
  --color-fd-popover: #111611;
  --color-fd-popover-foreground: #ededed;
  --color-fd-card: #111611;
  --color-fd-card-foreground: #ededed;
  --color-fd-border: rgba(255, 255, 255, 0.08);
  --color-fd-primary: #4ade80;
  --color-fd-primary-foreground: #0a0f0a;
  --color-fd-secondary: #1a1f1a;
  --color-fd-secondary-foreground: #ededed;
  --color-fd-accent: rgba(74, 222, 128, 0.12);
  --color-fd-accent-foreground: #ededed;
  --color-fd-ring: #4ade80;

  --font-sans: 'Geist', system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
}

/* ── Force dark mode ───────────────────────────────────── */
.dark {
  --color-fd-background: #0a0f0a;
  --color-fd-foreground: #ededed;
  --color-fd-muted: #1a1f1a;
  --color-fd-muted-foreground: #999999;
  --color-fd-popover: #111611;
  --color-fd-popover-foreground: #ededed;
  --color-fd-card: #111611;
  --color-fd-card-foreground: #ededed;
  --color-fd-border: rgba(255, 255, 255, 0.08);
  --color-fd-primary: #4ade80;
  --color-fd-primary-foreground: #0a0f0a;
  --color-fd-secondary: #1a1f1a;
  --color-fd-secondary-foreground: #ededed;
  --color-fd-accent: rgba(74, 222, 128, 0.12);
  --color-fd-accent-foreground: #ededed;
  --color-fd-ring: #4ade80;
}

html {
  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────── */
@layer base {
  body {
    @apply flex flex-col min-h-screen;
  }
}

/* ── Headings ──────────────────────────────────────────── */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: var(--color-treeship-text);
  font-weight: 500;
}

.prose h2 {
  border-bottom: 1px solid var(--color-treeship-green-border);
  padding-bottom: 0.4em;
}

/* ── Links ─────────────────────────────────────────────── */
.prose a {
  color: var(--color-treeship-green);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.prose a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ── Code blocks (Mintlify-style) ─────────────────────── */
pre {
  background: #1e1e1e !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 1.2em 1.4em !important;
}

pre code {
  color: #d4d4d4 !important;
  font-size: 0.875rem;
  line-height: 1.75;
  font-family: var(--font-mono);
}

/* Code block copy button area */
pre:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

/* ── Inline code (Mintlify-style) ─────────────────────── */
:not(pre) > code {
  background: rgba(255, 255, 255, 0.06);
  color: #e8e8e8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.84em;
}

/* ── Blockquotes ───────────────────────────────────────── */
blockquote {
  border-left: 3px solid var(--color-treeship-green);
  padding-left: 1em;
  color: var(--color-treeship-muted);
  font-style: normal;
}

/* ── Active sidebar link ───────────────────────────────── */
[data-active='true'] {
  color: var(--color-treeship-green) !important;
  background: var(--color-treeship-green-dim);
  border-radius: 6px;
}

/* ── Sidebar install banner ────────────────────────────── */
.sidebar-install-banner {
  background: var(--color-treeship-green-dim);
  border: 0.5px solid var(--color-treeship-green-border);
}

/* ── Tables ────────────────────────────────────────────── */
.prose table th {
  color: var(--color-treeship-text);
  font-weight: 500;
}
