/* ========================================================================== Tanvik · tokens.css Direction A — Calm operator Iris primary · cool slate neutrals · Geist + Geist Mono -------------------------------------------------------------------------- Naming convention: SEMANTIC, never raw scale. ✅ --color-bg-surface, --color-text-muted, --color-border-default ❌ --gray-100, --indigo-600 -------------------------------------------------------------------------- Theme switching: - :root holds the LIGHT theme (default). - [data-theme="dark"] on overrides for dark. - shell.js sets data-theme on init from prefers-color-scheme, and persists user override in localStorage('tanvik:theme'). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); /* ========================================================================== 1. LIGHT THEME (:root) ========================================================================== */ :root { /* ---- Color · Surfaces ----------------------------------------------- */ --color-bg-page: #FAFBFC; /* outermost page bg */ --color-bg-surface: #FFFFFF; /* card / pane surface */ --color-bg-sunken: #F2F4F7; /* input bg, hover-on-card */ --color-bg-subtle: #ECEEF2; /* chip bg, secondary hover */ --color-bg-elevated: #FFFFFF; /* popovers, dropdowns */ --color-bg-overlay: rgba(11, 15, 26, 0.45); --color-bg-inverse: #0B0F1A; /* ---- Color · Borders ------------------------------------------------- */ --color-border-subtle: #EDEFF3; /* whisper-thin separators */ --color-border-default: #E1E4EA; /* default container border */ --color-border-strong: #C9CED7; /* hover, input border */ --color-border-focus: var(--color-primary); /* ---- Color · Text ---------------------------------------------------- */ --color-text-strong: #0B0F1A; /* h1, hero copy */ --color-text-default: #1F2533; /* body, default */ --color-text-muted: #424A57; /* secondary copy */ --color-text-subtle: #6B7280; /* tertiary, captions */ --color-text-disabled: #B0B6C0; --color-text-inverse: #FFFFFF; --color-text-on-primary:#FFFFFF; --color-text-link: var(--color-primary); /* ---- Color · Brand (Iris) ------------------------------------------- */ --color-primary: #5B5BD6; --color-primary-hover: #4A4AC4; --color-primary-active: #3D3DB0; --color-primary-soft: #EEEEFB; --color-primary-soft-hover: #DCDCF6; --color-primary-on-soft:#3D3DB0; --color-primary-ring: rgba(91, 91, 214, 0.20); /* ---- Color · Accent (Cyan signal) ----------------------------------- */ --color-accent: #06B6D4; --color-accent-soft: #E0F7FB; --color-accent-on-soft: #0E7490; /* ---- Color · Status -------------------------------------------------- */ --color-success: #10B981; --color-success-hover: #0F9F70; --color-success-soft: #DCFCE7; --color-success-on-soft:#047857; --color-warn: #F59E0B; --color-warn-hover: #D88A07; --color-warn-soft: #FEF3C7; --color-warn-on-soft: #92400E; --color-danger: #EF4444; --color-danger-hover: #DC2626; --color-danger-soft: #FEE2E2; --color-danger-on-soft: #B91C1C; --color-info: #06B6D4; --color-info-soft: #E0F7FB; --color-info-on-soft: #0E7490; /* ---- Color · Lead stages -------------------------------------------- */ --color-stage-new: #6B7280; --color-stage-contacted: #5B5BD6; --color-stage-qualified: #F59E0B; --color-stage-won: #10B981; --color-stage-lost: #EF4444; /* ---- Color · WhatsApp signals --------------------------------------- */ --color-wa-online: #10B981; --color-wa-tick-sent: #8A92A1; --color-wa-tick-read: #5B5BD6; --color-wa-bg: #E5DDD5; --color-wa-bubble-out: #005C4B; --color-wa-bubble-in: #FFFFFF; /* ---- Color · Selection / focus -------------------------------------- */ --color-selection-bg: var(--color-primary-soft); --color-selection-fg: var(--color-primary-active); /* ---- Spacing · 4px scale -------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ---- Radius ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* default */ --radius-lg: 10px; /* cards */ --radius-xl: 14px; /* modals */ --radius-2xl: 20px; --radius-pill: 999px; /* ---- Elevation · light, Linear-style -------------------------------- */ --shadow-xs: 0 1px 0 0 rgba(11,15,26,0.04); --shadow-sm: 0 1px 2px 0 rgba(11,15,26,0.05), 0 1px 3px 0 rgba(11,15,26,0.06); --shadow-md: 0 4px 8px -2px rgba(11,15,26,0.06), 0 2px 4px -2px rgba(11,15,26,0.04); --shadow-lg: 0 12px 24px -8px rgba(11,15,26,0.10), 0 4px 8px -4px rgba(11,15,26,0.04); --shadow-pop: 0 16px 40px -12px rgba(11,15,26,0.18); --shadow-focus: 0 0 0 3px var(--color-primary-ring); --shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.20); /* ---- Z-index ---- ---------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-sidebar: 30; --z-navbar: 40; --z-popover: 50; --z-drawer: 55; --z-modal: 60; --z-toast: 70; --z-tooltip: 80; /* ---- Typography ------------------------------------------------------ */ --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px; /* default body */ --font-size-md: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 22px; --font-size-3xl: 28px; --font-size-4xl: 36px; --font-size-5xl: 48px; --font-size-6xl: 60px; --line-height-tight: 1.15; --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semi: 600; --font-weight-bold: 700; --tracking-tighter: -0.025em; --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ---- Motion ---------------------------------------------------------- */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; --duration-slower: 420ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-linear: linear; /* ---- Breakpoints (referenced by JS too via getComputedStyle) -------- */ --bp-sm: 640px; --bp-md: 1024px; --bp-lg: 1280px; --bp-xl: 1536px; /* ---- Layout ---------------------------------------------------------- */ --sidebar-w: 236px; --sidebar-w-collapsed: 64px; --navbar-h: 56px; --content-max: 1280px; --content-pad-x: 24px; --content-pad-x-sm: 16px; color-scheme: light; } /* ========================================================================== 2. DARK THEME ([data-theme="dark"]) ========================================================================== */ [data-theme="dark"] { --color-bg-page: #0B0F1A; --color-bg-surface: #14161D; --color-bg-sunken: #1B1E27; --color-bg-subtle: #232733; --color-bg-elevated: #1B1E27; --color-bg-overlay: rgba(0, 0, 0, 0.65); --color-bg-inverse: #FAFBFC; --color-border-subtle: #1F2330; --color-border-default: #2A2F3D; --color-border-strong: #3A4150; --color-border-focus: var(--color-primary); --color-text-strong: #F4F4F6; --color-text-default: #E6E8EC; --color-text-muted: #B4BAC5; --color-text-subtle: #8A92A1; --color-text-disabled: #4D5260; --color-text-inverse: #0B0F1A; --color-text-on-primary:#FFFFFF; --color-primary: #7B7BE5; --color-primary-hover: #8C8CEE; --color-primary-active: #6868D8; --color-primary-soft: rgba(123, 123, 229, 0.14); --color-primary-soft-hover: rgba(123, 123, 229, 0.22); --color-primary-on-soft:#B4B4F0; --color-primary-ring: rgba(123, 123, 229, 0.34); --color-accent: #22D3EE; --color-accent-soft: rgba(34, 211, 238, 0.14); --color-accent-on-soft: #67E8F9; --color-success: #34D399; --color-success-hover: #4FDFA8; --color-success-soft: rgba(52, 211, 153, 0.14); --color-success-on-soft:#6EE7B7; --color-warn: #FBBF24; --color-warn-hover: #FCC93C; --color-warn-soft: rgba(251, 191, 36, 0.14); --color-warn-on-soft: #FCD34D; --color-danger: #F87171; --color-danger-hover: #FA8A8A; --color-danger-soft: rgba(248, 113, 113, 0.14); --color-danger-on-soft: #FCA5A5; --color-info: #22D3EE; --color-info-soft: rgba(34, 211, 238, 0.14); --color-info-on-soft: #67E8F9; --color-stage-new: #8A92A1; --color-stage-contacted: #7B7BE5; --color-stage-qualified: #FBBF24; --color-stage-won: #34D399; --color-stage-lost: #F87171; --color-wa-online: #34D399; --color-wa-tick-sent: #6B7280; --color-wa-tick-read: #7B7BE5; --color-wa-bg: #0B141A; --color-wa-bubble-out: #005C4B; --color-wa-bubble-in: #1F2C34; --color-selection-bg: rgba(123, 123, 229, 0.24); --color-selection-fg: #FFFFFF; --shadow-xs: 0 1px 0 0 rgba(0,0,0,0.3); --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.35), 0 1px 3px 0 rgba(0,0,0,0.25); --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.25); --shadow-lg: 0 12px 24px -8px rgba(0,0,0,0.50), 0 4px 8px -4px rgba(0,0,0,0.30); --shadow-pop: 0 20px 48px -12px rgba(0,0,0,0.70); --shadow-focus: 0 0 0 3px var(--color-primary-ring); --shadow-focus-danger: 0 0 0 3px rgba(248, 113, 113, 0.28); color-scheme: dark; } /* ========================================================================== 3. RESET + BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); color: var(--color-text-default); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: none; cursor: pointer; padding: 0; } a { color: var(--color-text-link); text-decoration: none; text-underline-offset: 2px; } a:hover { text-decoration: underline; } img, svg { display: block; max-width: 100%; } hr { border: 0; border-top: 1px solid var(--color-border-default); margin: var(--space-4) 0; } ::selection { background: var(--color-selection-bg); color: var(--color-selection-fg); } :focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* Scrollbars — quiet, light/dark aware */ * { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); border: 2px solid var(--color-bg-page); } *::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ========================================================================== 4. TYPE UTILITIES ========================================================================== */ .t-display { font-size: var(--font-size-5xl); font-weight: var(--font-weight-semi); letter-spacing: var(--tracking-tighter); line-height: var(--line-height-tight); } .t-h1 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semi); letter-spacing: var(--tracking-tighter); line-height: var(--line-height-tight); } .t-h2 { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semi); letter-spacing: var(--tracking-tight); line-height: var(--line-height-snug); } .t-h3 { font-size: var(--font-size-xl); font-weight: var(--font-weight-semi); letter-spacing: var(--tracking-tight); line-height: var(--line-height-snug); } .t-h4 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semi); line-height: var(--line-height-snug); } .t-body { font-size: var(--font-size-md); line-height: var(--line-height-normal); } .t-body-sm { font-size: var(--font-size-base); line-height: var(--line-height-normal); } .t-caption { font-size: var(--font-size-sm); color: var(--color-text-muted); } .t-eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-semi); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-subtle); } .t-mono { font-family: var(--font-mono); font-feature-settings: 'tnum'; } .t-tnum { font-feature-settings: 'tnum'; } .text-strong { color: var(--color-text-strong); } .text-muted { color: var(--color-text-muted); } .text-subtle { color: var(--color-text-subtle); } .text-success { color: var(--color-success-on-soft); } .text-warn { color: var(--color-warn-on-soft); } .text-danger { color: var(--color-danger-on-soft); } .text-primary { color: var(--color-primary); } /* ========================================================================== 5. UTILITY HELPERS ========================================================================== */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .center { display: flex; align-items: center; justify-content: center; } .between{ justify-content: space-between; } .flex-1 { flex: 1 1 auto; min-width: 0; } .shrink-0 { flex-shrink: 0; } .grow-0 { flex-grow: 0; } .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); } .hidden { display: none !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nowrap { white-space: nowrap; } .divider { height: 1px; background: var(--color-border-default); width: 100%; } .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; }