/* zephyr theme: default (built 2026-06-13T23:44:11.785Z) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --background: 210 40% 99% !important;
  --foreground: 222 47% 11% !important;
  --primary: 244 80% 54% !important;
  --primary-foreground: 0 0% 100% !important;
  --secondary: 215 25% 45% !important;
  --secondary-foreground: 0 0% 100% !important;
  --muted: 210 20% 96% !important;
  --muted-foreground: 215 16% 47% !important;
  --accent: 244 80% 96% !important;
  --accent-foreground: 244 80% 30% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 222 47% 11% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 222 47% 11% !important;
  --border: 214 32% 91% !important;
  --input: 214 32% 91% !important;
  --ring: 244 80% 54% !important;
  --success: 151 61% 42% !important;
  --warning: 36 100% 50% !important;
  --destructive: 0 72% 51% !important;
  --destructive-foreground: 0 0% 100% !important;
  --radius: 0.625rem !important;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif !important;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif !important;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;

  --def-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  --def-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  --def-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04) !important;
  --def-grad-hero:
    radial-gradient(1200px 600px at 50% 0%, rgba(76, 109, 255, 0.10) 0, transparent 60%) !important;
  --def-grid:
    linear-gradient(rgba(76, 109, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 109, 255, 0.04) 1px, transparent 1px) !important;
}
html.dark:root {
  --background: 222 47% 4% !important;
  --foreground: 210 20% 98% !important;
  --primary: 244 85% 68% !important;
  --primary-foreground: 222 47% 4% !important;
  --muted: 217 33% 14% !important;
  --muted-foreground: 215 20% 65% !important;
  --accent: 244 40% 22% !important;
  --accent-foreground: 210 20% 98% !important;
  --card: 222 40% 8% !important;
  --card-foreground: 210 20% 98% !important;
  --popover: 222 40% 8% !important;
  --popover-foreground: 210 20% 98% !important;
  --border: 217 33% 17% !important;
  --input: 217 33% 17% !important;
  --ring: 244 85% 68% !important;
  --def-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  --def-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4) !important;
  --def-grad-hero:
    radial-gradient(1200px 600px at 50% 0%, rgba(124, 156, 255, 0.18) 0, transparent 60%) !important;
  --def-grid:
    linear-gradient(rgba(124, 156, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 156, 255, 0.04) 1px, transparent 1px) !important;
}

body {
  letter-spacing: -0.01em;
  font-feature-settings: 'cv11', 'ss01';
}

/* Headings: tight + geometric */
h1.font-display, h2.font-display, h3.font-display {
  letter-spacing: -0.035em;
  font-weight: 700;
}
h1.font-display {
  font-weight: 700 !important;
}

/* Header: clean line, soft blur */
header.sticky {
  background: hsl(var(--background) / 0.85) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
header.sticky a[href="/"] > span:first-child {
  background: hsl(var(--primary)) !important;
  border-radius: 8px !important;
  font-weight: 700;
}

/* Eyebrow pill: soft muted */
span.rounded-full.border,
span.rounded-full[class*="border-border"] {
  background: hsl(var(--muted)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Buttons: solid indigo, sharp small radius */
a.bg-primary,
button.bg-primary,
.bg-primary[class*="rounded"] {
  background: hsl(var(--primary)) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: var(--def-shadow-md);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  border: none !important;
}
a.bg-primary:hover,
button.bg-primary:hover,
.bg-primary[class*="rounded"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--def-shadow-lg);
  opacity: 1 !important;
  background: hsl(244 85% 60%) !important;
}

/* Outline buttons */
a[class*="border-border"][class*="rounded-md"]:not(.bg-primary),
button[class*="border-border"][class*="rounded-md"]:not(.bg-primary) {
  border-radius: 8px !important;
  border: 1px solid hsl(var(--border)) !important;
  font-weight: 600 !important;
  background: hsl(var(--background)) !important;
  transition: border-color 0.12s, background 0.12s;
}
a[class*="border-border"][class*="rounded-md"]:not(.bg-primary):hover,
button[class*="border-border"][class*="rounded-md"]:not(.bg-primary):hover {
  border-color: hsl(var(--primary)) !important;
  background: hsl(var(--accent)) !important;
}

/* Cards: tight 10px, minimal shadow */
.bg-card,
[class*="bg-card"],
.rounded-lg.border,
[class*="rounded-lg"][class*="border"] {
  border-radius: 10px !important;
  box-shadow: var(--def-shadow-sm);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.bg-card:hover,
[class*="bg-card"]:hover,
.rounded-lg.border:hover {
  box-shadow: var(--def-shadow-md);
  border-color: hsl(var(--primary) / 0.3) !important;
}

/* Icon chip: square solid */
[class*="bg-primary/10"],
[class*="bg-primary\/10"] {
  background: hsl(var(--primary) / 0.08) !important;
  border: 1px solid hsl(var(--primary) / 0.2);
  border-radius: 8px !important;
  color: hsl(var(--primary)) !important;
}

/* Hero: subtle indigo radial + grid */
main > section:first-child {
  position: relative;
}
main > section:first-child::before {
  content: '';
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  background: var(--def-grad-hero);
  pointer-events: none;
}
main > section:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--def-grid);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[class*="rounded-md"],
select[class*="rounded-md"] {
  border-radius: 8px !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--background)) !important;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, select:focus, textarea:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15) !important;
  outline: none;
}

/* Tables */
table {
  border-collapse: collapse;
}
th {
  background: hsl(var(--muted));
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
tr:hover td {
  background: hsl(var(--muted) / 0.5);
}

/* Code */
code, .font-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'ss01';
}
/* Scope code-block styling to .prose only (markdown-rendered content) so
   it doesn't bleed into app surfaces like chat/inbox/support that use
   <pre> for whitespace preservation in plain message bodies. */
.prose pre {
  background: hsl(222 47% 6%);
  color: #c5d6f5;
  padding: 1.25rem;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  overflow-x: auto;
  font-size: 0.875rem;
  box-shadow: var(--def-shadow-md);
}
:not(pre) > code {
  background: hsl(var(--muted));
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.875em;
}

/* Footer: clean line + monochrome */
footer {
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
  margin-top: 80px !important;
  padding-top: 48px !important;
  padding-bottom: 32px !important;
}

/* Empty-state dashed */
[class*="border-dashed"] {
  border-radius: 10px !important;
  background: hsl(var(--muted) / 0.5);
}

/* Links in prose */
.prose a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}


/* admin overrides */
html:root {
  --primary: 261 89% 65% !important;
}