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

@layer components {
  /* .btn-primary {
      @apply py-1.5 px-3 text-center bg-blue-700 rounded-md text-white;
  } */
}

/* Configure Tailwind CSS to use 'Inter' font and enable dark mode */
:root {
    --color-primary-light: #4F46E5; /* Indigo-600 */
    --color-primary-dark: #06B6D4;  /* Cyan-600 */
    --color-secondary-light: #6366F1; /* Indigo-500 */
    --color-secondary-dark: #0EA5E9; /* Sky-500 */
    --text-light: #1F2937; /* Gray-900 */
    --text-dark: #F3F4F6;  /* Gray-100 */
    --bg-light: #F3F4F6;   /* Gray-100 */
    --bg-dark: #111827;    /* Gray-900 */
    --card-bg-light: #FFFFFF;
    --card-bg-dark: #1F2937; /* Gray-800 */
    --border-light: #D1D5DB; /* Gray-300 */
    --border-dark: #4B5563;  /* Gray-600 */
    --placeholder-light: #6B7280; /* Gray-500 */
    --placeholder-dark: #9CA3AF; /* Gray-400 */
}

.dark {
    --color-primary-light: #06B6D4; /* Cyan-600 */
    --color-primary-dark: #4F46E5;  /* Indigo-600 */
    --color-secondary-light: #0EA5E9; /* Sky-500 */
    --color-secondary-dark: #6366F1; /* Indigo-500 */
    --text-light: #F3F4F6;  /* Gray-100 */
    --text-dark: #1F2937;   /* Gray-900 */
    --bg-light: #111827;    /* Gray-900 */
    --bg-dark: #F3F4F6;    /* Gray-100 */
    --card-bg-light: #1F2937; /* Gray-800 */
    --card-bg-dark: #FFFFFF;
    --border-light: #4B5563; /* Gray-600 */
    --border-dark: #D1D5DB; /* Gray-300 */
    --placeholder-light: #9CA3AF; /* Gray-400 */
    --placeholder-dark: #6B7280; /* Gray-500 */
}

body {
    font-family: 'Inter', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--bg-light);
    color: var(--text-light);
}

.dark body {
    background-color: var(--bg-dark);
    color: var(--text-dark);
}

/* Custom styles for gradients and text-clip based on theme */
.hero-title-light {
    color: var(--color-primary-light);
}
.hero-title-dark {
    background-image: linear-gradient(to right, var(--color-primary-light), var(--color-secondary-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Scroll behavior for smooth scrolling to sections */
html {
    scroll-behavior: smooth;
}