/* =========================================================================== GreenLab CRM — Design Tokens & Base Styles (vanilla JS) Single source of truth for color, type, spacing, elevation + core components. Usage: copy to /public/css/tokens.css and link FIRST on every page: Dark mode: add class="dark" to . Compose alpha with hsl(var(--token) / .5). =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); :root { /* Brand & surfaces (HSL channels) */ --background: 220 24% 96%; --foreground: 224 71% 4%; --card: 0 0% 100%; --card-foreground: 224 71% 4%; --primary: 172 66% 40%; /* GreenLab teal-green */ --primary-foreground: 0 0% 100%; --secondary: 220 14% 96%; --secondary-foreground: 221 39% 11%; --muted: 220 14% 96%; --muted-foreground: 220 9% 46%; --accent: 220 14% 96%; --accent-foreground: 221 39% 11%; --destructive: 0 84% 60%; --destructive-foreground: 210 20% 98%; --border: 220 13% 91%; --input: 220 13% 91%; --ring: 172 66% 40%; /* Status / presence (functional — always pair with icon or label) */ --success: 142 71% 40%; --warning: 38 92% 50%; --info: 217 91% 60%; /* Radius */ --radius: 0.5rem; --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); /* Spacing (4 / 8 rhythm) */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* Elevation */ --shadow-sm: 0 1px 2px rgba(0,0,0,.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.15); /* Type & motion */ --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'Fira Code', ui-monospace, monospace; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 300ms; } .dark { --background: 224 24% 8%; --foreground: 210 20% 96%; --card: 224 20% 11%; --card-foreground: 210 20% 96%; --primary: 172 60% 46%; --primary-foreground: 224 71% 5%; --secondary: 215 20% 18%; --secondary-foreground: 210 20% 96%; --muted: 215 20% 16%; --muted-foreground: 217 12% 65%; --accent: 215 20% 18%; --accent-foreground: 210 20% 96%; --destructive: 0 72% 55%; --destructive-foreground: 210 20% 98%; --border: 215 18% 22%; --input: 215 18% 22%; --ring: 172 60% 46%; --success: 142 64% 45%; --warning: 38 92% 55%; --info: 217 91% 65%; } /* --- Base --- */ *, *::before, *::after { box-sizing: border-box; } * { border-color: hsl(var(--border)); } body { margin: 0; min-height: 100dvh; background-color: hsl(var(--background)); color: hsl(var(--foreground)); font: 400 16px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; } .num { font-variant-numeric: tabular-nums; } :focus-visible { outline: none; box-shadow: 0 0 0 3px hsl(var(--ring) / 0.45); border-radius: var(--radius-sm); } /* --- Buttons (min 44px tap target) --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--radius-md); font: 500 14px/1 var(--font-sans); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn-primary { color: hsl(var(--primary-foreground)); background-color: hsl(var(--primary)); background-image: linear-gradient(135deg, hsl(172 64% 44%), hsl(174 72% 30%)); } .btn-primary:hover:not(:disabled) { background-image: linear-gradient(135deg, hsl(172 66% 48%), hsl(174 74% 33%)); } .btn-secondary { color: hsl(var(--foreground)); background-color: hsl(var(--card)); border-color: hsl(var(--border)); } .btn-secondary:hover:not(:disabled) { background-color: hsl(var(--muted)); } .btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover:not(:disabled) { background-color: hsl(var(--muted)); } .btn-danger { color: hsl(var(--destructive-foreground)); background-color: hsl(var(--destructive)); } /* --- Card --- */ .card { background-color: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: var(--shadow-md); transition: box-shadow var(--dur-base) var(--ease-out); } .card-interactive { cursor: pointer; } .card-interactive:hover { box-shadow: var(--shadow-lg); } /* --- Input --- */ .input { width: 100%; min-height: 44px; padding: 10px 14px; background-color: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); font: 400 16px/1.4 var(--font-sans); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .input::placeholder { color: hsl(var(--muted-foreground)); } .input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .25); } .field-error { color: hsl(var(--destructive)); font-size: 13px; margin-top: 4px; } /* --- Data table (overflow-x for mobile) --- */ .table-wrap { overflow-x: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius); } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th, table.data td { padding: 10px 12px; text-align: left; } table.data thead th { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-weight: 600; cursor: pointer; white-space: nowrap; } table.data tbody tr { border-top: 1px solid hsl(var(--border)); } table.data tbody tr:hover { background: hsl(var(--muted) / .5); } table.data td.num { text-align: right; } /* --- Badges & presence --- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; } .badge-success { background: hsl(var(--success) / .15); color: hsl(var(--success)); } .badge-warning { background: hsl(var(--warning) / .18); color: hsl(38 92% 36%); } .badge-info { background: hsl(var(--info) / .15); color: hsl(var(--info)); } .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dot-online { background: hsl(var(--success)); } .dot-away { background: hsl(var(--warning)); } .dot-offline { background: hsl(var(--muted-foreground)); } /* --- Modal --- */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); display: grid; place-items: center; } .modal { background: hsl(var(--card)); color: hsl(var(--card-foreground)); border-radius: var(--radius); padding: var(--space-xl); box-shadow: var(--shadow-xl); max-width: 500px; width: 90%; } /* --- Chat bubbles --- */ .bubble { max-width: 75%; padding: 8px 12px; border-radius: var(--radius); font-size: 14px; line-height: 1.4; } .bubble-in { background: hsl(var(--muted)); align-self: flex-start; } .bubble-out { background: hsl(var(--primary) / .12); align-self: flex-end; } .bubble time { display: block; margin-top: 2px; font-size: 11px; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; } /* --- Icons (static Lucide SVG) --- */ .icon { width: 20px; height: 20px; stroke-width: 2; stroke: currentColor; fill: none; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 24px; height: 24px; } /* --- Animations --- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .animate-fade-in { animation: fadeIn var(--dur-base) var(--ease-out); } .animate-slide-in { animation: slideIn var(--dur-slow) var(--ease-out); } /* --- Scrollbars --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: hsl(var(--muted) / .5); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .3); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .6); } /* --- Reduced motion (a11y) --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* --- Mobile: prevent iOS input zoom --- */ @media screen and (max-width: 768px) { input, select, textarea { font-size: 16px; } }