:root {
  --bg-deep: #0f0e0c;
  --bg: #161412;
  --bg-elevated: #1e1b17;
  --bg-surface: rgba(30, 27, 23, 0.9);
  --border: rgba(201, 168, 76, 0.1);
  --border-strong: rgba(201, 168, 76, 0.22);
  --text: #e6ddd0;
  --muted-color: #a39682;
  --text-dim: #968a76;
  --gold: #c9a84c;
  --gold-soft: rgba(201, 168, 76, 0.12);
  --emerald: #6b9f82;
  --copper: #b87333;
  --danger: #c2524a;
  --danger-soft: rgba(194, 82, 74, 0.12);
  --accent: #c9a84c;
  --accent-2: #b87333;
  --accent-3: #6b9f82;
  --font-display: "Crimson Pro", "Georgia", serif;
  --font-body: "Outfit", "Helvetica Neue", sans-serif;
  --font-sans: "Outfit", "Helvetica Neue", sans-serif;
  --font-serif: "Crimson Pro", "Georgia", serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(201, 168, 76, 0.08);
  --chart-line: #c9a84c;
  --chart-fill: rgba(201, 168, 76, 0.15);
  --chart-grid: rgba(201, 168, 76, 0.08);
  --chart-label: rgba(230, 221, 208, 0.7);
  --series-1: #b08d35;
  --series-2: #2a669f;
  --series-3: #bf4306;
  --series-4: #24a592;
  --series-5: #8e6ac7;
  --series-other: #6f675c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(201, 168, 76, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 100%, rgba(107, 159, 130, 0.05) 0%, transparent 40%);
  min-height: 100vh;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 10000;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

::selection {
  background: rgba(201, 168, 76, 0.25);
  color: var(--text);
}

:focus-visible {
  outline: 2px solid rgba(201, 168, 76, 0.5);
  outline-offset: 2px;
}

input::placeholder {
  color: var(--text-dim);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 168, 76, 0.25);
}

/* Animations */

@keyframes panelReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes markSpin {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.7);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}