/* ============================================================================= candidlabs · design-tokens.css Single source of truth for: colors, themes, typography, spacing, radii, shadows, motion, and layout primitives. Rules: 1. All shared CSS consumes these variables. Never redefine them. 2. Section CSS may add LOCAL variables (--sales-foo) but never override --bg-*, --text-*, --border-*, --color-*, --radius-*, --space-*, --shadow-*, --dur-*. 3. Naming is semantic, not literal. Colors are not named "blue" or "amber" — they are named by role: --status-success, --stage-negotiation. 4. Dark mode is first-class. Every paint token has a dark counterpart. 5. To opt into dark, set [data-theme="dark"] on or . ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap"); :root { /* ---------- Brand --------------------------------------------------------*/ --brand-primary: #1b708b; /* the brand. use first, use most. */ --brand-primary-hover: #155b71; --brand-primary-soft: rgba(27, 112, 139, 0.10); --brand-accent: #2d9cba; /* on dark, replaces primary */ --brand-charcoal: #123f55; --brand-wash: #e8f2f5; /* ---------- Surfaces (light) --------------------------------------------*/ --bg-primary: #f4f7fb; /* page background */ --bg-secondary: #ffffff; /* main content surface */ --bg-card: #ffffff; /* card surface on bg-primary */ --bg-raised: #ffffff; /* dropdown / popover */ --bg-sunken: #eef4f8; /* inset wells */ --bg-overlay: rgba(13, 31, 45, 0.45); /* modal scrim */ /* ---------- Text (light) ------------------------------------------------*/ --text-primary: #334155; --text-secondary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; --text-link: var(--brand-primary); --text-on-brand: #ffffff; /* ---------- Borders & rules (light) --------------------------------------*/ --border-default: #e2e8f0; --border-strong: #cbd5e1; --border-subtle: #eef2f6; --border-focus: var(--brand-primary); /* ---------- Shadows (light) ---------------------------------------------*/ --shadow-sm: 0 1px 2px rgba(13, 31, 45, 0.06); --shadow-md: 0 4px 12px rgba(13, 31, 45, 0.10), 0 1px 2px rgba(13, 31, 45, 0.06); --shadow-lg: 0 16px 32px rgba(13, 31, 45, 0.14), 0 2px 6px rgba(13, 31, 45, 0.08); --shadow-xl: 0 32px 64px rgba(13, 31, 45, 0.20), 0 4px 12px rgba(13, 31, 45, 0.10); --shadow-focus: 0 0 0 3px rgba(27, 112, 139, 0.25); /* ---------- Status (semantic, theme-stable) ----------------------------- Each status has: solid (text/icon) + soft (background tint). Used by chips, banners, indicators, form validation. */ --status-success: #059669; --status-success-soft: rgba(5, 150, 105, 0.12); --status-warning: #d97706; --status-warning-soft: rgba(217, 119, 6, 0.14); --status-error: #dc2626; --status-error-soft: rgba(220, 38, 38, 0.12); --status-info: #1b708b; --status-info-soft: rgba(27, 112, 139, 0.12); --status-neutral: #64748b; --status-neutral-soft: rgba(100, 116, 139, 0.12); /* ---------- Deal stages (canonical mapping) ----------------------------- Defined once. All pipeline UI consumes these. Do not invent new stages. */ --stage-prospecting: #1b708b; /* teal */ --stage-prospecting-soft: rgba(27, 112, 139, 0.12); --stage-proposal: #7c3aed; /* violet */ --stage-proposal-soft: rgba(124, 58, 237, 0.14); --stage-negotiation: #d97706; /* amber */ --stage-negotiation-soft: rgba(217, 119, 6, 0.16); --stage-won: #059669; /* green */ --stage-won-soft: rgba(5, 150, 105, 0.14); --stage-lost: #94a3b8; /* muted slate*/ --stage-lost-soft: rgba(148, 163, 184, 0.18); /* ---------- Typography ---------------------------------------------------*/ --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --font-label: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* Type scale — use semantic intent. Sizes in rem so users can resize. */ --text-xs: 0.6875rem; /* 11px · micro labels, eyebrows */ --text-sm: 0.8125rem; /* 13px · body small, table cells */ --text-md: 0.9375rem; /* 15px · body */ --text-lg: 1.0625rem; /* 17px · subheads */ --text-xl: 1.25rem; /* 20px · h3 */ --text-2xl: 1.5rem; /* 24px · h2 / page subtitles */ --text-3xl: 1.875rem; /* 30px · h1 / page title */ --text-4xl: 2.5rem; /* 40px · feature headlines */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-base: 1.55; --leading-loose: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow: 0.12em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing (4px base) ------------------------------------------*/ --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; /* ---------- Radii (no sharp corners; minimum is r-sm) -------------------*/ --radius-sm: 4px; /* minimum — small chips, inline pills */ --radius-md: 8px; /* default — buttons, inputs, cards */ --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-pill: 999px; /* filter chips, status pills only */ /* ---------- Motion -------------------------------------------------------*/ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---------- Layout -------------------------------------------------------*/ --container-max: 1280px; --container-pad: 28px; --topbar-height: 56px; --rail-width: 220px; --rail-collapsed: 0px; --z-rail: 10; --z-topbar: 50; --z-drawer: 80; --z-modal: 100; --z-toast: 120; } /* ============================================================================ Dark theme — every paint token gets a counterpart. ========================================================================== */ [data-theme="dark"] { --bg-primary: #0d1f2d; --bg-secondary: #11293a; --bg-card: #163349; --bg-raised: #1c4058; --bg-sunken: #0a1825; --bg-overlay: rgba(0, 0, 0, 0.65); --text-primary: #f1f5f9; --text-secondary: rgba(241, 245, 249, 0.72); --text-muted: rgba(241, 245, 249, 0.50); --text-inverse: #0d1f2d; --text-link: var(--brand-accent); --text-on-brand: #ffffff; --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-subtle: rgba(255, 255, 255, 0.06); --border-focus: var(--brand-accent); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.25); --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.60), 0 4px 12px rgba(0, 0, 0, 0.30); --shadow-focus: 0 0 0 3px rgba(45, 156, 186, 0.40); /* On dark, the accent reads better as primary */ --brand-primary: #2d9cba; --brand-primary-hover: #49b4d1; --brand-primary-soft: rgba(45, 156, 186, 0.16); /* Status — slightly softer on dark to avoid neon */ --status-success-soft: rgba(5, 150, 105, 0.22); --status-warning-soft: rgba(217, 119, 6, 0.24); --status-error-soft: rgba(220, 38, 38, 0.22); --status-info-soft: rgba(45, 156, 186, 0.22); --status-neutral-soft: rgba(148, 163, 184, 0.22); --stage-prospecting: #5db3cd; --stage-prospecting-soft: rgba(45, 156, 186, 0.22); --stage-proposal: #a78bfa; --stage-proposal-soft: rgba(167, 139, 250, 0.22); --stage-negotiation: #fbbf24; --stage-negotiation-soft: rgba(251, 191, 36, 0.22); --stage-won: #34d399; --stage-won-soft: rgba(52, 211, 153, 0.22); --stage-lost: #94a3b8; --stage-lost-soft: rgba(148, 163, 184, 0.20); } /* ============================================================================ Page baseline — sets body defaults consistent with the system. This is the only paint that design-tokens.css applies directly. ========================================================================== */ html { box-sizing: border-box; -webkit-text-size-adjust: 100%; color-scheme: light dark; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Native form elements should at least pick up our font */ button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* Focus visibility — applied globally; components may override */ :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; } /* Reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================================ LEGACY COMPATIBILITY ALIASES ---------------------------------------------------------------------------- The repo's existing styles.css, design-refresh.css, and section CSS (crm/, ops/, founders/, etc.) reference an older naming. These aliases keep every legacy file working while we migrate page by page. When a page is migrated to .cl-* classes, its references to the legacy names below disappear naturally. Once no file references a given alias, delete it. Don't add new tokens here — add them to the semantic blocks above and reference them from new code. ========================================================================== */ :root { /* Brand */ --color-primary: var(--brand-primary); --color-accent: var(--brand-accent); --color-charcoal: var(--brand-charcoal); --color-slate: var(--status-neutral); --color-white: #ffffff; /* Status (singular legacy names) */ --color-success: var(--status-success); --color-warning: var(--status-warning); --color-error: var(--status-error); --color-info: var(--status-info); /* Surfaces (legacy aliases) */ --bg-card-raised: var(--bg-raised); --surface-subtle: var(--bg-secondary); --surface-tint: var(--brand-primary-soft); --surface-strong: var(--bg-sunken); --table-rule: var(--border-subtle); /* Text (legacy alias) */ --heading-color: var(--text-primary); /* Borders (singular legacy name — many section CSS files use this) */ --border-color: var(--border-default); /* Shadows (legacy alias used by older shadow consumers) */ --shadow-color: rgba(13, 31, 45, 0.08); /* Spacing (rem-based legacy aliases) */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-7); --space-2xl: var(--space-9); --space-3xl: var(--space-10); /* Motion (legacy aliases) */ --transition-fast: var(--dur-fast) var(--ease-standard); --transition-normal: var(--dur-base) var(--ease-standard); } [data-theme="dark"] { --color-primary: var(--brand-primary); --color-accent: var(--brand-accent); --color-charcoal: var(--brand-accent); --border-color: var(--border-default); --shadow-color: rgba(0, 0, 0, 0.35); }