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

/* ═══════════════════════════════════════════════════
   Kitaru Brand Overrides
   Colors retained from the pre-migration Kitaru site palette
   ═══════════════════════════════════════════════════ */

@theme {
  --color-fd-background: #FAFAF8;
  --color-fd-foreground: #1A1714;
  --color-fd-muted: #F0EDE8;
  --color-fd-muted-foreground: #6B6560;
  --color-fd-popover: #FFFFFF;
  --color-fd-popover-foreground: #1A1714;
  --color-fd-card: #FCFCFA;
  --color-fd-card-foreground: #1A1714;
  --color-fd-border: #E5E2DC;
  --color-fd-primary: #F17829;
  --color-fd-primary-foreground: #FFFFFF;
  --color-fd-secondary: #FCFCFA;
  --color-fd-secondary-foreground: #6B6560;
  --color-fd-accent: #F5EDE4;
  --color-fd-accent-foreground: #1A1714;
  --color-fd-ring: #F17829;
  --color-fd-overlay: hsla(20, 10%, 10%, 0.2);
}

/* Safety net: force light palette even if .dark class is applied */
.dark {
  --color-fd-background: #FAFAF8;
  --color-fd-foreground: #1A1714;
  --color-fd-muted: #F0EDE8;
  --color-fd-muted-foreground: #6B6560;
  --color-fd-popover: #FFFFFF;
  --color-fd-popover-foreground: #1A1714;
  --color-fd-card: #FCFCFA;
  --color-fd-card-foreground: #1A1714;
  --color-fd-border: #E5E2DC;
  --color-fd-primary: #F17829;
  --color-fd-primary-foreground: #FFFFFF;
  --color-fd-secondary: #FCFCFA;
  --color-fd-secondary-foreground: #6B6560;
  --color-fd-accent: #F5EDE4;
  --color-fd-accent-foreground: #1A1714;
  --color-fd-ring: #F17829;
  --color-fd-overlay: hsla(20, 10%, 10%, 0.2);
}

/* Neutralize sidebar dark overrides from neutral.css */
.dark #nd-sidebar {
  --color-fd-muted: #F0EDE8;
  --color-fd-secondary: #FCFCFA;
  --color-fd-muted-foreground: #6B6560;
}

/* ═══════════════════════════════════════════════════
   Base Styles
   ═══════════════════════════════════════════════════ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-dm-sans), 'DM Sans', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(241, 120, 41, 0.15);
}

/* ═══════════════════════════════════════════════════
   Grain Overlay
   Subtler than landing page (0.02 vs 0.025) for readability
   ═══════════════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ═══════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════ */

code, kbd, pre, .font-mono {
  font-family: var(--font-jetbrains-mono), 'JetBrains Mono', monospace;
}

/* ═══════════════════════════════════════════════════
   Code Blocks
   Uses Shiki dual-theme: github-light + github-dark.
   Code containers force the dark Shiki variant via
   --shiki-dark CSS variables so blocks render with
   high-contrast dark tokens on a dark surface, while
   the rest of the page stays light.
   ═══════════════════════════════════════════════════ */

/* Standalone code blocks (> pre ensures PyFunction <figure>s aren't matched) */
figure:has(> pre) {
  --color-fd-card: #24292e;
  --color-fd-secondary: #2f363d;
  --color-fd-muted-foreground: #8b949e;
  --color-fd-accent-foreground: #e1e4e8;
  --color-fd-border: #3a4149;
  --color-fd-ring: #F17829;
  border: none !important;
  border-radius: 11px !important;
  background: #24292e !important;
}

/* Force dark Shiki tokens inside code blocks */
figure:has(> pre) pre {
  background: transparent !important;
}

figure:has(> pre) code span {
  color: var(--shiki-dark) !important;
}

/* Tabbed code blocks.
   The > figure > pre chain avoids matching SDK reference tabs where
   pre is deeply nested inside PyFunction/PySourceCode collapsibles. */
:has(> [role="tablist"]):has(> [role="tabpanel"] > figure > pre) {
  --color-fd-card: #24292e;
  --color-fd-secondary: #2f363d;
  --color-fd-muted-foreground: #8b949e;
  --color-fd-accent-foreground: #e1e4e8;
  --color-fd-primary: #F17829;
  --color-fd-border: #3a4149;
  --color-fd-ring: #F17829;
  border: none !important;
  border-radius: 11px !important;
  background: #24292e !important;
}

/* Force dark Shiki tokens in tabbed code blocks too */
:has(> [role="tablist"]):has(> [role="tabpanel"] > figure > pre) code span {
  color: var(--shiki-dark) !important;
}

/* Tabbed code blocks: divider between tab bar and code */
:has(> [role="tablist"]):has(> [role="tabpanel"] > figure > pre) [role="tablist"] {
  border-bottom: 1px solid #3a4149;
}

/* Inline code: warm accent-light background with high-contrast text */
:not(pre) > code {
  background: #F5EDE4;
  color: #1A1714;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
  border: 1px solid #E5E2DC;
}

/* ═══════════════════════════════════════════════════
   Logo Ring Animation
   ═══════════════════════════════════════════════════ */

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.logo-ring {
  transform-origin: 85px 85px;
  animation: ring-spin 12s linear infinite;
}

.nav-title:hover .logo-ring {
  animation-duration: 3s;
}

/* ═══════════════════════════════════════════════════
   Nav Glass Enhancement
   FumaDocs mobile header already has backdrop-blur-sm;
   strengthen it to match landing page feel
   ═══════════════════════════════════════════════════ */

#nd-subnav {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
