/* Venture Builder basic theme
 * Brand: Gold/Yellow + Black + White
 */

/* 1) Theme tokens (Chainlit uses hsl(var(--token))) */
:root {
  /* Gold (#FBBF24) ~= hsl(43 96% 56%) */
  --primary: 43 96% 56%;
  --primary-foreground: 0 0% 10%;

  /* Black UI */
  --background: 0 0% 6%;
  --foreground: 0 0% 96%;

  --card: 0 0% 10%;
  --card-foreground: 0 0% 96%;

  --popover: 0 0% 10%;
  --popover-foreground: 0 0% 96%;

  --secondary: 0 0% 14%;
  --secondary-foreground: 0 0% 96%;

  --muted: 0 0% 14%;
  --muted-foreground: 0 0% 70%;

  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 96%;

  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 43 96% 56%;
}

/* If Chainlit applies a .dark class, keep it consistent */
.dark {
  --primary: 43 96% 56%;
  --primary-foreground: 0 0% 10%;
  --background: 0 0% 6%;
  --foreground: 0 0% 96%;
  --card: 0 0% 10%;
  --card-foreground: 0 0% 96%;
  --border: 0 0% 18%;
  --input: 0 0% 18%;
  --ring: 43 96% 56%;
}

/* 2) Global basics */
html, body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

a {
  color: hsl(var(--primary));
}

/* 3) Login page: keep it minimal, but ensure primary shows up */
[data-testid="login-page"] button,
[class*="LoginPage"] button {
  accent-color: hsl(var(--primary));
}

/* Make focused inputs use gold ring */
[data-testid="login-page"] input:focus,
[class*="LoginPage"] input:focus,
[data-testid="login-page"] input:focus-visible,
[class*="LoginPage"] input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

/* 4) Keep your existing AI-message action button tweak (but tied to new tokens) */
.ai-message > div.flex > .flex.items-center.flex-wrap > button {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: 1px solid hsl(var(--primary));
}

.ai-message > div.flex > .flex.items-center.flex-wrap > button:hover {
  background-color: hsl(var(--primary) / 0.9);
}

.ai-message > div.flex > .flex.items-center.flex-wrap > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)),
    0 0 0 4px hsl(var(--ring));
}