globals.css

@import "tailwindcss";

/* let Tailwind v4 emit the utility classes streamdown uses to render markdown */
@source "../node_modules/streamdown/dist";

/* dark mode via .dark class (we default the app to dark) */
@custom-variant dark (&:is(.dark, .dark *));

/* ── design tokens (light) - ported from lcai-chat-v2 ───────────────── */
:root {
  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

  --background: #ffffff;
  --primary: #6767e9;
  --primary-600: #5a4fd8;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: hsl(240 10% 3.9%);
  --primary-foreground: #fafafa;
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: #ef4d6a;
  --destructive-foreground: hsl(0 0% 98%);
  --success: #15bd77;
  --warning: #eaa53d;
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 10% 3.9%);
  --radius: 0.625rem;

  --surface-base-subtle: rgba(34, 35, 42, 0.02);
  --surface-base-faint: rgba(14, 18, 27, 0.04);
  --surface-base-light: rgba(204, 206, 239, 0.16);
  --surface-elevation-light: #ffffff;

  --content-primary: #0f0f14;
  --content-default: #373842;
  --content-soft: #656678;
  --content-extraLight: #9798b6;

  --border-soft: rgba(14, 18, 27, 0.08);
  --border-light: rgba(14, 18, 27, 0.06);
}

/* ── design tokens (dark) ───────────────────────────────────────────── */
.dark {
  --background: #070710;
  --foreground: hsl(0 0% 98%);
  --card: #0f0f14;
  --card-foreground: hsl(0 0% 98%);
  --popover: #0f0f14;
  --popover-foreground: hsl(0 0% 98%);
  --primary: #7064e9;
  --primary-600: #8c71f6;
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 3.7% 15.9%);
  --secondary-foreground: hsl(0 0% 98%);
  --muted: hsl(240 3.7% 15.9%);
  --muted-foreground: hsl(240 5% 64.9%);
  --accent: hsl(240 3.7% 15.9%);
  --accent-foreground: hsl(0 0% 98%);
  --destructive: #fb5a76;
  --destructive-foreground: hsl(0 0% 98%);
  --success: #22d68a;
  --warning: #f5be5c;
  --border: hsl(240 3.7% 15.9%);
  --input: hsl(240 3.7% 15.9%);
  --ring: hsl(240 4.9% 83.9%);

  --surface-base-subtle: rgba(204, 206, 239, 0.02);
  --surface-base-faint: rgba(204, 206, 239, 0.04);
  --surface-base-light: rgba(204, 206, 239, 0.08);
  --surface-elevation-light: #0f0f14;

  --content-primary: #cccef0;
  --content-default: #9798b6;
  --content-soft: rgba(154, 156, 207, 0.8);
  --content-extraLight: #9798b6;

  --border-soft: rgba(204, 206, 239, 0.12);
  --border-light: rgba(204, 206, 239, 0.08);
}

/* ── theme mapping (Tailwind v4 @theme) ─────────────────────────────── */
@theme inline {
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-lg: var(--radius);

  --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-600: var(--primary-600);
  --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-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-surface-base-subtle: var(--surface-base-subtle);
  --color-surface-base-faint: var(--surface-base-faint);
  --color-surface-base-light: var(--surface-base-light);
  --color-surface-elevation-light: var(--surface-elevation-light);
  --color-surface-base-brand-default: #693ee0;
  --color-surface-base-brand-strong: #8c71f6;

  --color-content-primary: var(--content-primary);
  --color-content-default: var(--content-default);
  --color-content-soft: var(--content-soft);
  --color-content-extraLight: var(--content-extraLight);

  --color-bdr-soft: var(--border-soft);
  --color-bdr-light: var(--border-light);

  --color-gradient-primary: linear-gradient(270deg, #7064e9 0%, #dd00ac 100%);
}

@layer base {
  * {
    border-color: var(--border);
  }
  body {
    background-color: var(--background);
    color: var(--foreground);
    overflow-x: hidden;
  }
  html {
    overflow-x: hidden;
  }
  button {
    cursor: pointer;
  }
  button:disabled {
    cursor: not-allowed;
  }
  /* visible keyboard focus across interactive elements */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  [role="switch"]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 6px;
  }
}

/* respect reduced-motion: kill non-essential animation */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── ambient app background (gradient mesh behind everything) ──
   Tuned to mirror the lightchain.ai / lcai-chat-v2 hero treatment:
   a soft pink-to-lavender aurora at the top, a quieter purple wash
   on the lower edges. Light-mode is now visible (was 0.05), dark
   stays the same. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.10), transparent 60%),
    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.14), transparent 60%),
    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.12), transparent 60%),
    radial-gradient(45% 45% at 50% 115%, rgba(112, 100, 233, 0.07), transparent 60%);
}
.dark body::before {
  background:
    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.12), transparent 60%),
    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.18), transparent 60%),
    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.14), transparent 60%),
    radial-gradient(45% 45% at 50% 118%, rgba(112, 100, 233, 0.10), transparent 60%);
}

/* Stronger hero aurora used on /build/sdks and its sub-pages. Sits
   absolutely positioned inside the page container so it can wash the
   space behind the hero specifically without affecting downstream
   sections. Both themes carry it. */
.aurora-hero {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 50% 0%, rgba(221, 0, 172, 0.18), transparent 65%),
    radial-gradient(45% 70% at 20% 10%, rgba(112, 100, 233, 0.22), transparent 70%),
    radial-gradient(45% 70% at 80% 10%, rgba(147, 51, 234, 0.18), transparent 70%);
  filter: blur(20px);
}
.dark .aurora-hero {
  background:
    radial-gradient(40% 60% at 50% 0%, rgba(221, 0, 172, 0.16), transparent 65%),
    radial-gradient(45% 70% at 20% 10%, rgba(112, 100, 233, 0.20), transparent 70%),
    radial-gradient(45% 70% at 80% 10%, rgba(147, 51, 234, 0.18), transparent 70%);
}

/* the signature lcai gradient */
.bg-gradient-primary {
  background-image: var(--color-gradient-primary);
}

/* gradient hairline (used under the navbar) */
.gradient-underline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 55%, transparent), rgba(221, 0, 172, 0.45), transparent);
}
.text-gradient {
  background: linear-gradient(94deg, #dd00ac 10%, #7130c3 53%, #7064e9 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ambient glow used behind the hero */
.glow-radial {
  background: radial-gradient(
    60% 50% at 50% 0%,
    rgba(112, 100, 233, 0.25) 0%,
    rgba(221, 0, 172, 0.08) 40%,
    transparent 75%
  );
}

/* subtle grid backdrop */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(204, 206, 239, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(204, 206, 239, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* minimal scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.animate-pulse-dot {
  animation: pulse-dot 1.8s ease-in-out infinite;
}

/* refined status indicators - soft glow ring, premium tones */
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.dot-live {
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--success) 22%, transparent);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
.dot-warn {
  background: var(--warning);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warning) 20%, transparent);
}
.dot-down {
  background: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 18%, transparent);
}
.dot-idle {
  background: var(--content-extraLight);
}

/* theme-aware code surface (light in light theme, dark in dark theme) */
.code-surface {
  background: #f4f4f8;
  color: #1b1c22;
}
.dark .code-surface {
  background: #0b0b14;
  color: var(--content-default);
}

/* ── theme switch: circular "wave" reveal from the click point ──────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 0;
}
::view-transition-new(root) {
  z-index: 1;
}
@keyframes lc-reveal {
  from {
    clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
    opacity: 0.85;
  }
  to {
    clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
    opacity: 1;
  }
}
::view-transition-new(root) {
  animation: lc-reveal 0.45s ease-in-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root),
  ::view-transition-old(root) {
    animation: none;
  }
}