:root {
  --nf-brand: #F1B90A;
  --nf-brand-inverse: #F1B90A;
}

@font-face {
  font-family: 'Canva Sans Sans';
  src: local('Canva Sans Sans'), url('/fonts/canva-sans-latin.cb8040b8.woff2') format('woff2'),
    url('/fonts/canva-sans-latin.cb8040b8.ttf') format('truetype');
  font-display: swap;
}

body {
  background-color: #0C0D12;
  --surface: #14141E;
  --surface-elevated: #14141E;
  --background: #0C0D12;
  --background-card: #14141E;
  --foreground: #fff;
  --surface-hover: #282828;
  --foreground-muted: #ccc;
  --accent-primary: #F1B90A;
  font-family: Canva Sans Sans, sans-serif;
}

.terminal-header {
  font-weight: 400;
}

.font-bold {
  font-weight: 500;
}

[data-chart-container="true"] {
  background-color: var(--surface);
}

.bg-gray-300 {
  background-color: #383838;
}

svg text tspan,
.border-gray-800,
[alt="Grok 4"],
[src="/coins/xrp.svg"],
[src="/logos/Grok_logo.webp"],
[class*="text-gray-"]:not([style*="color: rgb(0, 0, 0)"]):not([style*="color:#000000"]):not([style*="color: #000000"]) {
  filter: invert(100%) !important;
}

.border-gray-600 {
  background-color: white !important;
  border-color: #282828 !important;
}

.hover\:text-blue-600:hover {
  color: var(--accent-primary);
}

.border-gray-300 {
  border-color: #383838;
}

.bg-gray-100 {
  background-color: rgb(25 25 40/var(--tw-bg-opacity,1));
}

.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-50:hover {
  background-color: rgb(25 25 40/var(--tw-bg-opacity,1))
}


.bg-white {
  background-color: var(--surface);
}

.bg-black {
  background-color: var(--foreground);
}

.text-black {
  color: var(--foreground);
}

.text-white {
  color: #000;
}

/* body {
  filter: invert(100%);
}

img, svg {
  filter: invert(100%);
} */

.bg-gray-50 {
  background-color: rgb(235 235 225) !important;

  filter: invert(100%);
  img, svg {
    filter: invert(100%);
  }
}

nav {
  background-color: var(--background-card) !important;
}

.min-h-screen:before,
nav:before {
  background-image: none;
}

.text-\[\#E6CE19\] {
  color: #E6CE19;
}
.hover\:text-\[\#E6CE19\]:hover {
  color: #E6CE19;
}

.bg-\[\#14141E\] {
  background-color: #14141E;
}

.text-white\/80 {
  color: rgba(255, 255, 255, 0.8);
}