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

/* ── Custom theme vars for landing page (cloud/flow pattern) ── */
@theme {
  --color-brand:            #fafafa;
  --color-brand-foreground: #0a0a0a;
  --color-brand-hover:      #e5e5e5;
  --color-brand-muted:      rgba(250, 250, 250, 0.06);

  --color-bg:               #000000;
  --color-bg-card:          rgba(10, 10, 10, 0.95);
  --color-bg-elevated:      #111111;
  --color-border:           rgba(255, 255, 255, 0.10);
  --color-text:             #fafafa;
  --color-text-muted:       #a3a3a3;
  --color-text-dim:         #737373;

  /* ── Override ALL Hanzo Docs vars — pure monochrome, no amber ── */
  --color-fd-background:           #000000;
  --color-fd-foreground:           #fafafa;
  --color-fd-card:                 #0a0a0a;
  --color-fd-card-foreground:      #fafafa;
  --color-fd-muted:                #111111;
  --color-fd-muted-foreground:     #8c8c8c;
  --color-fd-popover:              #0d0d0d;
  --color-fd-popover-foreground:   #f0f0f0;
  --color-fd-border:               rgba(255, 255, 255, 0.10);
  --color-fd-primary:              #fafafa;
  --color-fd-primary-foreground:   #0a0a0a;
  --color-fd-secondary:            #1a1a1a;
  --color-fd-secondary-foreground: #ebebeb;
  --color-fd-accent:               rgba(255, 255, 255, 0.06);
  --color-fd-accent-foreground:    #e5e5e5;
  --color-fd-ring:                 #666666;
  --color-fd-overlay:              rgba(0, 0, 0, 0.5);

  /* ── Neutralize warning/idea/info to pure white — kills amber ── */
  --color-fd-warning: #fafafa;
  --color-fd-idea:    #fafafa;
  --color-fd-info:    #fafafa;
  --color-fd-error:   #fafafa;
  --color-fd-success: #fafafa;
}

html {
  scrollbar-gutter: stable;
  color-scheme: dark;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* Force dark mode sidebar overrides */
#nd-sidebar {
  --color-fd-muted: #1a1a1a;
  --color-fd-secondary: #1a1a1a;
  --color-fd-muted-foreground: #8c8c8c;
}

::selection {
  background-color: rgba(250, 250, 250, 0.15);
  color: white;
}