:root {
  --ink: #0F172A;
  --ink2: #475569;
  --muted: #94A3B8;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.12);
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --surface-3: rgba(15, 23, 42, 0.04);
  --accent: #7C3AED;
  --accent-strong: #6D28D9;
  --accent-top: #A78BFA;
  --accent-light: rgba(124, 58, 237, 0.10);
  --accent-mid: rgba(124, 58, 237, 0.16);
  --green: #16A34A;
  --green-light: rgba(22, 163, 74, 0.10);
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-panel: 0 20px 50px rgba(15, 23, 42, 0.10), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --serif: 'DM Sans', 'Inter Tight', 'Inter', sans-serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 18%, #F8FAFC 100%);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

nav {
  background: rgba(248, 250, 252, 0.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.nav-logo img {
  display: block;
}

.btn,
.btn-white {
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn-white:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-top) 0%, var(--accent) 55%, var(--accent-strong) 100%);
  box-shadow: var(--shadow-soft);
  color: #FFFFFF;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--border);
  color: var(--ink2);
  box-shadow: none;
}

.btn-white {
  background: #FFFFFF;
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
}

.hero,
.page-header,
.card,
.topic-link,
.mini-link,
.blog-cta,
.doc-nav,
.list-item,
.callout {
  background: var(--surface);
}

.page-header,
.hero,
.card,
.blog-cta,
.doc-nav,
.topic-link,
.mini-link,
.list-item,
.callout {
  border-color: var(--border);
}

.hero,
.page-header {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.hero {
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.10), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
}

.page-header-label,
.eyebrow,
.post-tag,
.post-header-tag,
.doc-nav-title {
  color: var(--accent);
}

.page-header h1,
.hero h1,
.card h2,
.section h2,
.blog-intro h2,
.blog-cta-copy h3,
.doc-section h2,
.post-cta h3,
.post-title {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: -0.03em;
}

.page-header-sub,
.hero-sub,
.card p,
.section p,
.blog-intro p,
.post-excerpt,
.doc-section p,
.doc-section li,
.doc-section .sub-item,
.doc-nav a,
.topic-link span,
.mini-link span,
.list-item span,
.blog-cta-copy p,
.post-meta-item,
.post-date,
.post-read,
.page-header-meta {
  color: var(--ink2);
}

.topic-link,
.mini-link,
.list-item,
.doc-nav,
.blog-cta,
.card,
.callout,
.post-cta {
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
}

.topic-link:hover,
.mini-link:hover,
.doc-nav a:hover,
.post-item:hover .post-title,
.post-breadcrumb a:hover,
.footer-links a:hover {
  color: var(--accent-strong);
}

.post-meta-dot {
  background: rgba(148, 163, 184, 0.6);
}

.post-tag,
.post-header-tag {
  background: var(--accent-light);
  border-radius: 999px;
}

.callout {
  border-left-color: var(--accent);
}

.post-cta,
.cta {
  background: linear-gradient(135deg, #171126 0%, #241642 45%, #4C1D95 100%);
  color: #FFFFFF;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.post-cta p,
.cta p {
  color: rgba(226, 232, 240, 0.82);
}

footer {
  background: #0F172A;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.footer-links a {
  color: rgba(226, 232, 240, 0.68);
}

.footer-copy {
  color: rgba(148, 163, 184, 0.72);
}

.doc-section ul li::before {
  color: var(--accent);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (max-width: 720px) {
  .btn,
  .btn-white {
    padding-inline: 18px;
  }

  .topic-link,
  .mini-link,
  .list-item,
  .doc-nav,
  .blog-cta,
  .card,
  .callout,
  .post-cta {
    border-radius: 20px;
  }
}