@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {

:root {

/* Light theme colors - inspired by website gradient */

--bg-primary: #f8fafc;

--bg-secondary: rgba(255, 255, 255, 0.7);

--bg-tertiary: rgba(239, 246, 255, 0.5);

--text-primary: #1e293b;

--text-secondary: #64748b;

--text-tertiary: #94a3b8;

--border-primary: rgba(226, 232, 240, 0.6);

--border-secondary: #e2e8f0;

--accent-primary: #3b82f6;

--accent-secondary: #60a5fa;

}

.dark {

/* Dark theme colors */

--bg-primary: #0F172A;

--bg-secondary: #1E293B;

--bg-tertiary: #334155;

--text-primary: #F8FAFC;

--text-secondary: #CBD5E1;

--text-tertiary: #94A3B8;

--border-primary: #475569;

--border-secondary: #64748B;

--accent-primary: #60A5FA;

--accent-secondary: #818CF8;

}

body {

margin: 0;

padding: 0;

min-height: 100vh;

font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

background-color: var(--bg-primary);

color: var(--text-primary);

-webkit-font-smoothing: antialiased;

font-weight: 400;

transition: background-color 0.3s ease, color 0.3s ease;

}

h1, h2, h3, h4, h5, h6 {

font-weight: 400;

}

button {

font-weight: 400;

}

label {

font-weight: 400;

}

}