@import "tailwindcss";

@theme {
  --color-background: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-dim: #f1f5f9;
  --color-surface-bright: #ffffff;
  --color-surface-container: #ffffff;
  --color-on-surface: #0f172a;
  
  --color-primary: #f93a4a;
  --color-primary-text: #f93a4a;
  --color-on-primary: #ffffff;
  
  --color-secondary: #ffb300;
  --color-on-secondary: #4d3600;
  
  --color-border: #e2e8f0;

  --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-on-surface;
}

/* 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);
}
