@import "tailwindcss";

@theme inline {
  --color-brand-50: #eef6ff;
  --color-brand-100: #d9eaff;
  --color-brand-200: #bcdbff;
  --color-brand-300: #8ec5ff;
  --color-brand-400: #59a4ff;
  --color-brand-500: #3381ff;
  --color-brand-600: #1a5ff5;
  --color-brand-700: #1349e1;
  --color-brand-800: #163cb6;
  --color-brand-900: #18378f;
  --color-brand-950: #142357;

  --color-surface-50: #f8fafc;
  --color-surface-100: #f1f5f9;
  --color-surface-200: #e2e8f0;
  --color-surface-300: #cbd5e1;
  --color-surface-400: #94a3b8;
  --color-surface-500: #64748b;
  --color-surface-600: #475569;
  --color-surface-700: #334155;
  --color-surface-800: #1e293b;
  --color-surface-900: #0f172a;
  --color-surface-950: #020617;

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-surface-950);
  color: var(--color-surface-100);
  font-family: var(--font-sans);
}

::selection {
  background-color: var(--color-brand-500);
  color: white;
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-300), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.glow-border {
  box-shadow: 0 0 0 1px rgba(51, 129, 255, 0.3),
    0 0 20px rgba(51, 129, 255, 0.1);
}

.hero-glow {
  background: radial-gradient(
    ellipse 80% 60% at 50% -20%,
    rgba(51, 129, 255, 0.15),
    transparent
  );
}
