@import "tailwindcss";
:root {
/* Light theme (default) */
--color-bg-primary: #ffffff;
--color-bg-secondary: #f9fafb;
--color-bg-tertiary: #f3f4f6;
--color-text-primary: #111827;
--color-text-secondary: #374151;
--color-text-tertiary: #6b7280;
--color-border: #e5e7eb;
--color-border-dark: #d1d5db;
--color-accent: #2563eb;
--color-accent-light: #dbeafe;
--color-accent-lighter: #eff6ff;
}
.dark {
/* Dark theme */
--color-bg-primary: #1f2937;
--color-bg-secondary: #111827;
--color-bg-tertiary: #374151;
--color-text-primary: #f9fafb;
--color-text-secondary: #e5e7eb;
--color-text-tertiary: #d1d5db;
--color-border: #374151;
--color-border-dark: #4b5563;
--color-accent: #3b82f6;
--color-accent-light: #1e3a8a;
--color-accent-lighter: #1e40af;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--color-bg-secondary);
color: var(--color-text-primary);
transition: background-color 0.2s ease, color 0.2s ease;
}
#app {
width: 100%;
height: 100vh;
}
/* Custom Scrollbar Styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: var(--color-bg-secondary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--color-border-dark);
border-radius: 4px;
transition: background 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-text-tertiary);
}
::-webkit-scrollbar-corner {
background: var(--color-bg-secondary);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: var(--color-border-dark) var(--color-bg-secondary);
}
