/*
  Prisma Design System — Docs UI
  ─────────────────────────────────
  Premium documentation site. Fully token-driven.
  Mobile-first responsive. Smooth animations.
*/

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

/* ─── Custom Properties (docs-only) ─── */
:root {
  --docs-font-sans: 'Google Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --docs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;
  --docs-sidebar-width: 272px;
  --docs-topbar-height: 52px;
  --docs-content-max-width: 1200px;
  --docs-preview-min-width: 390px;
  /* Mobile viewport: iPhone 14/15 */
  --docs-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ─── Token Alias Bridge ─── */
  /* Maps shadcn-style names → Tailwind v4 computed values (base unit .25rem = 4px) */

  /* Spacing scale */
  --spacing-px: 1px;
  --spacing-0-5: calc(var(--spacing, .25rem) * 0.5);
  --spacing-0-75: calc(var(--spacing, .25rem) * 0.75);
  --spacing-1: calc(var(--spacing, .25rem) * 1);
  --spacing-1-5: calc(var(--spacing, .25rem) * 1.5);
  --spacing-2: calc(var(--spacing, .25rem) * 2);
  --spacing-2-5: calc(var(--spacing, .25rem) * 2.5);
  --spacing-3: calc(var(--spacing, .25rem) * 3);
  --spacing-3-5: calc(var(--spacing, .25rem) * 3.5);
  --spacing-4: calc(var(--spacing, .25rem) * 4);
  --spacing-4-5: calc(var(--spacing, .25rem) * 4.5);
  --spacing-5: calc(var(--spacing, .25rem) * 5);
  --spacing-6: calc(var(--spacing, .25rem) * 6);
  --spacing-8: calc(var(--spacing, .25rem) * 8);
  --spacing-8-5: calc(var(--spacing, .25rem) * 8.5);
  --spacing-9: calc(var(--spacing, .25rem) * 9);
  --spacing-10: calc(var(--spacing, .25rem) * 10);
  --spacing-12: calc(var(--spacing, .25rem) * 12);
  --spacing-48: calc(var(--spacing, .25rem) * 48);

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-3xl: 1.875rem;

  /* Line heights */
  --font-leading-4: 1rem;
  --font-leading-5: 1.25rem;
  --font-leading-6: 1.5rem;
  --font-leading-ratio-none: 1;
  --font-leading-ratio-tight: 1.25;
  --font-leading-ratio-normal: 1.5;
  --font-leading-ratio-relaxed: 1.625;
  --font-leading-ratio-loose: 1.75;

  /* Letter spacing */
  --font-tracking-tight: -0.025em;
  --font-tracking-normal: 0em;
  --font-tracking-wide: 0.025em;
  --font-tracking-wider: 0.05em;

  /* Border width */
  --border-width-1: 1px;

  /* Radius (supplement — radius-full not in prisma.css) */
  --radius-full: 9999px;

  /* Opacity */
  --opacity-40: 0.4;

  /* Max widths */
  --size-max-width-xl: 80rem;
  --size-max-width-2xl: 96rem;

  /* Sizing scale (N × 4px — component dimensions: buttons, inputs, switches) */
  --size-min-width-0: 0;
  --size-min-width-1: 4px;
  --size-min-width-2: 8px;
  --size-min-width-3: 12px;
  --size-min-width-4: 16px;
  --size-min-width-5: 20px;
  --size-min-width-6: 24px;
  --size-min-width-7: 28px;
  --size-min-width-8: 32px;
  --size-min-width-9: 36px;
  --size-min-width-10: 40px;
  --size-min-width-11: 44px;
  --size-min-width-12: 48px;
  --size-min-width-14: 56px;
  --size-min-width-16: 64px;
}

/* ─── Reset ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--docs-font-sans);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-6);
  color: var(--foreground);
  background-color: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ─── Skip to Content Link (WCAG 2.4.1) ─── */
.skip-link {
  position: absolute;
  top: calc(-1 * var(--spacing-12));
  left: var(--spacing-4);
  z-index: var(--z-index-spotlight);
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: var(--spacing-4);
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ─── Layout ─── */
.site-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ═══════════════════════════════════════
   MOBILE TOPBAR
   ═══════════════════════════════════════ */
.mobile-topbar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--docs-topbar-height);
  background: var(--background);
  border-bottom: var(--border-width-1) solid var(--border);
  z-index: var(--z-index-sticky);
  padding: 0 var(--spacing-4);
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mobile-menu-btn,
.mobile-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-9);
  height: var(--spacing-9);
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--docs-transition);
}

.mobile-menu-btn:hover,
.mobile-theme-btn:hover {
  background: var(--muted);
}

.mobile-menu-btn .icon-menu,
.mobile-menu-btn .icon-close {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.mobile-menu-btn .icon-close {
  display: none;
}

body.menu-open .mobile-menu-btn .icon-menu {
  display: none;
}

body.menu-open .mobile-menu-btn .icon-close {
  display: block;
}

.mobile-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--foreground);
}

.brand-icon {
  width: calc(var(--spacing, .25rem) * 4.5);
  height: calc(var(--spacing, .25rem) * 4.5);
  color: var(--primary);
}

/* Footer */
.footer-heart {
  width: calc(var(--spacing, .25rem) * 3);
  height: calc(var(--spacing, .25rem) * 3);
  display: inline-block;
  vertical-align: -1px;
  color: var(--destructive);
}

/* Theme icons on mobile topbar */
.mobile-theme-btn .icon-light-m,
.mobile-theme-btn .icon-dark-m {
  width: var(--spacing-4);
  height: var(--spacing-4);
}

[data-theme="dark"] .mobile-theme-btn .icon-dark-m {
  display: none;
}

:not([data-theme="dark"]) .mobile-theme-btn .icon-light-m {
  display: none;
}

[data-theme="dark"] .mobile-theme-btn .icon-light-m {
  display: block;
}

:not([data-theme="dark"]) .mobile-theme-btn .icon-dark-m {
  display: block;
}

/* ─── Overlay ─── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  z-index: var(--z-index-overlay);
  opacity: 0;
  transition: opacity 300ms ease;
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

/* ═══════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════ */
.site-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--docs-sidebar-width);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background);
  border-right: var(--border-width-1) solid var(--border);
  z-index: var(--z-index-modal);
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sidebar Header */
.sidebar-header {
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-2);
  flex-shrink: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-2);
  border-radius: var(--radius-lg);
  transition: background var(--docs-transition);
}

.brand:hover {
  background: var(--muted);
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--primary-foreground);
  flex-shrink: 0;
}

.brand-logo svg {
  width: var(--spacing-4-5);
  height: var(--spacing-4-5);
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: var(--font-leading-4);
}

.brand-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.brand-version {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  letter-spacing: var(--font-tracking-normal);
}

/* Sidebar Search */
.sidebar-search {
  padding: var(--spacing-2) var(--spacing-4);
  flex-shrink: 0;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: var(--spacing-2-5);
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  color: var(--muted-foreground);
  pointer-events: none;
}

.search-input {
  width: 100%;
  height: var(--spacing-8-5);
  padding: 0 var(--spacing-9) 0 var(--spacing-8);
  background: var(--muted);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--docs-font-sans);
  font-size: var(--font-size-sm);
  color: var(--foreground);
  transition: all var(--docs-transition);
}

.search-input::placeholder {
  color: var(--muted-foreground);
}

.search-input:focus {
  border-color: var(--border);
  background: var(--background);
  outline: none;
}

.search-input:focus-visible {
  border-color: var(--border);
  background: var(--background);
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.search-kbd {
  position: absolute;
  right: var(--spacing-2);
  padding: var(--spacing-px) var(--spacing-1-5);
  background: var(--background);
  border: var(--border-width-1) solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--docs-font-sans);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  line-height: var(--font-leading-ratio-normal);
  pointer-events: none;
}

/* Nav Tree */
.nav-tree {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-2) var(--spacing-3);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.nav-tree::-webkit-scrollbar {
  width: var(--spacing-1);
}

.nav-tree::-webkit-scrollbar-track {
  background: transparent;
}

.nav-tree::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

/* Nav groups — collapsible */
.nav-group {
  margin-bottom: var(--spacing-1);
}

.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-2);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background var(--docs-transition);
  user-select: none;
}

.nav-group-header:hover {
  background: var(--muted);
}

.nav-group-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  letter-spacing: var(--font-tracking-wide);
}

.nav-group-chevron {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  color: var(--muted-foreground);
  transition: transform 200ms ease;
  flex-shrink: 0;
}

.nav-group.expanded .nav-group-chevron {
  transform: rotate(90deg);
}

.nav-group-links {
  display: none;
  padding: var(--spacing-1) 0 var(--spacing-2);
}

.nav-group.expanded .nav-group-links {
  display: block;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: var(--spacing-1-5) var(--spacing-2) var(--spacing-1-5) var(--spacing-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--muted-foreground);
  border-radius: var(--radius-md);
  transition: all var(--docs-transition);
  margin-bottom: var(--spacing-px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.nav-link:hover {
  background: var(--muted);
  color: var(--foreground);
}

.nav-link.active {
  background: var(--primary-muted);
  color: var(--primary);
  font-weight: var(--font-weight-medium);
}

.nav-link.active::before {
  content: '';
  position: absolute;
  left: var(--spacing-2);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-0-75);
  height: var(--spacing-4);
  border-radius: var(--radius-sm);
  background: var(--primary);
}

/* Sub-category labels inside Components group */
.nav-sub-label {
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-widest, 0.1em);
  padding: var(--spacing-2-5) var(--spacing-2) var(--spacing-1) var(--spacing-5);
  opacity: 0.7;
  margin-top: var(--spacing-1);
}

.nav-sub-label:first-child {
  margin-top: 0;
}

/* Search Empty State */
.nav-empty {
  padding: var(--spacing-6) var(--spacing-4);
  text-align: center;
}

.nav-empty p {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  margin: 0;
}

/* Sidebar Footer */
.sidebar-footer {
  flex-shrink: 0;
  padding: var(--spacing-3) var(--spacing-4);
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-2) var(--spacing-2);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--docs-font-sans);
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  transition: all var(--docs-transition);
}

.theme-toggle-btn:hover {
  background: var(--muted);
  color: var(--foreground);
}

.theme-toggle-btn .icon-light,
.theme-toggle-btn .icon-dark {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
  flex-shrink: 0;
}

/* Theme icon visibility */
[data-theme="dark"] .icon-light {
  display: none;
}

[data-theme="dark"] .icon-dark {
  display: block;
}

:not([data-theme="dark"]) .icon-light {
  display: block;
}

:not([data-theme="dark"]) .icon-dark {
  display: none;
}

/* ═══════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════ */
.site-main {
  flex: 1;
  margin-left: var(--docs-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

/* Breadcrumb — sits above the card */
.breadcrumb {
  padding: var(--spacing-3) var(--spacing-8);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  background: var(--background);
}

.breadcrumb a {
  color: var(--muted-foreground);
  transition: color 150ms ease;
}

.breadcrumb a:hover {
  color: var(--foreground);
}

.breadcrumb .bc-sep {
  color: var(--border);
  margin: 0 var(--spacing-1);
}

.breadcrumb .bc-current {
  color: var(--foreground);
  font-weight: var(--font-weight-medium);
}

/* Content Card — wraps header + content + footer */
.content-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: var(--spacing-5);
  background: var(--background);
  border: var(--border-width-1) solid var(--border);
  border-radius: var(--radius-xl, 16px);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* Dark mode: boost card visibility */
[data-theme="dark"] .content-card {
  border-color: var(--color-zinc-700, #3f3f46);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* Page Header — inside the card */
.page-header {
  padding: var(--spacing-8) var(--spacing-8) var(--spacing-6);
  max-width: var(--docs-content-max-width);
}

.page-title {
  font-size: var(--text-style-heading-1-font-size, 2rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-ratio-tight);
  letter-spacing: var(--font-tracking-tight);
  color: var(--foreground);
  margin: 0 0 var(--spacing-2) 0;
}

.page-description {
  font-size: var(--font-size-base);
  color: var(--muted-foreground);
  margin: 0;
  line-height: var(--font-leading-6);
  max-width: var(--size-max-width-2xl);
}

/* Page Content — inside the card */
.page-content {
  flex: 1;
  padding: 0 var(--spacing-8) var(--spacing-8);
  max-width: var(--docs-content-max-width);
}

/* Headings — no border inside card (D6: card boundary is enough) */
.page-content h2 {
  font-size: var(--text-style-heading-2-font-size, 1.5rem);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-5);
  letter-spacing: var(--font-tracking-tight);
  color: var(--foreground);
  margin-top: var(--spacing-12, 3rem);
  margin-bottom: var(--spacing-4);
  padding-top: var(--spacing-4);
}

.page-content h2:first-child {
  margin-top: 0;
}

.page-content h3 {
  font-size: var(--text-style-heading-3-font-size, 1.25rem);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-3);
}

.page-content h4:not(.card-title) {
  font-size: var(--text-style-heading-4-font-size, 1rem);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
  margin-top: var(--spacing-6);
  margin-bottom: var(--spacing-2);
}


/* Prose */
.page-content p:not(.card-text) {
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-ratio-loose);
  color: var(--muted-foreground);
  margin: 0 0 var(--spacing-4);
}

.page-content ul,
.page-content ol {
  padding-left: var(--spacing-6);
  margin: 0 0 var(--spacing-4);
}

.page-content li {
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  margin-bottom: var(--spacing-2);
  line-height: var(--font-leading-ratio-loose);
}

.page-content strong {
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.page-content a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--primary-muted, rgba(0, 0, 0, 0.15));
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}

.page-content a:hover {
  text-decoration-color: var(--primary);
}

.page-content blockquote {
  border-left: 3px solid var(--primary);
  margin: 0 0 var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--primary-muted, rgba(0, 0, 0, 0.03));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.page-content blockquote p {
  color: var(--foreground);
  margin: 0;
}

.page-content hr {
  border: none;
  border-top: var(--border-width-1) solid var(--border);
  margin: var(--spacing-8) 0;
}

/* Inline Code */
.page-content code,
code {
  font-family: var(--docs-font-mono);
  font-size: 0.85em;
  background: var(--muted);
  color: var(--foreground);
  padding: var(--spacing-0-5) var(--spacing-1-5);
  border-radius: var(--radius-sm, 4px);
  border: var(--border-width-1) solid var(--border);
  word-break: break-word;
}

/* Code Blocks */
.code-block {
  margin: var(--spacing-4) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-width-1) solid var(--color-zinc-800, #27272a);
  background: var(--color-zinc-950, #09090b);
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2) var(--spacing-4);
  background: var(--color-zinc-900, #18181b);
  border-bottom: var(--border-width-1) solid var(--color-zinc-800, #27272a);
  font-family: var(--docs-font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-zinc-400, #a1a1aa);
}

.code-content {
  padding: var(--spacing-4);
  overflow-x: auto;
  font-family: var(--docs-font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-ratio-relaxed);
  color: var(--color-zinc-100, #f4f4f5);
  margin: 0;
}

.code-content code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.copy-btn {
  background: var(--color-zinc-800, #27272a);
  border: var(--border-width-1) solid var(--color-zinc-700, #3f3f46);
  color: var(--color-zinc-400, #a1a1aa);
  border-radius: var(--radius-md);
  padding: var(--spacing-1) var(--spacing-2-5);
  font-size: var(--font-size-xs);
  font-family: var(--docs-font-sans);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 150ms ease;
}

.copy-btn:hover {
  background: var(--color-zinc-700, #3f3f46);
  color: var(--color-zinc-100, #f4f4f5);
}

/* ═══════════════════════════════════════
   TABLES
   ═══════════════════════════════════════ */
.page-content table,
.token-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--spacing-4) 0 var(--spacing-6);
  font-size: var(--font-size-sm);
  background: var(--card);
  border: var(--border-width-1) solid var(--card-border, var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-content table th,
.page-content table td,
.token-table th,
.token-table td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--border-width-1) solid var(--border);
  text-align: left;
}

.page-content table th,
.token-table th {
  background: var(--canvas);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  letter-spacing: var(--font-tracking-normal);
}

.page-content table tr:last-child td,
.token-table tr:last-child td {
  border-bottom: none;
}

.page-content table tr:hover td,
.token-table tr:hover td {
  background: var(--muted);
}

.token-color-preview {
  display: inline-block;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border);
  vertical-align: middle;
  margin-right: var(--spacing-2);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   COMPONENT PREVIEW
   ═══════════════════════════════════════ */
.preview-container {
  margin: var(--spacing-4) 0 var(--spacing-6);
  border: var(--border-width-1) solid var(--card-border, var(--border));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card);
}

.preview-header {
  padding: var(--spacing-2) var(--spacing-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--canvas);
}

.preview-header span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-wider);
}

.preview-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  min-height: var(--spacing-48, 200px);
  min-width: var(--docs-preview-min-width);
  padding: var(--spacing-8);
  background: var(--card);
  background-image: radial-gradient(var(--border) 1px, transparent 0);
  background-size: var(--spacing-6) var(--spacing-6);
  overflow-x: auto;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.page-footer {
  padding: var(--spacing-6) var(--spacing-8);
  margin-top: auto;
  background: var(--muted);
  border-radius: 0 0 var(--radius-xl, 16px) var(--radius-xl, 16px);
}

.footer-inner {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.footer-dot {
  opacity: calc(var(--opacity-40) / 100);
}

/* ═══════════════════════════════════════
   DOCS COMPONENTS (badges, callouts, etc)
   ═══════════════════════════════════════ */
.docs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  background: var(--muted);
  color: var(--muted-foreground);
}

.docs-badge.primary {
  background: var(--primary-muted);
  color: var(--primary);
  border-color: transparent;
}

.callout {
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  border: var(--border-width-1) solid var(--border);
  background: var(--muted);
  margin: var(--spacing-4) 0;
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
}

.callout.info {
  background: var(--info-muted, rgba(56, 189, 248, 0.08));
  border-color: var(--info, #38bdf8);
  color: var(--info-muted-foreground, #0ea5e9);
}

.callout.warning {
  background: var(--warning-muted, rgba(251, 191, 36, 0.08));
  border-color: var(--warning, #fbbf24);
  color: var(--warning-muted-foreground, #d97706);
}

/* ═══════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════ */

/* Hero */
.docs-hero {
  padding: var(--spacing-6) 0 var(--spacing-4);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full);
  background: var(--primary-muted, rgba(0, 0, 0, 0.05));
  color: var(--primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-4);
  letter-spacing: var(--font-tracking-wide);
}

.hero-eyebrow svg {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
}

.hero-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-ratio-none);
  letter-spacing: var(--font-tracking-tight);
  color: var(--foreground);
  margin: 0 0 var(--spacing-3);
}

.hero-highlight {
  background: linear-gradient(135deg, var(--primary), var(--info, #3b82f6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  color: var(--muted-foreground);
  max-width: var(--size-max-width-xl);
  line-height: var(--font-leading-ratio-relaxed);
  margin: 0;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-3);
  margin: var(--spacing-8) 0;
}

.stat-card {
  background: var(--card);
  border: var(--border-width-1) solid var(--card-border, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  transition: all 200ms ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--spacing-0-5);
  background: var(--primary);
  opacity: 0;
  transition: opacity 200ms ease;
}

.stat-card:hover {
  border-color: var(--primary-muted, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-9);
  height: var(--spacing-9);
  border-radius: var(--radius-md);
  background: var(--primary-muted, rgba(0, 0, 0, 0.04));
  color: var(--primary);
  margin-bottom: var(--spacing-3);
}

.stat-icon svg {
  width: var(--spacing-4-5);
  height: var(--spacing-4-5);
}

.stat-value {
  font-size: var(--font-size-3xl, 1.875rem);
  font-weight: var(--font-weight-bold);
  color: var(--foreground);
  line-height: var(--font-leading-ratio-none);
  letter-spacing: var(--font-tracking-tight);
}

.stat-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--muted-foreground);
  letter-spacing: var(--font-tracking-wide);
  margin-bottom: var(--spacing-1);
}

.stat-sub {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  margin-top: var(--spacing-1);
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spacing-3);
  margin: var(--spacing-2) 0 var(--spacing-8);
}

.gallery-card {
  background: var(--card);
  border: var(--border-width-1) solid var(--card-border, var(--border));
  border-radius: var(--radius-lg);
  padding: var(--spacing-5);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  transition: all 200ms ease;
  position: relative;
}

.gallery-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.gallery-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-10);
  height: var(--spacing-10);
  border-radius: var(--radius-md);
  background: var(--primary-muted, rgba(0, 0, 0, 0.04));
  color: var(--primary);
  margin-bottom: var(--spacing-1);
}

.gallery-card-icon svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.gallery-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--foreground);
}

.gallery-card-desc {
  font-size: var(--font-size-xs);
  color: var(--muted-foreground);
  line-height: var(--font-leading-ratio-normal);
}

.gallery-card-arrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--primary);
  margin-top: auto;
  padding-top: var(--spacing-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: all 200ms ease;
}

.gallery-card-arrow svg {
  width: var(--spacing-3-5);
  height: var(--spacing-3-5);
}

.gallery-card:hover .gallery-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-topbar {
    display: flex;
  }

  .site-sidebar {
    transform: translateX(-100%);
    top: 0;
    width: 280px;
  }

  .site-sidebar.open {
    transform: translateX(0);
  }

  .site-main {
    margin-left: 0;
    padding-top: var(--docs-topbar-height);
  }

  .breadcrumb {
    display: none;
  }

  .content-card {
    margin: var(--spacing-3);
    border-radius: var(--radius-lg, 12px);
  }

  .page-header {
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-4);
  }

  .page-content {
    padding: 0 var(--spacing-4) var(--spacing-6);
  }

  .page-footer {
    padding: var(--spacing-4);
  }

  .page-title {
    font-size: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .preview-display {
    padding: var(--spacing-4);
    min-height: 100px;
  }

  .search-kbd {
    display: none;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════
   FOCUS VISIBLE (WCAG 2.4.7)
   ═══════════════════════════════════════ */
.nav-link:focus-visible,
.nav-group-header:focus-visible,
.theme-toggle-btn:focus-visible,
.gallery-card:focus-visible,
.stat-card:focus-visible,
.breadcrumb a:focus-visible,
.mobile-menu-btn:focus-visible,
.mobile-theme-btn:focus-visible,
.copy-btn:focus-visible,
.brand:focus-visible {
  outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ═══════════════════════════════════════
   REDUCED MOTION (WCAG 2.3.1 / 2.3.3)
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}