@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --warm-bg: #171311;
  --warm-bg-2: #1f1815;
  --warm-panel: rgba(39, 29, 24, 0.82);
  --warm-panel-2: rgba(30, 23, 20, 0.92);
  --warm-border: rgba(239, 228, 210, 0.12);
  --warm-text: #efe4d2;
  --warm-text-muted: #c7b39b;
  --warm-text-soft: #95806d;
  --warm-accent: #f06a2f;
  --warm-accent-strong: #d85b24;
  --warm-bone: #f7efe3;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  background: var(--warm-bg) !important;
  color: var(--warm-text) !important;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(240, 106, 47, 0.20), transparent 58%),
    radial-gradient(720px 420px at 100% 0%, rgba(191, 169, 141, 0.10), transparent 55%),
    radial-gradient(680px 360px at 50% 100%, rgba(240, 106, 47, 0.06), transparent 60%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(239, 228, 210, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 228, 210, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.22));
}

h1,
h2,
h3,
h4,
.logo,
.title,
.font-extrabold,
.font-black {
  font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif !important;
}

.text-white,
.text-gray-100,
.text-gray-200 {
  color: var(--warm-bone) !important;
}

.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-gray-800 {
  color: var(--warm-text-muted) !important;
}

.text-l3blue {
  color: var(--warm-accent) !important;
}

.bg-black,
.bg-l3dark {
  background: var(--warm-bg) !important;
}

.bg-grid-fade {
  background-image:
    radial-gradient(860px 420px at 50% -10%, rgba(240, 106, 47, 0.18), transparent 62%),
    radial-gradient(540px 280px at 78% 0%, rgba(247, 239, 227, 0.06), transparent 60%) !important;
}

.from-black\/40,
.from-black\/50,
.from-black\/60,
.from-black\/70 {
  --tw-gradient-from: rgba(23, 19, 17, 0.56) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(23, 19, 17, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.via-black\/60,
.via-black\/70 {
  --tw-gradient-stops: var(--tw-gradient-from), rgba(23, 19, 17, 0.74) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

.to-black,
.to-black\/90 {
  --tw-gradient-to: rgba(23, 19, 17, 0.98) var(--tw-gradient-to-position) !important;
}

.bg-white\/5,
.bg-black\/30,
.bg-black\/40,
.bg-black\/60,
.bg-black\/70,
.bg-white\/10 {
  background: var(--warm-panel) !important;
}

.bg-white\/5:hover,
.bg-black\/30:hover,
.bg-black\/40:hover,
.bg-black\/60:hover {
  background: rgba(47, 36, 31, 0.9) !important;
}

.border-white\/10,
.border-white\/20,
.border-gray-200,
.border-gray-300 {
  border-color: var(--warm-border) !important;
}

.bg-l3blue {
  background: var(--warm-accent) !important;
}

.bg-l3blue:hover {
  background: var(--warm-accent-strong) !important;
}

.border-l3blue\/60 {
  border-color: rgba(240, 106, 47, 0.55) !important;
}

.hover\:bg-l3blue\/10:hover {
  background: rgba(240, 106, 47, 0.10) !important;
}

.hover\:text-l3blue:hover,
.hover\:text-white:hover {
  color: var(--warm-bone) !important;
}

.selection\:bg-l3blue\/30::selection {
  background: rgba(240, 106, 47, 0.30) !important;
}

.shadow-glow,
.hover\:shadow-glow:hover {
  box-shadow: 0 0 0 1px rgba(240, 106, 47, 0.25), 0 0 28px rgba(240, 106, 47, 0.16) !important;
}

.backdrop-blur-md,
.backdrop-blur-xl {
  backdrop-filter: blur(18px) !important;
}

.bg-gradient-to-r.from-transparent.via-l3blue.to-transparent,
.bg-gradient-to-r.from-transparent.via-l3blue.to-transparent.rounded-full {
  background-image: linear-gradient(to right, transparent, rgba(240, 106, 47, 0.88), transparent) !important;
}

.bg-red-500\/10 {
  background: rgba(145, 49, 32, 0.18) !important;
}

.text-red-400 {
  color: #ffb39a !important;
}

.border-red-400\/30 {
  border-color: rgba(255, 165, 132, 0.28) !important;
}

.bg-green-500\/10 {
  background: rgba(83, 122, 76, 0.18) !important;
}

.text-green-400 {
  color: #c6e5b8 !important;
}

.border-green-400\/30 {
  border-color: rgba(178, 222, 157, 0.28) !important;
}

.bg-indigo-50,
.bg-green-50,
.bg-yellow-50,
.bg-blue-100,
.bg-red-50,
.bg-gray-50,
.bg-white {
  background: var(--warm-panel-2) !important;
}

code,
pre {
  color: #ffd6bf !important;
}

@media (max-width: 768px) {
  body::after {
    opacity: 0.16;
    background-size: 34px 34px;
  }
}