/* ============================================================ cloosio.ai — Design System ============================================================ Foundation file. Every color, font, spacing value, and component style is defined here. Nothing is hardcoded elsewhere — everything references these variables. Dark mode: Uses [data-theme="dark"] on . Toggle: User can switch manually; OS preference is default. ============================================================ */ /* ---------------------------------------- Google Font: DM Sans Clean, geometric, modern. Weights: 400, 500, 600, 700. ---------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&display=swap'); /* ---------------------------------------- CSS Reset — Modern, minimal ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { min-height: 100vh; line-height: 1.6; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ---------------------------------------- Light Theme (Default) ---------------------------------------- */ :root { /* --- Brand --- */ --brand: #10A37F; --brand-hover: #0E8C6B; --brand-light: #E6F7F2; --brand-subtle: rgba(16, 163, 127, 0.08); /* --- Surfaces --- */ --bg-page: #FFFFFF; --bg-surface: #F7F7F8; --bg-surface-hover: #ECECF1; --bg-surface-active: #E3E3E8; --bg-elevated: #FFFFFF; --bg-overlay: rgba(0, 0, 0, 0.5); /* --- Sidebar (always dark) --- */ --sidebar-bg: #171717; --sidebar-surface: #212121; --sidebar-surface-hover: #2A2A2A; --sidebar-text: #ECECF1; --sidebar-text-muted: #8E8EA0; --sidebar-border: #2A2A2A; --sidebar-width: 260px; /* --- Text --- */ --text-primary: #0D0D0D; --text-secondary: #6B6B80; --text-tertiary: #9B9BA4; --text-inverse: #FFFFFF; --text-on-brand: #FFFFFF; /* --- Borders --- */ --border: #E5E5E5; --border-hover: #D1D1D6; --border-focus: var(--brand); /* --- Status Colors --- */ --success: #10B981; --success-light: #ECFDF5; --warning: #F59E0B; --warning-light: #FFFBEB; --danger: #EF4444; --danger-light: #FEF2F2; --info: #3B82F6; --info-light: #EFF6FF; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* --- Typography --- */ --font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; /* Font sizes — using rem for accessibility */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Font weights */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* --- Spacing scale (4px base) --- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* --- Border Radius --- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* --- Z-index scale --- */ --z-sidebar: 40; --z-overlay: 50; --z-modal: 60; --z-toast: 70; } /* ---------------------------------------- Dark Theme ---------------------------------------- */ [data-theme="dark"] { /* --- Surfaces --- */ --bg-page: #0D0D0D; --bg-surface: #171717; --bg-surface-hover: #212121; --bg-surface-active: #2A2A2A; --bg-elevated: #1E1E1E; --bg-overlay: rgba(0, 0, 0, 0.7); /* --- Brand adjustments for dark --- */ --brand-light: rgba(16, 163, 127, 0.15); --brand-subtle: rgba(16, 163, 127, 0.1); /* --- Text --- */ --text-primary: #ECECF1; --text-secondary: #9B9BA4; --text-tertiary: #6B6B80; /* --- Borders --- */ --border: #2A2A2A; --border-hover: #3A3A3A; /* --- Status (slightly lighter for dark bg) --- */ --success-light: rgba(16, 185, 129, 0.15); --warning-light: rgba(245, 158, 11, 0.15); --danger-light: rgba(239, 68, 68, 0.15); --info-light: rgba(59, 130, 246, 0.15); /* --- Shadows (stronger for dark) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4); } /* ---------------------------------------- Base Styles ---------------------------------------- */ body { font-family: var(--font-family); font-size: var(--text-base); font-weight: var(--weight-normal); color: var(--text-primary); background-color: var(--bg-page); transition: background-color var(--transition-base), color var(--transition-base); } /* ---------------------------------------- Typography ---------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--text-primary); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-md); } p { color: var(--text-secondary); line-height: var(--leading-relaxed); } small { font-size: var(--text-sm); color: var(--text-tertiary); } /* ---------------------------------------- Links ---------------------------------------- */ a.link { color: var(--brand); font-weight: var(--weight-medium); transition: color var(--transition-fast); } a.link:hover { color: var(--brand-hover); } /* ---------------------------------------- Buttons ---------------------------------------- */ /* Base button reset */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; border-radius: var(--radius-md); transition: all var(--transition-fast); white-space: nowrap; user-select: none; height: 40px; } .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Primary — green filled */ .btn-primary { background: var(--brand); color: var(--text-on-brand); } .btn-primary:hover:not(:disabled) { background: var(--brand-hover); } .btn-primary:active:not(:disabled) { transform: scale(0.98); } /* Secondary — subtle bg */ .btn-secondary { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover:not(:disabled) { background: var(--bg-surface-hover); border-color: var(--border-hover); } /* Ghost — no bg, just text */ .btn-ghost { color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--bg-surface); color: var(--text-primary); } /* Danger */ .btn-danger { background: var(--danger); color: white; } .btn-danger:hover:not(:disabled) { background: #DC2626; } /* Button sizes */ .btn-sm { height: 32px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); } .btn-lg { height: 48px; padding: var(--space-3) var(--space-6); font-size: var(--text-md); } /* Icon-only button */ .btn-icon { width: 40px; padding: 0; } .btn-icon.btn-sm { width: 32px; } /* ---------------------------------------- Form Inputs ---------------------------------------- */ .input { width: 100%; height: 40px; padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input:hover { border-color: var(--border-hover); } .input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-subtle); } .input::placeholder { color: var(--text-tertiary); } .input:disabled { opacity: 0.5; cursor: not-allowed; } /* Textarea */ .textarea { min-height: 100px; height: auto; resize: vertical; line-height: var(--leading-normal); } /* Select */ .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } /* Label */ .label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); margin-bottom: var(--space-1); } /* Helper text */ .helper-text { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); } .helper-text.error { color: var(--danger); } /* Form group */ .form-group { margin-bottom: var(--space-4); } /* ---------------------------------------- Cards ---------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); transition: box-shadow var(--transition-base); } .card-hover:hover { box-shadow: var(--shadow-md); } .card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-primary); margin-bottom: var(--space-1); } .card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); } /* ---------------------------------------- Badges / Pills ---------------------------------------- */ .badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); border-radius: var(--radius-full); line-height: 1.5; } .badge-success { background: var(--success-light); color: var(--success); } .badge-warning { background: var(--warning-light); color: var(--warning); } .badge-danger { background: var(--danger-light); color: var(--danger); } .badge-info { background: var(--info-light); color: var(--info); } .badge-brand { background: var(--brand-light); color: var(--brand); } .badge-neutral { background: var(--bg-surface); color: var(--text-secondary); } /* ---------------------------------------- Divider ---------------------------------------- */ .divider { height: 1px; background: var(--border); border: none; margin: var(--space-4) 0; } /* ---------------------------------------- Loading Spinner ---------------------------------------- */ .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.6s linear infinite; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------- Toast / Notification ---------------------------------------- */ .toast { position: fixed; bottom: var(--space-6); right: var(--space-6); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); z-index: var(--z-toast); animation: slideUp 0.3s ease; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ---------------------------------------- Overlay / Modal Backdrop ---------------------------------------- */ .overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-overlay); animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ---------------------------------------- AI Disclaimer ---------------------------------------- */ .ai-disclaimer { text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); padding: var(--space-2) var(--space-4); } /* ---------------------------------------- Scrollbar (webkit) ---------------------------------------- */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); } /* ---------------------------------------- Utility Classes ---------------------------------------- */ /* Flexbox */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; } /* Grid */ .grid { display: grid; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* Text */ .text-center { text-align: center; } .text-right { text-align: right; } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-md { font-size: var(--text-md); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .font-medium { font-weight: var(--weight-medium); } .font-semibold { font-weight: var(--weight-semibold); } .font-bold { font-weight: var(--weight-bold); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-brand { color: var(--brand); } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } /* Spacing */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* Width */ .w-full { width: 100%; } .max-w-sm { max-width: 400px; } .max-w-md { max-width: 560px; } .max-w-lg { max-width: 720px; } .max-w-xl { max-width: 960px; } /* Display */ .hidden { display: none; } .block { display: block; } /* Overflow */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* Border */ .rounded-md { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Truncate text */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------- Responsive Breakpoints ---------------------------------------- */ /* Mobile: < 640px is default (mobile-first) */ /* Tablet: 640px+ */ @media (min-width: 640px) { .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); } .sm\:flex { display: flex; } .sm\:hidden { display: none; } } /* Desktop: 1024px+ */ @media (min-width: 1024px) { .lg\:grid-3 { grid-template-columns: repeat(3, 1fr); } .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); } .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:block { display: block; } }