/**
 * MeowKit Design System — VitePress Theme
 *
 * Architecture: 3-layer token system
 *   Layer 1: Brand primitives (:root) — from meowkit-design-guideline.md
 *   Layer 2: Light theme tokens (html:not(.dark))
 *   Layer 3: Dark theme tokens (.dark)
 *   Layer 4: Component overrides — reference tokens, not raw hex
 *
 * Source of truth: docs/design/design-tokens.json
 */

/* ================================================================== */
/*  LAYER 1: Brand Primitives (theme-independent)                      */
/* ================================================================== */

:root {
  /* Royal Blue — brand primary. #2563EB is the /meow slash blue. */
  --mk-blue-50: #EFF6FF;
  --mk-blue-100: #DBEAFE;
  --mk-blue-200: #BFDBFE;
  --mk-blue-300: #93C5FD;
  --mk-blue-400: #60A5FA;
  --mk-blue-500: #3B82F6;
  --mk-blue-600: #2563EB; /* brand primary */
  --mk-blue-700: #1D4ED8;
  --mk-blue-800: #1E40AF;
  --mk-blue-900: #1E3A5F; /* "deep space" — dark-mode surface accent */

  /* Accent — lighter brand glow for dark-mode highlights */
  --mk-accent-glow: #60A5FA;
  --mk-accent-soft: #93C5FD;

  /* Neutrals — slate-family, aligns with Tailwind slate */
  --mk-neutral-0: #FFFFFF;
  --mk-neutral-50: #F8FAFC;
  --mk-neutral-100: #E2E8F0;
  --mk-neutral-200: #CBD5E1;
  --mk-neutral-300: #94A3B8;
  --mk-neutral-500: #64748B;
  --mk-neutral-700: #334155;
  --mk-neutral-800: #1E293B;
  --mk-neutral-900: #0F172A;
  --mk-neutral-950: #05070A; /* true "deep-space black" */

  /* Semantic */
  --mk-success: #12B76A;
  --mk-warning: #F79009;
  --mk-danger: #F04438;
  --mk-info: #2563EB;

  /* Brand gradients */
  --mk-gradient-brand: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
  --mk-gradient-space: radial-gradient(circle at 30% 20%, #1E3A5F 0%, #05070A 70%);

  /* Typography */
  --mk-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-font-mono: 'Fira Code', 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing — 4-based scale */
  --mk-space-0: 0;
  --mk-space-1: 4px;
  --mk-space-2: 8px;
  --mk-space-3: 12px;
  --mk-space-4: 16px;
  --mk-space-5: 20px;
  --mk-space-6: 24px;
  --mk-space-8: 32px;
  --mk-space-10: 40px;
  --mk-space-12: 48px;
  --mk-space-16: 64px;
  --mk-space-20: 80px;

  /* Radii */
  --mk-radius-xs: 4px;
  --mk-radius-sm: 6px;
  --mk-radius-md: 10px;
  --mk-radius-lg: 16px;
  --mk-radius-xl: 24px;
  --mk-radius-pill: 9999px;

  /* Shadows */
  --mk-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
  --mk-shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --mk-shadow-lift: 0 8px 24px rgba(15, 23, 42, 0.10);
  --mk-shadow-glow: 0 0 20px rgba(37, 99, 235, 0.35);
  --mk-shadow-glow-strong: 0 0 40px rgba(37, 99, 235, 0.55);
  --mk-shadow-inset-glow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);

  /* Motion */
  --mk-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mk-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mk-dur-fast: 150ms;
  --mk-dur-normal: 250ms;
  --mk-dur-slow: 400ms;
  --mk-transition-fast: var(--mk-dur-fast) var(--mk-ease-out);
  --mk-transition-normal: var(--mk-dur-normal) var(--mk-ease-out);
}

/* ================================================================== */
/*  LAYER 2: Light Theme                                               */
/* ================================================================== */

html:not(.dark) {
  /* Brand → VitePress slots */
  --vp-c-brand-1: var(--mk-blue-600);
  --vp-c-brand-2: var(--mk-blue-700);
  --vp-c-brand-3: var(--mk-blue-600);
  --vp-c-brand-soft: rgba(37, 99, 235, 0.08);

  /* Backgrounds */
  --mk-bg-base: var(--mk-neutral-50);
  --mk-bg-surface: var(--mk-neutral-0);
  --mk-bg-soft: #F1F5F9;
  --vp-c-bg: var(--mk-bg-base);
  --vp-c-bg-alt: var(--mk-bg-surface);
  --vp-c-bg-elv: var(--mk-bg-surface);
  --vp-c-bg-soft: var(--mk-bg-soft);

  /* Text — primary uses neutral-950 for true "deep-space black" */
  --mk-text-primary: var(--mk-neutral-950);
  --mk-text-secondary: var(--mk-neutral-500);
  --mk-text-subtle: var(--mk-neutral-300);
  --vp-c-text-1: var(--mk-text-primary);
  --vp-c-text-2: var(--mk-text-secondary);
  --vp-c-text-3: var(--mk-text-subtle);

  /* Borders */
  --mk-border-subtle: var(--mk-neutral-100);
  --mk-border-strong: var(--mk-neutral-200);
  --vp-c-border: var(--mk-border-subtle);
  --vp-c-divider: var(--mk-border-subtle);
  --vp-c-gutter: var(--mk-bg-base);

  /* Interactive states */
  --mk-hover-bg: rgba(37, 99, 235, 0.06);
  --mk-active-bg: rgba(37, 99, 235, 0.12);

  /* Component overrides */
  --vp-sidebar-bg-color: var(--mk-bg-surface);
  --vp-nav-bg-color: rgba(245, 247, 250, 0.85);
  --vp-code-block-bg: var(--mk-bg-soft);
  --vp-code-line-highlight-color: rgba(37, 99, 235, 0.06);
  --vp-code-tab-active-bar-color: var(--mk-blue-600);

  /* Callout blocks */
  --vp-custom-block-tip-border: var(--mk-blue-600);
  --vp-custom-block-tip-text: var(--mk-blue-700);
  --vp-custom-block-tip-bg: rgba(37, 99, 235, 0.06);
  --vp-custom-block-info-border: var(--mk-accent-glow);
  --vp-custom-block-info-text: var(--mk-blue-700);
  --vp-custom-block-info-bg: rgba(37, 99, 235, 0.08);
}

/* ================================================================== */
/*  LAYER 3: Dark Theme                                                */
/* ================================================================== */

.dark {
  /* Brand → VitePress slots */
  --vp-c-brand-1: var(--mk-accent-glow);
  --vp-c-brand-2: var(--mk-accent-soft);
  --vp-c-brand-3: var(--mk-accent-glow);
  --vp-c-brand-soft: rgba(37, 99, 235, 0.14);

  /* Backgrounds — blue-tinted slate palette (comfortable reading) */
  --mk-bg-base: var(--mk-neutral-900);   /* #0F172A */
  --mk-bg-surface: var(--mk-neutral-800); /* #1E293B */
  --mk-bg-soft: var(--mk-blue-900);       /* #1E3A5F — deep-space blue */
  --vp-c-bg: var(--mk-bg-base);
  --vp-c-bg-alt: var(--mk-bg-surface);
  --vp-c-bg-elv: var(--mk-bg-surface);
  --vp-c-bg-soft: var(--mk-bg-soft);

  /* Text — from design tokens: primary #F8FAFC, secondary #94A3B8 */
  --mk-text-primary: #F8FAFC;
  --mk-text-secondary: #94A3B8;
  --mk-text-subtle: #64748B;
  --vp-c-text-1: var(--mk-text-primary);
  --vp-c-text-2: var(--mk-text-secondary);
  --vp-c-text-3: var(--mk-text-subtle);

  /* Borders — from design tokens: border rgba(255,255,255,0.05) */
  --mk-border-subtle: rgba(255, 255, 255, 0.08);
  --mk-border-strong: rgba(255, 255, 255, 0.15);
  --vp-c-border: var(--mk-border-subtle);
  --vp-c-divider: var(--mk-border-subtle);
  --vp-c-gutter: var(--mk-bg-base);

  /* Interactive states */
  --mk-hover-bg: rgba(37, 99, 235, 0.15);
  --mk-active-bg: rgba(37, 99, 235, 0.25);

  /* Component overrides */
  --vp-sidebar-bg-color: var(--mk-bg-base);
  --vp-nav-bg-color: rgba(15, 23, 42, 0.85);
  --vp-code-block-bg: var(--mk-bg-surface);
  --vp-code-line-highlight-color: rgba(37, 99, 235, 0.10);
  --vp-code-tab-active-bar-color: var(--mk-accent-glow);

  /* Callout blocks */
  --vp-custom-block-tip-border: var(--mk-accent-glow);
  --vp-custom-block-tip-text: var(--mk-accent-glow);
  --vp-custom-block-tip-bg: rgba(37, 99, 235, 0.08);
  --vp-custom-block-info-border: var(--mk-blue-300);
  --vp-custom-block-info-text: var(--mk-blue-300);
  --vp-custom-block-info-bg: rgba(37, 99, 235, 0.06);
}

/* ================================================================== */
/*  LAYER 4: Component Overrides                                       */
/* ================================================================== */

/* — Hero Section — */

.VPHero .name {
  background: var(--mk-gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.VPHero .text {
  color: var(--vp-c-text-1);
}

.VPHero .tagline {
  color: var(--vp-c-text-2);
}

.VPHero .action .VPButton.brand {
  background: var(--mk-gradient-brand);
  border: none;
  color: #FFFFFF;
  font-weight: 600;
  transition: opacity var(--mk-transition-fast);
}

.VPHero .action .VPButton.brand:hover {
  opacity: 0.9;
}

.VPHero .action .VPButton.alt {
  border-color: var(--mk-blue-600);
  color: var(--mk-blue-600);
  transition: background var(--mk-transition-fast), color var(--mk-transition-fast);
}

.dark .VPHero .action .VPButton.alt {
  border-color: var(--mk-accent-glow);
  color: var(--mk-accent-glow);
}

.VPHero .action .VPButton.alt:hover {
  background: var(--mk-hover-bg);
}

/* — Feature Cards — */

.VPFeature {
  background-color: var(--mk-bg-surface);
  border: 1px solid var(--mk-border-subtle);
  transition: border-color var(--mk-transition-normal);
}

.dark .VPFeature:hover {
  border-color: rgba(37, 99, 235, 0.40);
}

html:not(.dark) .VPFeature:hover {
  border-color: rgba(37, 99, 235, 0.40);
}

.dark .VPFeature .title {
  color: var(--mk-accent-glow);
}

html:not(.dark) .VPFeature .title {
  color: var(--mk-blue-600);
}

/* — Sidebar — */

.dark .VPSidebar .VPSidebarItem.is-active > .item > .link > .text {
  color: var(--mk-accent-glow);
}

.dark .VPSidebar .VPSidebarItem.is-active > .item > .indicator {
  background-color: var(--mk-accent-glow);
}

html:not(.dark) .VPSidebar .VPSidebarItem.is-active > .item > .link > .text {
  color: var(--mk-blue-600);
}

html:not(.dark) .VPSidebar .VPSidebarItem.is-active > .item > .indicator {
  background-color: var(--mk-blue-600);
}

/* — Nav Links — */

.dark .VPNavBarMenuLink:hover .text,
.dark .VPNavBarMenuLink.active .text {
  color: var(--mk-accent-glow);
}

html:not(.dark) .VPNavBarMenuLink:hover .text,
html:not(.dark) .VPNavBarMenuLink.active .text {
  color: var(--mk-blue-600);
}

/* — Inline Code — */

.dark :not(pre) > code {
  background-color: rgba(37, 99, 235, 0.10);
  color: var(--mk-accent-glow);
}

html:not(.dark) :not(pre) > code {
  background-color: rgba(37, 99, 235, 0.06);
  color: var(--mk-blue-700);
}

/* — Tables — */

.vp-doc table {
  border-collapse: collapse;
}

.dark .vp-doc th {
  background-color: var(--mk-bg-base);
  color: var(--mk-accent-glow);
  border-bottom: 2px solid var(--mk-border-subtle);
}

.dark .vp-doc tr:nth-child(even) td {
  background-color: rgba(30, 41, 59, 0.60);
}

html:not(.dark) .vp-doc th {
  background-color: var(--mk-bg-soft);
  color: var(--mk-text-primary);
  border-bottom: 2px solid var(--mk-border-subtle);
}

html:not(.dark) .vp-doc tr:nth-child(even) td {
  background-color: var(--mk-bg-base);
}

/* — Badges — */

.dark .VPBadge.tip {
  background-color: rgba(37, 99, 235, 0.14);
  color: var(--mk-accent-glow);
}

.dark .VPBadge.warning {
  background-color: rgba(247, 144, 9, 0.12);
  color: var(--mk-warning);
}

html:not(.dark) .VPBadge.tip {
  background-color: rgba(37, 99, 235, 0.08);
  color: var(--mk-blue-700);
}

html:not(.dark) .VPBadge.warning {
  background-color: rgba(247, 144, 9, 0.08);
  color: #B45309;
}

/* — Scrollbar (dark) — */

.dark ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--mk-bg-base);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--mk-border-strong);
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--mk-accent-glow);
}

/* — Search — */

.dark .DocSearch-Button {
  border-color: var(--mk-border-subtle);
  background-color: var(--mk-bg-surface);
}

.dark .DocSearch-Button:hover {
  border-color: var(--mk-accent-glow);
}

/* — Links — */

.dark .vp-doc a {
  color: var(--mk-accent-glow);
}

.dark .vp-doc a:hover {
  color: var(--mk-accent-soft);
}

html:not(.dark) .vp-doc a {
  color: var(--mk-blue-600);
}

html:not(.dark) .vp-doc a:hover {
  color: var(--mk-blue-500);
}
