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

@layer base {
  :root {
    /* * Semantic colors */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;

    /* * Brand colors - Orange used as accent only */
    --color-brand-orange: #FD5E0F;
    
    /* * Neutral greys for UI */
    --color-neutral-50: #fafafa;
    --color-neutral-100: #f5f5f5;
    --color-neutral-200: #e5e5e5;
    --color-neutral-300: #d4d4d4;
    --color-neutral-400: #a3a3a3;
    --color-neutral-500: #737373;
    --color-neutral-600: #525252;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    
    /* * Dark mode support */
    --color-bg: #ffffff;
    --color-text: #171717;
  }
  
  .dark {
    --color-bg: #0a0a0a;
    --color-text: #fafafa;
  }
  
  * {
    @apply border-neutral-200 dark:border-neutral-800 transition-colors duration-300 ease-in-out;
  }
  
  body {
    @apply bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-50 transition-colors duration-300 ease-in-out;
    font-family: var(--font-plus-jakarta-sans), system-ui, sans-serif;
    background-image: 
      radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%),
      radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.03) 0px, transparent 50%);
    background-attachment: fixed;
  }
  
  .dark body {
    background-image: 
      radial-gradient(at 0% 0%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%),
      radial-gradient(at 100% 100%, hsla(20, 98%, 52%, 0.05) 0px, transparent 50%);
  }
}

@layer components {
  /* * Reusable component styles */
  .btn-primary {
    @apply bg-brand-orange text-white px-5 py-2.5 rounded-xl font-semibold shadow-sm shadow-orange-200 dark:shadow-none hover:shadow-orange-300 dark:hover:shadow-brand-orange/20 hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
  }
  
  .btn-secondary {
    @apply bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white px-5 py-2.5 rounded-xl font-medium hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-all duration-200 shadow-sm hover:shadow-md dark:shadow-none focus:outline-none focus:ring-2 focus:ring-neutral-200 dark:focus:ring-neutral-700 focus:ring-offset-2 dark:focus:ring-offset-neutral-900;
  }
}