zap-proto.github.io/app/global.css

@import 'tailwindcss';
@import '@hanzo/docs-ui/css/base.css';
@import '@hanzo/docs-ui/css/colors/neutral.css';

/* Radix UI animations (from docs-radix-ui/preset.css without the broken import) */
@source '../node_modules/@hanzo/docs-radix-ui/dist/*.js';
@source '../node_modules/@hanzo/docs-radix-ui/dist/{components,contexts,provider,utils}/**/*.js';
@source '../node_modules/@hanzo/docs-radix-ui/dist/layouts/shared/**/*.js';
@source '../node_modules/@hanzo/docs-radix-ui/dist/layouts/docs/**/*.js';

:root {
  --fd-primary: 217 91% 60%;
  --fd-primary-foreground: 0 0% 100%;
}

.dark {
  --fd-primary: 217 91% 65%;
  --fd-primary-foreground: 0 0% 100%;
}

@theme {
  --color-fd-primary: hsl(217, 91%, 60%);
  --color-fd-primary-foreground: white;

  /* Radix collapsible animations */
  --animate-fd-collapsible-down: fd-collapsible-down 150ms cubic-bezier(0.45, 0, 0.55, 1);
  --animate-fd-collapsible-up: fd-collapsible-up 150ms cubic-bezier(0.45, 0, 0.55, 1);

  --animate-fd-accordion-down: fd-accordion-down 200ms ease-out;
  --animate-fd-accordion-up: fd-accordion-up 200ms ease-out;

  --animate-fd-nav-menu-in: fd-nav-menu-in 200ms ease;
  --animate-fd-nav-menu-out: fd-nav-menu-out 200ms ease;

  @keyframes fd-collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes fd-collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fd-accordion-down {
    from {
      height: 0;
      opacity: 0.5;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes fd-accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
      opacity: 0.5;
    }
  }

  @keyframes fd-nav-menu-in {
    from {
      opacity: 0;
      height: 0px;
    }
    to {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
  }

  @keyframes fd-nav-menu-out {
    from {
      opacity: 1;
      height: var(--radix-navigation-menu-viewport-height);
    }
    to {
      opacity: 0;
      height: 0px;
    }
  }
}

@property --radix-collapsible-content-height {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

html {
  scrollbar-gutter: stable;
}

body {
  background-color: var(--color-fd-background);
}

/* Custom scrollbar - electric blue */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--fd-primary) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--fd-primary) / 0.5);
}

/* Code blocks */
pre {
  border: 1px solid hsl(var(--color-fd-border));
}

/* Accent link styles - electric blue */
.fd-toc a:hover,
.fd-sidebar a:hover {
  color: hsl(var(--fd-primary));
}

@layer base {
  body {
    @apply flex flex-col min-h-screen;
  }
}