:root {
  --md-primary: 142 84 233;      /* #8b5cf6 */
  --md-secondary: 59 130 246;    /* #3b82f6 */
  --md-tertiary: 236 72 153;     /* #ec4899 */
  --md-surface: 17 24 39;        /* #111827 (gray-900) */
  --md-surface-variant: 31 41 55;/* #1f2937 (gray-800) */
  --md-outline: 255 255 255;     /* white */
}

/* Utilities (can be used with Tailwind arbitrary values) */
.md-surface {
  background-color: rgb(var(--md-surface) / 0.8);
  backdrop-filter: blur(8px);
}
.md-surface-variant {
  background-color: rgb(var(--md-surface-variant) / 0.8);
}
.md-outline {
  border-color: rgb(var(--md-outline) / 0.1);
}
.md-elev-1 {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.md-focus-ring {
  outline: none;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.35);
}

.gradient-text {
  background: linear-gradient(90deg, rgb(var(--md-secondary)), rgb(var(--md-primary)), rgb(var(--md-tertiary)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.glow { box-shadow: 0 0 20px rgba(139, 92, 246, 0.35); }