:root {
  color-scheme: dark;
  --brand-purple: #2dd4bf;
  --surface-submit: #0d9488;
  --surface-submit-hover: #0f766e;
  --ring-primary: #14b8a6;
  --radius: 0.5rem;
}

.dark {
  --presentation: #151913;
  --text-primary: #fbf7ec;
  --text-secondary: #d8d1bd;
  --text-secondary-alt: #a7ad9b;
  --text-tertiary: #788171;
  --header-primary: #101714;
  --header-hover: #17211d;
  --header-button-hover: #1d2923;
  --surface-active: #0d9488;
  --surface-active-alt: #1e3f36;
  --surface-hover: #17211d;
  --surface-hover-alt: #24322b;
  --surface-primary: #101714;
  --surface-primary-alt: #131c18;
  --surface-primary-contrast: #1d2923;
  --surface-secondary: #151d18;
  --surface-secondary-alt: #1d2923;
  --surface-tertiary: #223129;
  --surface-tertiary-alt: #2b3b31;
  --surface-dialog: #121a16;
  --surface-chat: #0d1311;
  --border-light: rgba(214, 168, 95, 0.13);
  --border-medium: rgba(214, 168, 95, 0.22);
  --border-medium-alt: rgba(45, 212, 191, 0.24);
  --border-heavy: rgba(45, 212, 191, 0.32);
  --border-xheavy: rgba(214, 168, 95, 0.42);
  --background: 150 21% 8%;
  --foreground: 43 62% 95%;
  --card: 150 20% 10%;
  --card-foreground: 43 62% 95%;
  --primary: 174 72% 43%;
  --primary-foreground: 43 62% 95%;
  --secondary: 148 22% 14%;
  --secondary-foreground: 43 62% 95%;
  --muted: 148 18% 16%;
  --muted-foreground: 83 12% 64%;
  --accent: 38 58% 61%;
  --accent-foreground: 150 21% 8%;
  --border: 38 32% 25%;
  --input: 148 18% 18%;
  --ring: 174 72% 43%;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.18), transparent 24rem),
    radial-gradient(circle at 92% 8%, rgba(214, 168, 95, 0.13), transparent 28rem),
    linear-gradient(135deg, rgba(251, 247, 236, 0.035), transparent 32rem),
    var(--surface-primary);
  font-variant-numeric: tabular-nums;
}

#root,
main {
  background: transparent;
}

a,
button,
[role="button"],
input,
textarea,
select {
  transition-property: background-color, border-color, box-shadow, color, opacity, scale, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

button:active,
[role="button"]:active {
  scale: 0.96;
}

input,
textarea,
[contenteditable="true"] {
  caret-color: #2dd4bf;
}

input:focus,
textarea:focus,
[contenteditable="true"]:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.5), 0 0 0 5px rgba(45, 212, 191, 0.08);
}

aside,
nav {
  background:
    linear-gradient(180deg, rgba(16, 23, 20, 0.98), rgba(13, 19, 17, 0.96)),
    var(--surface-secondary);
  box-shadow: inset -1px 0 rgba(214, 168, 95, 0.14);
}

[role="dialog"],
[data-radix-popper-content-wrapper] > * {
  background:
    linear-gradient(180deg, rgba(21, 29, 24, 0.98), rgba(16, 23, 20, 0.98)),
    var(--surface-dialog);
  box-shadow:
    0 0 0 1px rgba(214, 168, 95, 0.14),
    0 24px 80px rgba(0, 0, 0, 0.42);
}

form {
  text-wrap: pretty;
}

form input,
form textarea {
  background-color: rgba(251, 247, 236, 0.045);
  border-color: rgba(214, 168, 95, 0.18);
}

form button[type="submit"] {
  min-height: 40px;
  background:
    linear-gradient(135deg, #0d9488, #0f766e 56%, #244c3e);
  color: #fbf7ec;
  border: 1px solid rgba(45, 212, 191, 0.38);
}

button[type="submit"],
[data-testid="send-button"] {
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.28),
    0 12px 32px rgba(20, 184, 166, 0.22);
}

button[type="submit"]:hover,
[data-testid="send-button"]:hover {
  box-shadow:
    0 0 0 1px rgba(214, 168, 95, 0.32),
    0 16px 42px rgba(45, 212, 191, 0.24);
  transform: translateY(-1px);
}

.prose,
.markdown {
  --tw-prose-body: #e6deca;
  --tw-prose-headings: #fbf7ec;
  --tw-prose-links: #2dd4bf;
  --tw-prose-bold: #fbf7ec;
  --tw-prose-code: #f3c776;
  --tw-prose-pre-bg: #0b100e;
  text-wrap: pretty;
}

::selection {
  background: rgba(45, 212, 191, 0.32);
  color: #fbf7ec;
}