@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* Brand tokens — single source of truth */
--brand: #DA7756;
--brand-dark: #B8553A;
--brand-light: #E8956A;
--brand-medium: #C4704E;
/* Light theme — Neutral surfaces, terra accent */
--background: 249 249 249; /* Clean off-white */
--foreground: 28 28 30; /* Near black */
--surface: 255 255 255; /* Pure white for cards */
--surface-dim: 244 244 245; /* Slightly dimmed */
--surface-hover: 240 240 242; /* Hover */
--surface-active: 232 232 235; /* Active */
/* Elevated surfaces (dropdowns, modals) */
--surface-elevated: 255 255 255;
--surface-overlay: 255 255 255;
--border: 224 218 210; /* Very slight warm tint */
--border-subtle: 236 230 222; /* Subtle warm tint */
--muted: 118 110 100; /* Warm gray */
--muted-foreground: 152 142 130;
/* Primary — Terracotta */
--primary: 218 119 86; /* #DA7756 */
--primary-hover: 184 85 58; /* #B8553A (deep sienna) */
--primary-foreground: 255 255 255;
/* Semantic colors */
--success: 34 197 94;
--warning: 245 158 11;
--error: 239 68 68;
--info: 59 130 246;
/* Card specific */
--card: 255 255 255;
--card-foreground: 28 28 30;
/* Input */
--input: 255 255 255;
--input-border: 216 210 202;
/* Shadows — neutral with subtle warmth */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06);
}
.dark {
/* Dark theme — Neutral dark with terra accent */
--background: 20 20 22; /* Dark neutral */
--foreground: 247 244 240; /* Slightly warm white */
--surface: 30 30 28; /* Card surface */
--surface-dim: 24 24 22;
--surface-hover: 44 42 38;
--surface-active: 56 54 50;
/* Elevated surfaces */
--surface-elevated: 38 37 34;
--surface-overlay: 46 44 40;
--border: 55 48 42; /* Slight warm tint */
--border-subtle: 44 38 32;
--muted: 160 150 140; /* Warm gray */
--muted-foreground: 125 118 108;
/* Primary — Warm coral (brighter for dark mode readability) */
--primary: 232 149 106; /* #E8956A */
--primary-hover: 218 119 86; /* #DA7756 */
--primary-foreground: 20 20 22;
/* Semantic colors — slightly brighter */
--success: 74 222 128;
--warning: 251 191 36;
--error: 248 113 113;
--info: 96 165 250;
/* Card */
--card: 30 30 33;
--card-foreground: 244 244 247;
/* Input */
--input: 38 37 41;
--input-border: 56 50 44;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}
* {
@apply border-[rgb(var(--border))];
}
body {
@apply bg-[rgb(var(--background))] text-[rgb(var(--foreground))];
@apply antialiased;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
/* Custom scrollbar */
::-webkit-scrollbar {
@apply w-2 h-2;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
}
::-webkit-scrollbar-thumb {
@apply rounded-full;
background: rgb(var(--muted-foreground) / 0.3);
}
::-webkit-scrollbar-thumb:hover {
background: rgb(var(--muted-foreground) / 0.5);
}
}
@layer components {
/* Card with proper elevation */
.card {
@apply bg-[rgb(var(--card))] rounded-xl border border-[rgb(var(--border-subtle))];
box-shadow: var(--shadow);
}
.card-elevated {
@apply bg-[rgb(var(--surface-elevated))] rounded-xl border border-[rgb(var(--border))];
box-shadow: var(--shadow-lg);
}
/* Dropdown/Popover styles */
.dropdown-menu {
@apply bg-[rgb(var(--surface-overlay))] rounded-xl border border-[rgb(var(--border))];
box-shadow: var(--shadow-xl);
}
/* Input styles */
.input {
@apply bg-[rgb(var(--input))] border border-[rgb(var(--input-border))] rounded-lg;
@apply px-3 py-2 text-sm;
@apply focus:outline-none focus:ring-2 focus:ring-[rgb(var(--primary))] focus:border-transparent;
@apply placeholder:text-[rgb(var(--muted-foreground))];
}
/* Button base */
.btn {
@apply inline-flex items-center justify-center gap-2 rounded-lg font-medium;
@apply transition-all duration-150 ease-out;
@apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[rgb(var(--primary))];
@apply disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-primary {
@apply btn bg-[rgb(var(--primary))] text-[rgb(var(--primary-foreground))];
@apply hover:bg-[rgb(var(--primary-hover))];
@apply active:scale-[0.98];
}
.btn-ghost {
@apply btn bg-transparent text-[rgb(var(--foreground))];
@apply hover:bg-[rgb(var(--surface-hover))];
}
/* Sidebar */
.sidebar {
@apply bg-[rgb(var(--surface))] border-r border-[rgb(var(--border-subtle))];
}
/* Menu item */
.menu-item {
@apply flex items-center gap-3 px-3 py-2 rounded-lg;
@apply text-[rgb(var(--muted))] hover:text-[rgb(var(--foreground))];
@apply hover:bg-[rgb(var(--surface-hover))] transition-colors;
}
.menu-item-active {
@apply bg-[rgb(var(--primary))/10] text-[rgb(var(--primary))];
@apply hover:bg-[rgb(var(--primary))/15];
}
}
@layer utilities {
.drag-region {
-webkit-app-region: drag;
}
.no-drag {
-webkit-app-region: no-drag;
}
/* Text utilities */
.text-muted {
@apply text-[rgb(var(--muted))];
}
/* Surface utilities */
.surface {
@apply bg-[rgb(var(--surface))];
}
.surface-elevated {
@apply bg-[rgb(var(--surface-elevated))];
}
/* Responsive auto-fill grid for cards */
.auto-fill-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: 1.5rem;
}
/* Larger cards on wider screens */
@media (min-width: 1280px) {
.auto-fill-cards {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.75rem;
}
}
@media (min-width: 1536px) {
.auto-fill-cards {
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem;
}
}
@media (min-width: 1920px) {
.auto-fill-cards {
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 2rem;
}
}
}
