@import "tailwindcss";
@import "fumadocs-ui/css/shadcn.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-openapi/css/preset.css";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --breakpoint-xs: 24.99rem; /* 399.84px - just under 400px */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, monospace;
  --font-display: ui-sans-serif, system-ui, sans-serif;

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  --animate-collapsible-down: collapsible-down 0.2s ease-out;
  --animate-collapsible-up: collapsible-up 0.2s ease-out;
  @keyframes collapsible-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }
  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }
  --animate-shiny-text: shiny-text 8s infinite
;
  @keyframes shiny-text {
  0%, 90%, 100% {
    background-position: calc(-100% - var(--shiny-width)) 0;}
  30%, 60% {
    background-position: calc(100% + var(--shiny-width)) 0;}}}

:root {
  color-scheme: dark;
  --background: #faf9f5;
  --foreground: #3d3929;
  --card: #faf9f5;
  --card-foreground: #141413;
  --popover: #ffffff;
  --popover-foreground: #28261b;
  --primary: oklch(0.59 0.16 131.72);
  --primary-foreground: #ffffff;
  --secondary: #e9e6dc;
  --secondary-foreground: #535146;
  --muted: #ede9de;
  --muted-foreground: #4a4945;
  --accent: #e9e6dc;
  --accent-foreground: #28261b;
  --destructive: #141413;
  --destructive-foreground: #ffffff;
  --border: #dad9d4;
  --input: #b4b2a7;
  --ring: #207fde;
  --chart-1: #b05730;
  --chart-2: #9c87f5;
  --chart-3: #ded8c4;
  --chart-4: #dbd3f0;
  --chart-5: #b4552d;
  --sidebar: #f5f4ee;
  --sidebar-foreground: #3d3d3a;
  --sidebar-primary: #c96442;
  --sidebar-primary-foreground: #fbfbfb;
  --sidebar-accent: #e9e6dc;
  --sidebar-accent-foreground: #343434;
  --sidebar-border: #ebebeb;
  --sidebar-ring: #b5b5b5;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: #161716;
  --foreground: #dce4e5;
  --card: #141414;
  --card-foreground: #faf9f5;
  --popover: #212121;
  --popover-foreground: #e5e5e2;
  --primary: #9ae600;
  --primary-foreground: #032e03;
  --secondary: #242424;
  --secondary-foreground: #c0c4c0;
  --muted: #1f1f1f;
  --muted-foreground: #828178;
  --accent: #313131;
  --accent-foreground: #dce4e5;
  --destructive: #ef4444;
  --destructive-foreground: #360606;
  --border: #363736;
  --input: #52514a;
  --ring: #bfe903;
  --chart-1: #b05730;
  --chart-2: #9c87f5;
  --chart-3: #1a1915;
  --chart-4: #2f2b48;
  --chart-5: #b4552d;
  --sidebar: #101010;
  --sidebar-foreground: #c3c0b6;
  --sidebar-primary: #353635;
  --sidebar-primary-foreground: #fbfbfb;
  --sidebar-accent: #353636;
  --sidebar-accent-foreground: #c3c0b6;
  --sidebar-border: #ebebeb;
  --sidebar-ring: #b5b5b5;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: var(--color-white);
  }

  & h2 {
    color: var(--color-muted-foreground);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  html {
    font-size: 16px;
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground;
  }
  
  /* Force dark mode styles */
  html, html.dark {
    color-scheme: dark;
  }

  /* Apply font variables from Next.js font loader */
  :root {
    --font-sans-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
    --font-mono-family: var(--font-geist-mono), ui-monospace, monospace;
    --font-display-family: var(--font-clash-display), ui-sans-serif, system-ui, sans-serif;
  }

  /* Automatically apply Clash Display font to all headings */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-display-family);
    font-weight: var(--title-font-weight); /* Semibold as default */
  }
}

@layer utilities {
  .font-sans {
    font-family: var(--font-sans-family);
  }

  .font-mono {
    font-family: var(--font-mono-family);
  }

  .font-display {
    font-family: var(--font-display-family);
  }

  /* Gradient text utilities */
  .text-gradient-gray {
    @apply bg-gradient-to-r from-[#9B9B9B] to-[#FFFFFF] bg-clip-text text-transparent;
  }

  .text-gradient-green {
    @apply bg-gradient-to-r from-[#d7e23e] to-[#9AFF00] bg-clip-text text-transparent;
  }
}

/* Proper Tailwind CSS v4 approach for typography customization */
@layer utilities {
  /* Clean prose heading overrides without !important */
  .prose h1 {
    font-family: var(--font-display-family);
    font-weight: var(--title-font-weight);
    font-size: var(--text-4xl);
    line-height: 1.1;
    margin-bottom: 0.8em;
  }

  .prose h3,
  .prose h4,
  .prose h5,
  .prose h6 {
    font-family: var(--font-sans-family);
    letter-spacing: -0.02em;
  }

  .prose h2 {
    font-weight: var(--title-font-weight);
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin-bottom: 0.6em;
  }

  .prose h3 {
    font-weight: var(--title-font-weight);
    font-size: var(--text-2xl);
    line-height: 1.3;
    margin-bottom: 0.35em;
  }

  .prose h4 {
    font-weight: var(--title-font-weight);
    font-size: var(--text-xl);
    line-height: 1.4;
    margin-bottom: 0.3em;
  }

  .prose h5 {
    font-weight: var(--title-font-weight);
    font-size: var(--text-lg);
    line-height: 1.5;
    margin-bottom: 0.25em;
  }

  .prose h6 {
    font-weight: var(--title-font-weight);
    font-size: var(--text-md);
    line-height: 1.6;
    margin-bottom: 0.2em;
  }

  .prose li > p {
    margin: 0 !important;
  }

  div[data-slot="accordion"] h3 {
    margin: 0;
    font-family: var(--font-sans-family);
  }
}

#nd-sidebar {
  background-color: var(--sidebar) !important;
}

.kibo-ui-code-block {
  padding: 0;

  & .shiki:not(.not-fumadocs-codeblock *) {
    --padding-left: 0px;
    --padding-right: 0px;
    @apply rounded-md border-none;

    & code {
      @apply rounded-md border-none px-4 py-3;
    }
  }
}

@layer base {
  [data-rmiz-modal-overlay="visible"] {
    background-color: var(--background) !important;
  }
  
  /* Ensure Mermaid diagrams use Geist font */
  .mermaid-container svg {
    font-family: var(--font-sans-family) !important;
  }
  
  .mermaid-container text,
  .mermaid-container tspan,
  .mermaid-container .nodeLabel,
  .mermaid-container .label {
    font-family: var(--font-sans-family) !important;
  }
}
