@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Primary Colors */
    --color-primary: #1a57a1; /* primary blue */
    --color-primary-light: #386cb5; /* medium blue */
    --color-primary-dark: #194075; /* dark blue */
    
    /* Neutral Colors */
    --color-background: #f5f6f5; /* off-white/light gray */
    --color-surface: #FFFFFF; /* white */
    --color-border: #d5e4ef; /* light blue */
    --color-text-primary: #0F172A; /* slate-900 */
    --color-text-secondary: #475569; /* slate-600 */
    --color-text-tertiary: #94A3B8; /* slate-400 */
    
    /* Semantic Colors */
    --color-success: #10B981; /* emerald-500 */
    --color-warning: #F59E0B; /* amber-500 */
    --color-error: #F43F5E; /* rose-500 */
    --color-info: #0EA5E9; /* sky-500 */
    --color-creative: #D946EF; /* fuchsia-500 */
    --color-tech: #06B6D4; /* cyan-500 */
  }
  
  body {
    @apply font-inter bg-background text-text-primary;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-montserrat;
  }
  
  code {
    @apply font-fira;
  }
}

@layer components {
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-md text-base font-medium transition-colors duration-200;
  }
  
  .btn-primary {
    @apply bg-primary text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
  }
  
  .btn-secondary {
    @apply bg-white text-primary border border-primary hover:bg-primary-light hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
  }
  
  .btn-outline {
    @apply border border-border text-text-primary hover:bg-background focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary;
  }
  
  .card {
    @apply bg-surface rounded-lg shadow-sm border border-border p-6;
  }
}