@import "tailwindcss";

@theme {
  --color-background: #0b1326;
  --color-surface: #131b2e;
  --color-surface-dim: #0b1326;
  --color-surface-bright: #31394d;
  --color-surface-container: #171f33;
  --color-on-surface: #dae2fd;
  
  --color-primary: #f93a4a;
  --color-primary-text: #ff8c95;
  --color-on-primary: #ffffff;
  
  --color-secondary: #ffb300;
  --color-on-secondary: #4d3600;
  
  --color-border: #2d3449;

  --font-sans: 'Inter', sans-serif;
  --font-display: 'Plus Jakarta Sans', sans-serif;
}

body {
  @apply bg-background text-on-surface font-sans antialiased;
}

h1, h2, h3, h4, h5, h6, .font-display {
  @apply font-display tracking-tight text-white;
}

/* Custom glow utility */
.glow-primary {
  box-shadow: 0 0 20px rgba(249, 58, 74, 0.2);
}
.glow-primary:hover {
  box-shadow: 0 0 30px rgba(249, 58, 74, 0.4);
}