/*
 * Langfuse → Vercel design system override (dark)
 * Faithful to https://vercel.com/geist/colors and the Vercel UI language.
 *
 * Strategy: rebind Langfuse's shadcn HSL variables to Vercel's gray ramp,
 * pure-black background, Vercel blue (#0070f3), and Geist fonts.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&family=Geist+Mono:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* ─── Vercel raw palette (reference, not consumed by Langfuse) ─── */
:root {
  --vc-bg:        #000000;
  --vc-bg-100:    #0a0a0a;
  --vc-bg-200:    #111111;
  --vc-bg-300:    #1a1a1a;
  --vc-surface-1: #111111;
  --vc-surface-2: #1c1c1c;
  --vc-surface-3: #282828;
  --vc-border-1:  #1f1f1f;
  --vc-border-2:  #2e2e2e;
  --vc-border-3:  #3d3d3d;
  --vc-fg:        #ededed;
  --vc-fg-muted:  #a1a1a1;
  --vc-fg-subtle: #6f6f6f;
  --vc-fg-faint:  #3d3d3d;
  --vc-blue:      #0070f3;
  --vc-blue-2:    #0060df;
  --vc-green:     #50e3c2;
  --vc-red:       #ff4444;
  --vc-amber:     #f5a623;
  --vc-purple:    #7928ca;
  --vc-pink:      #ff0080;
  --vc-cyan:      #79ffe1;
}

/* ─── Rebind Langfuse shadcn variables → Vercel (HSL triples) ─── */
.dark {
  /* Surfaces — pure black page, near-black cards, dim raised surfaces */
  --background:        0 0% 0%;       /* #000000 */
  --foreground:        0 0% 93%;      /* #ededed */
  --muted:             0 0% 11%;      /* #1c1c1c */
  --muted-foreground:  0 0% 63%;      /* #a1a1a1 */
  --popover:           0 0% 7%;       /* #111111 */
  --popover-foreground:0 0% 93%;
  --card:              0 0% 7%;       /* #111111 */
  --card-foreground:   0 0% 93%;
  --header:            0 0% 0%;       /* black, glass effect added below */
  --header-foreground: var(--foreground);

  /* Lines & inputs */
  --border:            0 0% 12%;      /* #1f1f1f */
  --input:             0 0% 12%;

  /* Primary = Vercel "white-on-black" CTA */
  --primary:               0 0% 93%;  /* #ededed */
  --primary-foreground:    0 0% 0%;
  --secondary:             0 0% 11%;  /* #1c1c1c */
  --secondary-foreground:  0 0% 93%;
  --tertiary:              0 0% 16%;  /* #282828 */
  --tertiary-foreground:   0 0% 93%;
  --accent:                0 0% 11%;
  --accent-foreground:     0 0% 93%;

  /* States */
  --destructive:           0 100% 64%;    /* #ff4444 */
  --destructive-foreground:0 0% 100%;
  --ring:                  212 100% 48%; /* Vercel blue #0070f3 */

  /* Brand / informational accents */
  --primary-accent:        212 100% 48%; /* Vercel blue */
  --muted-primary-accent:  213 100% 44%; /* hover blue #0060df */
  --muted-blue:            213 94% 68%;
  --muted-green:           168 72% 60%;
  --muted-magenta:         330 100% 65%;
  --muted-gray:            0 0% 27%;

  /* Status pairs (light bg / dark text fill) */
  --light-red:             0 60% 22%;
  --dark-red:              0 100% 71%;
  --light-yellow:          36 80% 22%;
  --dark-yellow:           36 91% 60%;
  --light-green:           168 60% 18%;
  --dark-green:            168 72% 65%;
  --light-blue:            212 70% 20%;
  --dark-blue:             212 100% 70%;
  --accent-light-green:    0 0% 7%;
  --accent-dark-green:     0 0% 14%;
  --accent-light-blue:     0 0% 7%;
  --accent-dark-blue:      0 0% 14%;

  /* Sidebar — true black, like Vercel dashboard */
  --sidebar-background:        0 0% 0%;
  --sidebar-foreground:        0 0% 78%;
  --sidebar-primary:           0 0% 93%;
  --sidebar-primary-foreground:0 0% 0%;
  --sidebar-accent:            0 0% 11%;
  --sidebar-accent-foreground: 0 0% 93%;
  --sidebar-border:            0 0% 12%;
  --sidebar-ring:              212 100% 48%;

  /* Search match */
  --find-match-background:           36 80% 22%;
  --find-match-selected-background:  36 91% 55%;
  --find-match-selected-foreground:  0 0% 0%;

  /* Charts — Vercel accent palette */
  --chart-1: 212 100% 48%;
  --chart-2: 168 72% 60%;
  --chart-3: 36 91% 55%;
  --chart-4: 277 67% 47%;
  --chart-5: 330 100% 50%;
  --chart-6: 0 100% 64%;
  --chart-7: 168 100% 73%;
  --chart-8: 213 94% 68%;
  --chart-grid: var(--muted-gray);

  --color-1: #ff4444;
  --color-2: #7928ca;
  --color-3: #0070f3;
  --color-4: #50e3c2;
  --color-5: #f5a623;
}

/* ─── Geist typography on the whole app ─────────────────────── */
html.dark,
html.dark body {
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}
html.dark body {
  background: #000000 !important;
}
html.dark code,
html.dark kbd,
html.dark samp,
html.dark pre,
html.dark .font-mono,
html.dark [class*="mono"] {
  font-family: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace !important;
}

/* Tighter headings, Vercel-style */
html.dark h1, html.dark h2, html.dark h3 {
  letter-spacing: -0.02em;
}
html.dark h1 { letter-spacing: -0.04em; }
html.dark h2 { letter-spacing: -0.03em; }

/* ─── Background hardening ──────────────────────────────────── */
html.dark body,
html.dark #__next,
html.dark main,
html.dark .bg-background,
html.dark .bg-slate-950,
html.dark .bg-slate-900,
html.dark .bg-zinc-950,
html.dark .bg-zinc-900,
html.dark .bg-neutral-950,
html.dark .bg-neutral-900,
html.dark .bg-gray-950,
html.dark .bg-gray-900 {
  background-color: #000000;
}

/* Cards / popovers / dropdowns → #111 */
html.dark .bg-card,
html.dark .bg-popover,
html.dark [role="dialog"],
html.dark [role="menu"],
html.dark [role="listbox"] {
  background-color: #111111;
}

/* Borders */
html.dark .border,
html.dark .border-t,
html.dark .border-b,
html.dark .border-l,
html.dark .border-r,
html.dark [class*="border-"] {
  border-color: hsl(var(--border));
}

/* ─── Sticky / glass header ─────────────────────────────────── */
html.dark header,
html.dark [class*="header"][class*="sticky"],
html.dark [data-radix-popper-content-wrapper] > div {
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
html.dark header {
  background-color: rgba(0, 0, 0, 0.72) !important;
  border-bottom: 1px solid #1f1f1f;
}

/* ─── Buttons ───────────────────────────────────────────────── */
html.dark button[class*="bg-primary"],
html.dark .bg-primary {
  background-color: #ededed !important;
  color: #000000 !important;
}
html.dark button[class*="bg-primary"]:hover,
html.dark .bg-primary:hover {
  background-color: #c8c8c8 !important;
}

html.dark a[class*="text-primary-accent"],
html.dark .text-primary-accent {
  color: #0070f3 !important;
}

html.dark *:focus-visible {
  outline: 2px solid #6f6f6f;
  outline-offset: 2px;
}

/* ─── Inputs ────────────────────────────────────────────────── */
html.dark input,
html.dark textarea,
html.dark select,
html.dark [class*="bg-input"] {
  background-color: #0a0a0a !important;
  border-color: #2e2e2e !important;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #6f6f6f !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #6f6f6f !important;
}

/* ─── Code blocks ───────────────────────────────────────────── */
html.dark pre,
html.dark .prose pre,
html.dark code:not(pre code) {
  background-color: #0a0a0a !important;
  border: 1px solid #1f1f1f;
}

/* ─── Tables ────────────────────────────────────────────────── */
html.dark thead th {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f6f6f !important;
  border-bottom: 1px solid #1f1f1f;
}
html.dark tbody tr {
  border-bottom: 1px solid #1f1f1f;
}
html.dark tbody tr:hover td {
  background-color: #111111;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
html.dark aside,
html.dark [class*="sidebar"],
html.dark nav[class*="side"] {
  background-color: #000000 !important;
  border-right-color: #1f1f1f !important;
}

/* ─── Scrollbars ────────────────────────────────────────────── */
html.dark::-webkit-scrollbar,
html.dark *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html.dark::-webkit-scrollbar-track,
html.dark *::-webkit-scrollbar-track {
  background: transparent;
}
html.dark::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb {
  background: #2e2e2e;
  border-radius: 9999px;
}
html.dark::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover {
  background: #3d3d3d;
}

/* ─── Selection ─────────────────────────────────────────────── */
html.dark ::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #ededed;
}

/* ─── Tailwind accent overrides ─────────────────────────────── */
html.dark [class*="bg-green"][class*="500"],
html.dark [class*="bg-emerald"][class*="500"] {
  background-color: #50e3c2 !important;
}
html.dark [class*="bg-red"][class*="500"] {
  background-color: #ff4444 !important;
}
html.dark [class*="bg-blue"][class*="500"],
html.dark [class*="bg-blue"][class*="600"] {
  background-color: #0070f3 !important;
}
html.dark [class*="bg-amber"][class*="500"],
html.dark [class*="bg-yellow"][class*="500"] {
  background-color: #f5a623 !important;
}
html.dark [class*="bg-purple"][class*="500"],
html.dark [class*="bg-violet"][class*="500"] {
  background-color: #7928ca !important;
}

/* ─── Subtle hero radial gradient ───────────────────────────── */
html.dark main::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 60%);
}


/* ─── Fix tinted Input / Output panels ──────────────────────── */
/* Langfuse uses bg-accent-light-blue/-green for the I/O code panels.
   Force them to neutral dark surfaces so JSON reads cleanly. */
html.dark .bg-accent-light-blue,
html.dark .bg-accent-light-green,
html.dark [class*="bg-accent-light-blue"],
html.dark [class*="bg-accent-light-green"] {
  background-color: #0a0a0a !important;
  border-color: #1f1f1f !important;
}
html.dark .text-accent-dark-blue,
html.dark .text-accent-dark-green,
html.dark [class*="text-accent-dark-blue"],
html.dark [class*="text-accent-dark-green"] {
  color: #ededed !important;
}

/* JSON pretty-print / syntax-highlight tokens — kill the tints */
html.dark .json-formatter-row,
html.dark .json-formatter-key,
html.dark .json-formatter-string,
html.dark .json-formatter-number,
html.dark .json-formatter-boolean,
html.dark .json-formatter-null {
  color: #ededed !important;
}
html.dark .json-formatter-string { color: #a1a1a1 !important; }
html.dark .json-formatter-number { color: #79ffe1 !important; }
html.dark .json-formatter-boolean { color: #f5a623 !important; }
html.dark .json-formatter-null { color: #6f6f6f !important; }
html.dark .json-formatter-key { color: #50e3c2 !important; }

/* Catch the generic shiki / prism code colors used by I/O viewer */
html.dark pre code,
html.dark pre code * {
  color: #ededed;
}
html.dark pre code .token.string,
html.dark pre code .token.attr-value { color: #a1a1a1 !important; }
html.dark pre code .token.property,
html.dark pre code .token.attr-name,
html.dark pre code .token.tag { color: #50e3c2 !important; }
html.dark pre code .token.number { color: #79ffe1 !important; }
html.dark pre code .token.boolean,
html.dark pre code .token.constant { color: #f5a623 !important; }
html.dark pre code .token.keyword { color: #0070f3 !important; }
html.dark pre code .token.comment { color: #6f6f6f !important; font-style: italic; }
html.dark pre code .token.punctuation { color: #6f6f6f !important; }

/* ─── Tables inside cards: rows should not be pure black ────── */
/* When a table sits inside a #111 card, our earlier
   .bg-background → #000 rule made rows look like cutouts.
   Inherit transparent so card color shows through. */
html.dark .bg-card table,
html.dark .bg-card tbody,
html.dark .bg-card thead,
html.dark .bg-card tr,
html.dark .bg-card td,
html.dark .bg-card th,
html.dark [class*="card"] table,
html.dark [class*="card"] tbody tr,
html.dark [class*="card"] thead tr,
html.dark [class*="card"] td,
html.dark [class*="card"] th {
  background-color: transparent !important;
}
html.dark [class*="card"] tbody tr:hover td,
html.dark .bg-card tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
html.dark [class*="card"] tbody tr,
html.dark .bg-card tbody tr {
  border-bottom-color: #1f1f1f !important;
}

/* Numbers / metrics ($0.127047, "33.73K", "$0") — bright foreground */
html.dark [class*="card"] td,
html.dark .bg-card td {
  color: #ededed !important;
}

/* "Total cost" / "Tokens" type secondary labels */
html.dark .text-muted-foreground {
  color: #a1a1a1 !important;
}