:root {
  --c-primary: #8ed5ff;
  --c-secondary: #4edea3;
  --c-tertiary: #c7c8ff;
  --c-background: #0b1326;
  --c-surface: #0b1326;
  --c-surface-container: #171f33;
  --c-surface-container-low: #131b2e;
  --c-surface-container-high: #222a3d;
  --c-surface-container-highest: #2d3449;
  --c-on-surface: #dae2fd;
  --c-on-background: #dae2fd;
  --c-on-surface-variant: #bdc8d1;
  --c-primary-container: #38bdf8;
  --c-on-primary-container: #004965;
  --c-primary-fixed-dim: #7bd0ff;
  --c-outline-variant: #3e484f;
  --c-error: #ffb4ab;
}

html, body {
  background: var(--c-background);
  color: var(--c-on-background);
  font-family: Lexend, system-ui, sans-serif;
}

/* Color fallbacks (applied before Tailwind CDN config parses) */
.bg-background { background-color: var(--c-background) !important; }
.bg-surface { background-color: var(--c-surface) !important; }
.bg-surface-container { background-color: var(--c-surface-container) !important; }
.bg-surface-container-low { background-color: var(--c-surface-container-low) !important; }
.bg-surface-container-high { background-color: var(--c-surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--c-surface-container-highest) !important; }
.bg-primary { background-color: var(--c-primary) !important; }
.bg-primary-container { background-color: var(--c-primary-container) !important; }
.bg-secondary { background-color: var(--c-secondary) !important; }
.bg-tertiary { background-color: var(--c-tertiary) !important; }

.text-primary { color: var(--c-primary) !important; }
.text-primary-fixed-dim { color: var(--c-primary-fixed-dim) !important; }
.text-secondary { color: var(--c-secondary) !important; }
.text-secondary-fixed-dim { color: var(--c-secondary) !important; }
.text-tertiary { color: var(--c-tertiary) !important; }
.text-on-surface { color: var(--c-on-surface) !important; }
.text-on-background { color: var(--c-on-background) !important; }
.text-on-surface-variant { color: var(--c-on-surface-variant) !important; }
.text-on-primary-container { color: var(--c-on-primary-container) !important; }
.text-error { color: var(--c-error) !important; }

.border-primary { border-color: var(--c-primary) !important; }
.border-primary-container { border-color: var(--c-primary-container) !important; }
.border-outline-variant { border-color: var(--c-outline-variant) !important; }
.border-l-secondary { border-left-color: var(--c-secondary) !important; }

/* Font size tokens from Stitch design (used outside Tailwind config reach) */
.font-stats-xl { font-size: 64px; line-height: 64px; font-weight: 700; }
.font-headline-lg { font-size: 32px; line-height: 40px; font-weight: 600; }
.font-headline-md { font-size: 24px; line-height: 32px; font-weight: 600; }
.font-label-caps, .text-label-caps { font-size: 12px; line-height: 16px; letter-spacing: 0.05em; font-weight: 600; }
.font-body-md { font-size: 16px; line-height: 24px; }
.font-body-lg { font-size: 18px; line-height: 28px; }
.font-display { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; font-weight: 700; }
.text-stats-xl { font-size: 64px; line-height: 64px; font-weight: 700; }
.text-headline-lg { font-size: 32px; line-height: 40px; font-weight: 600; }
.text-headline-md { font-size: 24px; line-height: 32px; font-weight: 600; }
.text-body-md { font-size: 16px; line-height: 24px; }
.text-body-lg { font-size: 18px; line-height: 28px; }

/* Spacing tokens */
.p-stack-md { padding: 16px; }
.p-stack-lg { padding: 32px; }
.py-stack-md { padding-top: 16px; padding-bottom: 16px; }
.py-stack-lg { padding-top: 32px; padding-bottom: 32px; }
.px-container-margin { padding-left: 24px; padding-right: 24px; }
.mb-stack-md { margin-bottom: 16px; }
.mb-stack-lg { margin-bottom: 32px; }
.mt-stack-md { margin-top: 16px; }
.mt-stack-lg { margin-top: 32px; }
.space-y-stack-md > * + * { margin-top: 16px; }
.space-y-stack-sm > * + * { margin-top: 8px; }
.space-y-stack-lg > * + * { margin-top: 32px; }
.gap-gutter { gap: 16px; }
.gap-stack-md { gap: 16px; }
.gap-stack-sm { gap: 8px; }

.glass, .glass-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.1);
}
.glow-primary { box-shadow: 0 0 20px rgba(56, 189, 248, 0.15); }
.liquid-fill {
  background: linear-gradient(180deg, #38bdf8 0%, #0ea5e9 100%);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
  transition: height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { min-height: max(884px, 100dvh); }
.hide-scrollbar::-webkit-scrollbar { display: none; }

.avatar-fallback {
  background: linear-gradient(135deg, #38bdf8 0%, #4edea3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0b1326;
  font-weight: 800;
  font-family: Lexend, sans-serif;
}

.toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #dae2fd;
  padding: 12px 20px;
  border-radius: 12px;
  z-index: 100;
  opacity: 0;
  transition: all 300ms ease;
  pointer-events: none;
  font-family: Lexend, sans-serif;
  font-size: 14px;
  max-width: 90%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: rgba(255, 180, 171, 0.5); color: #ffb4ab; }
.toast.success { border-color: rgba(78, 222, 163, 0.5); color: #4edea3; }