/* ========================================================= SALES INTELLIGENCE DESIGN SYSTEM v1.1 Themes: Dark (Glassmorphism) + Light (Clean White) Font: Inter Brand: Teal/Turquoise #14B8A6 Family: #00E5C7 electric · #14B8A6 primary · #0D9488 hover #0F766E active · #5EEAD4 soft-light · #99F6E4 tint ========================================================= */ /* --------------------------------------------------------- 1. GLOBAL TOKENS --------------------------------------------------------- */ :root { /* Brand */ --color-brand: #14B8A6; --color-brand-hover: #0D9488; --color-brand-active: #0F766E; --color-brand-soft: rgba(20, 184, 166, 0.12); --color-brand-glow: rgba(20, 184, 166, 0.35); --color-brand-electric: #00E5C7; --color-brand-text: #ffffff; /* Semantic */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #38BDF8; /* Semantic soft backgrounds */ --color-success-soft: rgba(16, 185, 129, 0.12); --color-warning-soft: rgba(245, 158, 11, 0.12); --color-error-soft: rgba(239, 68, 68, 0.12); --color-info-soft: rgba(56, 189, 248, 0.12); /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Font sizes */ --fs-xs: 11px; --fs-sm: 12px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 32px; /* Line heights */ --lh-tight: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.6; /* Spacing (8px grid) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; /* Border radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-base: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; /* Z-index */ --z-nav: 1000; --z-overlay: 1100; --z-modal: 1200; --z-toast: 1300; /* Motion */ --transition-fast: 150ms ease-out; --transition-base: 220ms ease-out; --transition-slow: 320ms ease-in-out; } /* --------------------------------------------------------- 2. DARK THEME (Glassmorphism) Apply [data-theme="dark"] to or a root wrapper --------------------------------------------------------- */ [data-theme="dark"] { /* Canvas — near-black with teal undertone */ --color-canvas: #030D0C; --color-canvas-alt: #07211E; --color-bg-gradient: linear-gradient(145deg, #030D0C, #12221F); /* Surfaces — glass layers */ --color-surface: rgba(17, 24, 39, 0.80); /* main cards */ --color-surface-subtle: rgba(15, 23, 42, 0.60); /* nested panels */ --color-surface-solid: #111827; /* non-glass fallback */ --color-surface-2: #1A2236; --color-surface-elevated:#020617; /* Borders */ --color-border: rgba(148, 163, 184, 0.20); --color-border-strong: rgba(148, 163, 184, 0.40); --color-border-focus: rgba(20, 184, 166, 0.90); /* Text */ --color-text-1: #F9FAFB; --color-text-2: #9CA3AF; --color-text-3: #6B7280; --color-text-disabled: #4B5563; /* Blur */ --blur-heavy: 32px; --blur-medium: 20px; --blur-light: 12px; /* Shadows */ --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.55); --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.60); --shadow-focus: 0 0 0 1px rgba(15, 23, 42, 1), 0 0 0 3px var(--color-border-focus); } /* --------------------------------------------------------- 3. LIGHT THEME (Clean White + Neumorphic accents) Apply [data-theme="light"] to or a root wrapper --------------------------------------------------------- */ [data-theme="light"] { /* Canvas — pure white, never grey */ --color-canvas: #FFFFFF; --color-canvas-alt: #F9FAFB; --color-bg-gradient: #FFFFFF; /* Surfaces */ --color-surface: #F3F4F6; --color-surface-subtle: #FAFAFA; --color-surface-solid: #FFFFFF; --color-surface-2: #E5E7EB; --color-surface-elevated:#FFFFFF; /* Borders */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-border-focus: rgba(20, 184, 166, 0.80); /* Text */ --color-text-1: #111827; --color-text-2: #6B7280; --color-text-3: #9CA3AF; --color-text-disabled: #D1D5DB; /* Blur — not used in light, kept for parity */ --blur-heavy: 0px; --blur-medium: 0px; --blur-light: 0px; /* Neumorphic shadows (light theme only) */ --shadow-neu-raised: 6px 6px 14px rgba(0,0,0,.10), -4px -4px 10px rgba(255,255,255,1); --shadow-neu-inset: inset 4px 4px 8px rgba(0,0,0,.08), inset -3px -3px 6px rgba(255,255,255,1); --shadow-soft: 0 4px 16px rgba(0,0,0,.07); --shadow-card: 0 2px 8px rgba(0,0,0,.06); --shadow-focus: 0 0 0 1px #fff, 0 0 0 3px var(--color-border-focus); /* Override semantic for better light contrast */ --color-success: #059669; --color-warning: #D97706; --color-error: #DC2626; --color-info: #0284C7; } /* --------------------------------------------------------- 4. GLOBAL BASE --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-relaxed); color: var(--color-text-1); background: var(--color-canvas); -webkit-font-smoothing: antialiased; } /* Dark canvas: radial gradient background */ [data-theme="dark"] body { background: radial-gradient(circle at top left, rgba(20, 184, 166, 0.28) 0, transparent 50%), radial-gradient(circle at bottom right, rgba(14, 116, 144, 0.25) 0, transparent 50%), var(--color-bg-gradient); min-height: 100vh; } ::selection { background: var(--color-brand-soft); color: var(--color-text-1); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.4); border-radius: 999px; } /* --------------------------------------------------------- 5. TYPOGRAPHY --------------------------------------------------------- */ .display { font-size: var(--fs-4xl); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; } .h1 { font-size: var(--fs-3xl); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } .h2 { font-size: var(--fs-2xl); line-height: 1.25; font-weight: 600; } .h3 { font-size: var(--fs-xl); line-height: 1.3; font-weight: 600; } .h4 { font-size: var(--fs-lg); line-height: 1.4; font-weight: 600; } .body-lg { font-size: var(--fs-lg); line-height: var(--lh-relaxed); font-weight: 400; } .body { font-size: var(--fs-md); line-height: var(--lh-relaxed); font-weight: 400; } .body-sm { font-size: var(--fs-sm); line-height: var(--lh-normal); font-weight: 400; } .caption { font-size: var(--fs-xs); line-height: var(--lh-normal); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .text-1 { color: var(--color-text-1); } .text-2 { color: var(--color-text-2); } .text-3 { color: var(--color-text-3); } .text-brand { color: var(--color-brand); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } /* --------------------------------------------------------- 6. BUTTONS --------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-base); border: none; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0.01em; transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-base); outline: none; text-decoration: none; white-space: nowrap; } /* Primary — Teal */ .btn-primary { background: var(--color-brand); color: var(--color-brand-text); box-shadow: 0 4px 14px var(--color-brand-glow); } .btn-primary:hover { background: var(--color-brand-hover); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 6px var(--color-brand-glow); } /* Secondary */ .btn-secondary { background: var(--color-surface-2); color: var(--color-text-1); border: 1px solid var(--color-border-strong); } .btn-secondary:hover { background: var(--color-surface); } /* Ghost */ .btn-ghost { background: transparent; color: var(--color-text-2); border: 1px solid var(--color-border); } .btn-ghost:hover { background: var(--color-surface); color: var(--color-text-1); } /* Outline brand */ .btn-outline { background: var(--color-brand-soft); color: var(--color-brand); border: 1px solid var(--color-brand); } .btn-outline:hover { background: rgba(20, 184, 166, 0.20); } /* Destructive */ .btn-danger { background: rgba(239, 68, 68, 0.12); color: var(--color-error); border: 1px solid rgba(239, 68, 68, 0.40); } .btn-danger:hover { background: rgba(239, 68, 68, 0.20); } /* Sizes */ .btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-sm); border-radius: var(--radius-md); } .btn-lg { height: 48px; padding: 0 var(--space-6); font-size: var(--fs-lg); border-radius: var(--radius-lg); } .btn-xl { height: 56px; padding: 0 var(--space-7); font-size: var(--fs-xl); border-radius: var(--radius-lg); } /* Icon button */ .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-md); } .btn-icon.btn-sm { width: 32px; height: 32px; } .btn-icon.btn-lg { width: 48px; height: 48px; } /* Full-width CTA (Fireflies-style) */ .btn-cta { width: 100%; height: 50px; border-radius: var(--radius-lg); font-size: var(--fs-lg); font-weight: 600; letter-spacing: 0.01em; } /* Light theme: neumorphic primary button */ [data-theme="light"] .btn-primary { box-shadow: var(--shadow-neu-raised), 0 4px 14px var(--color-brand-glow); } [data-theme="light"] .btn-primary:active { box-shadow: var(--shadow-neu-inset); transform: translateY(0); } /* Focus */ .btn:focus-visible { box-shadow: var(--shadow-focus); } /* Disabled */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* --------------------------------------------------------- 7. SELECTION TABS (Fireflies-style role/category picker) --------------------------------------------------------- */ .tab-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } .tab-item { padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text-2); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; transition: border-color var(--transition-base), background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast); user-select: none; } .tab-item:hover { border-color: var(--color-brand); color: var(--color-text-1); } .tab-item.tab-selected { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand); font-weight: 600; } .tab-item:active { transform: scale(0.97); } /* --------------------------------------------------------- 8. FILTER PILL CHIPS --------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 5px 14px; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-base); user-select: none; } .chip:hover { border-color: var(--color-brand); color: var(--color-text-1); } .chip.chip-active { background: var(--color-brand-soft); border-color: var(--color-brand); color: var(--color-brand); } .chip .chip-close { font-size: 10px; margin-left: 2px; opacity: 0.6; } /* --------------------------------------------------------- 9. CARDS --------------------------------------------------------- */ /* Base card */ .card { border-radius: var(--radius-lg); border: 1px solid var(--color-border); padding: var(--space-5); background: var(--color-surface); transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); } /* Glass card (Dark theme) */ [data-theme="dark"] .card-glass { background: var(--color-surface); backdrop-filter: blur(var(--blur-medium)); -webkit-backdrop-filter: blur(var(--blur-medium)); border: 1px solid rgba(148, 163, 184, 0.20); box-shadow: var(--shadow-soft); } [data-theme="dark"] .card-glass:hover { border-color: rgba(148, 163, 184, 0.35); box-shadow: var(--shadow-card); } /* Light theme: neumorphic card */ [data-theme="light"] .card-raised { background: var(--color-canvas); box-shadow: var(--shadow-neu-raised); border: none; } [data-theme="light"] .card-raised:hover { transform: translateY(-2px); box-shadow: 8px 8px 18px rgba(0,0,0,.12), -5px -5px 12px rgba(255,255,255,1); } [data-theme="light"] .card-inset { background: var(--color-canvas); box-shadow: var(--shadow-neu-inset); border: none; } /* Contact / entity card */ .card-contact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-contact__identity { display: flex; align-items: center; gap: var(--space-3); } .card-contact__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: 700; flex-shrink: 0; } .card-contact__name { font-size: var(--fs-md); font-weight: 500; color: var(--color-text-1); } .card-contact__title { font-size: var(--fs-sm); color: var(--color-text-2); } .card-contact__actions { display: flex; gap: var(--space-2); } /* Metric card */ .card-metric { text-align: left; } .card-metric__label { font-size: var(--fs-sm); color: var(--color-text-2); font-weight: 500; margin-bottom: var(--space-1); } .card-metric__value { font-size: 28px; font-weight: 700; color: var(--color-text-1); line-height: 1; } .card-metric__delta { font-size: var(--fs-sm); color: var(--color-text-2); margin-top: var(--space-1); } .card-metric__delta.positive { color: var(--color-success); } .card-metric__delta.negative { color: var(--color-error); } /* AI signal card */ .card-signal { border-left: 3px solid var(--color-brand); } /* --------------------------------------------------------- 10. GLASS PANELS (Dark theme layout containers) --------------------------------------------------------- */ .glass-panel { background: var(--color-surface); backdrop-filter: blur(var(--blur-heavy)); -webkit-backdrop-filter: blur(var(--blur-heavy)); border-radius: var(--radius-xl); border: 1px solid rgba(148, 163, 184, 0.20); box-shadow: var(--shadow-card); } .glass-panel--subtle { background: var(--color-surface-subtle); backdrop-filter: blur(var(--blur-light)); -webkit-backdrop-filter: blur(var(--blur-light)); border-radius: var(--radius-lg); border: 1px solid rgba(148, 163, 184, 0.12); } /* --------------------------------------------------------- 11. INPUTS & FORMS --------------------------------------------------------- */ .input, .textarea, .select { width: 100%; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-1); font-family: var(--font-sans); font-size: var(--fs-md); outline: none; transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base); } .input::placeholder, .textarea::placeholder { color: var(--color-text-3); } .input:focus, .textarea:focus, .select:focus { border-color: var(--color-brand); box-shadow: var(--shadow-focus); } /* Light theme: neumorphic inputs */ [data-theme="light"] .input, [data-theme="light"] .textarea, [data-theme="light"] .select { background: var(--color-canvas); box-shadow: var(--shadow-neu-inset); border-color: transparent; } [data-theme="light"] .input:focus, [data-theme="light"] .textarea:focus { border-color: var(--color-brand); box-shadow: var(--shadow-focus); } /* Search input */ .input-search { border-radius: var(--radius-pill); padding-left: 40px; } .input-wrapper { position: relative; } .input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-text-3); pointer-events: none; } /* Select */ .select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 14px) 50%; cursor: pointer; } /* Form label */ .form-label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-2); margin-bottom: 6px; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-hint { font-size: var(--fs-xs); color: var(--color-text-3); } .form-error { font-size: var(--fs-xs); color: var(--color-error); } /* --------------------------------------------------------- 12. NAVIGATION --------------------------------------------------------- */ /* Top navbar */ .top-nav { position: sticky; top: 0; z-index: var(--z-nav); height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-7); border-bottom: 1px solid var(--color-border); } [data-theme="dark"] .top-nav { background: rgba(5, 8, 20, 0.90); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } [data-theme="light"] .top-nav { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--color-border); } /* Sidebar */ .sidebar { width: 260px; min-height: 100vh; padding: var(--space-6) var(--space-3); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-1); } [data-theme="dark"] .sidebar { background: rgba(5, 8, 20, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-theme="light"] .sidebar { background: var(--color-canvas); } .sidebar__section-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-3); font-weight: 500; padding: var(--space-4) var(--space-2) var(--space-1); } .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-3); border-radius: var(--radius-md); color: var(--color-text-2); cursor: pointer; font-size: var(--fs-md); font-weight: 500; transition: all var(--transition-base); text-decoration: none; } .nav-item:hover { background: var(--color-surface-2); color: var(--color-text-1); } .nav-item.active { background: var(--color-brand-soft); color: var(--color-brand); } .nav-item .nav-icon { width: 18px; height: 18px; flex-shrink: 0; } /* Horizontal nav tabs */ .nav-tabs { display: flex; gap: 2px; background: var(--color-surface); border-radius: var(--radius-lg); padding: 4px; border: 1px solid var(--color-border); } .nav-tab { padding: 8px 16px; border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 500; color: var(--color-text-2); cursor: pointer; transition: all var(--transition-base); border: none; background: transparent; font-family: var(--font-sans); } .nav-tab:hover { background: var(--color-surface-2); color: var(--color-text-1); } .nav-tab.active { background: var(--color-brand); color: #fff; } /* --------------------------------------------------------- 13. STATUS, BADGES & PILLS --------------------------------------------------------- */ /* Status dot */ .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot--active { background: var(--color-success); } .status-dot--warning { background: var(--color-warning); } .status-dot--error { background: var(--color-error); } .status-dot--info { background: var(--color-info); } .status-dot--muted { background: var(--color-text-3); } /* Animated live dot */ .status-dot--live { background: var(--color-success); animation: pulse-dot 1.8s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } /* Badge */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; } .badge-success { background: var(--color-success-soft); color: var(--color-success); } .badge-warning { background: var(--color-warning-soft); color: var(--color-warning); } .badge-error { background: var(--color-error-soft); color: var(--color-error); } .badge-info { background: var(--color-info-soft); color: var(--color-info); } .badge-muted { background: var(--color-surface-2); color: var(--color-text-2); } .badge-brand { background: var(--color-brand-soft); color: var(--color-brand); } /* Priority badge (filled) */ .priority-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #fff; } .priority-badge--high { background: var(--color-error); } .priority-badge--medium { background: var(--color-warning); } .priority-badge--low { background: var(--color-text-3); } /* Status pill (e.g. Dialing, Pending) */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 500; background: var(--color-surface-2); color: var(--color-text-2); border: 1px solid var(--color-border); } .status-pill--brand { background: var(--color-brand-soft); color: var(--color-brand); border-color: var(--color-brand); } /* --------------------------------------------------------- 14. PROGRESS & DATA VIZ --------------------------------------------------------- */ .progress-bar { width: 100%; height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; } .progress-bar__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-brand), #5EEAD4); transition: width 0.4s ease; } .progress-bar__fill--success { background: linear-gradient(90deg, var(--color-success), #34D399); } .progress-bar__fill--warning { background: linear-gradient(90deg, var(--color-warning), #FCD34D); } .progress-bar__fill--error { background: linear-gradient(90deg, var(--color-error), #F87171); } /* --------------------------------------------------------- 15. AVATAR --------------------------------------------------------- */ .avatar { border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .avatar-sm { width: 28px; height: 28px; font-size: 10px; } .avatar-md { width: 36px; height: 36px; font-size: 12px; } .avatar-lg { width: 48px; height: 48px; font-size: 15px; } .avatar-xl { width: 64px; height: 64px; font-size: 20px; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } /* --------------------------------------------------------- 16. LAYOUT --------------------------------------------------------- */ .app-shell { display: flex; min-height: 100vh; } .app-main { flex: 1; padding: var(--space-7); min-width: 0; } .page-container { max-width: 1280px; margin: 0 auto; } /* Divider */ .divider { height: 1px; background: var(--color-border); border: none; margin: 0; } /* --------------------------------------------------------- 17. RESPONSIVE --------------------------------------------------------- */ @media (max-width: 767px) { html { font-size: 14px; } .app-shell { flex-direction: column; } .sidebar { display: none; } .app-main { padding: var(--space-4); } } @media (min-width: 768px) and (max-width: 1023px) { html { font-size: 15px; } .sidebar { width: 220px; } } /* --------------------------------------------------------- 18. ACCESSIBILITY & FOCUS --------------------------------------------------------- */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); } @media (prefers-contrast: more) { :root { --color-border: rgba(148, 163, 184, 0.60); --color-text-2: #E5E7EB; } } /* --------------------------------------------------------- 19. ANIMATIONS --------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .animate-fade-in { animation: fade-in 220ms ease-out both; } .animate-slide-up { animation: slide-up 280ms ease-out both; } .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --------------------------------------------------------- 20. UTILITIES --------------------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .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-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); } .w-full { width: 100%; } .h-full { height: 100%; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .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; }