docs/apps/visor/app/global.css

@import '@hanzo/font/css';
@import 'tailwindcss';
@import '@hanzo/docs-base-ui/css/neutral.css';
@import '@hanzo/docs-base-ui/css/preset.css';
@plugin 'tailwindcss-animate';

/* Zen. The faces are declared by the import above; these name the role. */
:root {
  --font-sans: 'Zen', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Zen Mono', ui-monospace, SFMono-Regular, monospace;
}

@theme {
  --spacing-page: 1436px;
  --color-brand: hsl(210, 98%, 55%);
  --color-brand-foreground: white;
  --color-brand-secondary: hsl(210, 80%, 45%);
  --color-brand-secondary-foreground: white;
  --color-brand-200: hsl(210, 90%, 72%);

  --color-landing-foreground: #1a1a2e;
  --color-landing-foreground-200: #4a4a6a;
}

.dark {
  --color-landing-foreground: #e4e4f0;
  --color-landing-foreground-200: #a0a0c0;

  --color-brand: hsl(210, 98%, 55%);
  --color-brand-secondary: hsl(210, 100%, 60%);
  --color-brand-secondary-foreground: black;
  --color-brand-foreground: white;
  --color-brand-200: hsl(210, 90%, 80%);
}

@theme inline {
  --default-font-family: var(--font-zen-sans);
  --default-mono-font-family: var(--font-zen-mono);
  --animate-pulse-fast: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
}

/* Selection */
::selection {
  background: hsl(210, 98%, 55%);
  color: white;
}

html {
  scrollbar-gutter: stable;
}

html:has(body[data-scroll-locked]) {
  scrollbar-gutter: auto;
}

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

:root {
  color-scheme: dark;
  --color-fd-background: hsl(0, 0%, 2%);
  --color-fd-foreground: hsl(0, 0%, 96%);
  --color-fd-muted: hsl(0, 0%, 10%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 90%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 96%);
  --color-fd-border: hsla(0, 0%, 40%, 0.2);
  --color-fd-primary: hsl(0, 0%, 96%);
  --color-fd-primary-foreground: hsl(0, 0%, 8%);
  --color-fd-secondary: hsl(0, 0%, 12%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40%, 0.3);
  --color-fd-accent-foreground: hsl(0, 0%, 92%);
  --color-fd-ring: hsl(0, 0%, 55%);
  --color-fd-overlay: hsla(0, 0%, 0%, 0.3);
  --color-fd-warning: hsl(0, 0%, 96%);
  --color-fd-idea: hsl(0, 0%, 96%);
  --color-fd-info: hsl(0, 0%, 96%);
  --color-fd-error: hsl(0, 0%, 96%);
  --color-fd-success: hsl(0, 0%, 96%);
}

.dark {
  --color-fd-background: hsl(0, 0%, 2%);
  --color-fd-foreground: hsl(0, 0%, 96%);
  --color-fd-muted: hsl(0, 0%, 10%);
  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.85);
  --color-fd-popover: hsl(0, 0%, 4%);
  --color-fd-popover-foreground: hsl(0, 0%, 90%);
  --color-fd-card: hsl(0, 0%, 4%);
  --color-fd-card-foreground: hsl(0, 0%, 96%);
  --color-fd-border: hsla(0, 0%, 40%, 0.2);
  --color-fd-primary: hsl(0, 0%, 96%);
  --color-fd-primary-foreground: hsl(0, 0%, 8%);
  --color-fd-secondary: hsl(0, 0%, 12%);
  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
  --color-fd-accent: hsla(0, 0%, 40%, 0.3);
  --color-fd-accent-foreground: hsl(0, 0%, 92%);
  --color-fd-ring: hsl(0, 0%, 55%);
  --color-fd-overlay: hsla(0, 0%, 0%, 0.3);
}

/* Animation Keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}