:root {
  /* Color tokens — deep, controlled, financial */
  --bg-void: #08090c;
  --bg-base: #0c0d11;
  --bg-elevated: #131419;
  --bg-elevated-2: #191b21;
  --surface-card: #14151b;
  --surface-card-hover: #191b22;
  --border-hairline: rgba(255, 255, 255, 0.06);
  --border-soft: rgba(255, 255, 255, 0.09);

  --text-primary: #f5f6f8;
  --text-secondary: #979bab;
  --text-tertiary: #5c6070;

  --brand-primary: #5b6dfa;
  --brand-primary-soft: rgba(91, 109, 250, 0.14);
  --brand-gradient: linear-gradient(135deg, #5b6dfa 0%, #7c5cf0 100%);

  --success: #3ddc97;
  --success-soft: rgba(61, 220, 151, 0.12);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --warning: #f5a623;
  --warning-soft: rgba(245, 166, 35, 0.12);

  /* Type — a single primary typeface throughout. Both variables point to
     the same family so every existing var(--font-display)/var(--font-body)
     usage across the CSS stays consistent without needing renamed. */
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius — controlled, not maximal */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Shadow — subtle, single-source, no stacked glows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 12px 28px -18px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 20px 44px -20px rgba(0, 0, 0, 0.55);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;
  --dur-med: 220ms;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

#root,
#app {
  min-height: 100vh;
  background: var(--bg-void);
  overflow-x: hidden;
}

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

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
}

::selection {
  background: rgba(91, 109, 250, 0.35);
}

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.mono {
  font-family: var(--font-mono);
}

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