/* ════════════════════════════════════════════════════════════════════════ CloseFlow Design System - TOKENS (DS Step 2: Foundations) ──────────────────────────────────────────────────────────────────────── Single source of truth for all design values. Loaded by base.html (Group A) today; brand.css + standalone pages (Groups B-E) adopt it as they migrate. Canonical vocabulary = the APP names (--bg / --border / --text / --muted). brand.css's --paper / --line / --ink / --ink-muted will alias INTO these when brand.css is converted to a bridge (first Step-4 sub-step). RULE: no hex literal or scale value should be authored anywhere but here. ════════════════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════════════ COLOR SYSTEM v1.0 - CANONICAL --cf-* tokens (system-of-record, LOCKED) -------------------------------------------------------------------- These are the only authored color hex values in the whole codebase. Every other color name below ALIASES into one of these (the bridge), so existing consumers (var(--accent), var(--bg), var(--gray-500), ...) pick up the locked palette with zero call-site edits. New code should prefer the --cf-* names directly. Name by role, not hue. ════════════════════════════════════════════════════════════════════ */ /* Surfaces */ --cf-bg: #FFFFFF; /* canvas, card base */ --cf-bg-warm: #FAFAF9; /* PAGE DEFAULT - warm off-white */ --cf-surface-sunken: #F7F6F4; /* sunken/recessed surface */ --cf-surface-hover: #EFEDEA; /* hover, subtle fill */ /* Ink and text */ --cf-text: #1F1F1F; /* primary, 16.5:1 */ --cf-text-secondary: #57534E; /* secondary, 7.6:1 */ --cf-text-muted: #757067; /* muted/helper; >=4.5:1 on every surface incl. warm bg + sunken (was #7A756E, 4.37:1 on warm - marginal WCAG AA fail) */ --cf-text-disabled: #A8A39C; --cf-black: #141414; /* overlay max contrast only */ --cf-scrim: rgba(31,31,31,.45); /* modal / drawer backdrop overlay (warm ink) */ /* Grayscale full ramp (warm-leaning) */ --cf-gray-50: #F7F6F4; --cf-gray-100: #EFEDEA; --cf-gray-200: #E2DFDB; --cf-gray-300: #CBC7C1; --cf-gray-400: #A8A39C; --cf-gray-500: #757067; /* tracks --cf-text-muted (used as text in tabs/landing) */ --cf-gray-600: #57534E; --cf-gray-700: #3A3733; --cf-gray-800: #1F1F1F; /* Borders */ --cf-border: #E2DFDB; /* default card/panel edge */ --cf-border-subtle: #EFEDEA; /* divider, row rule */ --cf-border-strong: #CBC7C1; /* input, separator */ /* Cognac accent - single hue, sparing use */ --cf-accent: #8D4F3D; /* primary CTA, brand anchor */ --cf-accent-hover: #7A4131; --cf-accent-pressed: #683527; --cf-accent-subtle: #F0E0D9; /* hover fill, badge ground */ --cf-accent-tint: #FAF4F1; /* selected row, subtle wash */ --cf-on-accent: #FFFFFF; --cf-ring: rgba(141,79,61,.35); /* focus ring (button / strong) */ --cf-ring-soft: rgba(141,79,61,.18); /* focus ring (input / field) */ /* Semantic - muted variants, do not compete with cognac */ --cf-success: #2F7D5B; --cf-success-bg: #ECF4EF; --cf-warning: #9A6B1E; --cf-warning-bg: #F7F0E1; --cf-error: #B23A2E; --cf-error-bg: #F8ECEA; --cf-info: #2F6296; --cf-info-bg: #EAF0F6; /* ════════════════════════════════════════════════════════════════════ APP BRIDGE - legacy vocabulary aliased onto the canonical palette. Kept so the existing var(--accent)/var(--bg)/var(--gray-*) call sites render the v1.0 palette unchanged. Do not author hex here. ════════════════════════════════════════════════════════════════════ */ /* ── Brand ─────────────────────────────────────────────── */ --navy: var(--cf-text); /* was #1F1F1F, unchanged */ --accent: var(--cf-accent); /* #8D4F3D, already cognac */ --accent-soft: var(--cf-accent-hover); /* was #A36B5C -> cognac hover */ --accent-bg: var(--cf-accent-subtle); /* was #F4EDE6 -> cognac subtle */ --accent-subtle: var(--cf-accent-subtle); /* alias: badge/border ground (#F0E0D9) */ --accent-tint: var(--cf-accent-tint); /* alias: selected row / subtle wash (#FAF4F1) */ --accent-hover: var(--cf-accent-hover); /* alias: cognac hover/pressed (#7A4131) */ /* ── Semantic / status ─────────────────────────────────── */ --green: var(--cf-success); /* was #15803D -> muted success */ --red: var(--cf-error); /* was #DC2626 -> muted error */ --amber: var(--cf-warning); /* was #D97706 -> muted warning */ --info: var(--cf-info); /* was #2563EB -> muted info */ /* "hot" lead semantic - no v1.0 equivalent, kept pending K decision (map hot -> cognac, or keep a distinct warm orange). See COLOR_AUDIT.md. */ --orange: #F97316; /* semantic aliases (master plan §3 canonical names) */ --success: var(--cf-success); --warning: var(--cf-warning); --error: var(--cf-error); /* semantic fill grounds (badges, banners, tints) */ --success-bg: var(--cf-success-bg); --warning-bg: var(--cf-warning-bg); --error-bg: var(--cf-error-bg); --info-bg: var(--cf-info-bg); /* ── Channel cues (Inbox unified thread: sms / email / whatsapp / call) ── Semantic per-channel ink + fill. Home for the ported .cfx inbox surfaces so they reference var(--ch-*) instead of redefining raw hex locally. */ --ch-sms: #2F7D5B; --ch-sms-bg: #ECF4EF; --ch-email: #3E5F8A; --ch-email-bg: #E9EEF4; --ch-wa: #1DA851; --ch-wa-bg: #E4F6EB; --ch-call: #8D4F3D; --ch-call-bg: #F0E0D9; /* mockup-vocab aliases so ported .cfx surfaces resolve without redefining globals */ --text-muted: var(--cf-text-muted); --on-accent: var(--cf-on-accent); /* ── Neutral gray ramp ───────────────────────────────────── Re-pointed from the old cool Tailwind ramp to the warm v1.0 ramp. The ~453 hardcoded cool grays still in templates/static migrate to these tokens in Phase 2 (see docs/COLOR_AUDIT.md); until then a token-driven gray reads warm while a hardcoded one still reads cool. */ --gray-50: var(--cf-gray-50); --gray-100: var(--cf-gray-100); --gray-200: var(--cf-gray-200); --gray-300: var(--cf-gray-300); --gray-400: var(--cf-gray-400); --gray-500: var(--cf-gray-500); --gray-600: var(--cf-gray-600); --gray-700: var(--cf-gray-700); --gray-800: var(--cf-gray-800); --gray-900: var(--cf-black); /* old #111827 darkest -> deep black */ --grey: var(--cf-gray-400); /* legacy alias used in app.css; retire in migration */ /* ── Surface ───────────────────────────────────────────── */ --bg: var(--cf-bg-warm); /* page default - was #F8F6F3 -> #FAFAF9 */ --card: var(--cf-bg); /* #FFFFFF */ --border: var(--cf-border); /* was #EDE4DC -> #E2DFDB */ --border-subtle: var(--cf-border-subtle); --border-strong: var(--cf-border-strong); --surface-sunken: var(--cf-surface-sunken); --surface-hover: var(--cf-surface-hover); /* ── Text ──────────────────────────────────────────────── */ --text: var(--cf-text); --text-secondary: var(--cf-text-secondary); --muted: var(--cf-text-muted); /* was #78716C -> #7A756E */ --text-disabled: var(--cf-text-disabled); /* ── Radius scale (DS v1.0: 4 / 8 / 12 / 14 / pill) ────────── sm chip/heat-bar/tag, md button/input/menu, lg card/tile, xl panel/modal, full pill/avatar/segmented. */ --radius-sm: 4px; /* was 6 */ --radius-md: 8px; /* button, input, menu */ --radius-lg: 12px; /* card, tile */ --radius-xl: 14px; /* was 16 - panel, modal */ --radius-full: 999px; /* ── Type scale (DS v1.0) ─────────────────────────────────── Role tokens are canonical (name by job, per the DS spec). Legacy size tokens are retained for existing call-sites; hardcoded font sizes migrate to role tokens with the surface mockups. */ --text-display: 40px; /* Georgia hero, one per screen */ --text-h1: 32px; --text-h2: 24px; --text-h3: 19px; --text-h4: 16px; --text-body: 14px; --text-body-sm: 13px; --text-helper: 12.5px; --text-caption: 11px; /* uppercase eyebrow / stat label */ /* legacy size-named scale (retained for continuity) */ --text-2xs: 10px; --text-xs: 11px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 17px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 32px; /* new - matches --text-h1 */ /* ── Spacing (4px base, DS v1.0: 4..96) ────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* section gap */ --sp-16: 64px; /* major section break */ --sp-24: 96px; /* hero vertical rhythm */ /* ── z-index ladder ───────────────────────────────────────── Replaces the ad-hoc 50/90/100/150/200/400/500/1000/3000/4000 set. Definitions only in Step 2; call-sites are remapped during migration. */ --z-base: 1; --z-sticky: 50; --z-banner: 150; --z-overlay: 200; --z-drawer: 400; --z-modal: 1000; --z-toast: 2000; --z-critical: 4000; /* ── Shadow scale (DS v1.0: warm ink, low spread) ────────── Flat = none. Subtle = resting card. Raised = dropdown/popover/ hover lift. Floating = modal/drawer/command palette. Warm-tinted on ink (#1F1F1F), never cool blue/black. */ --shadow-sm: 0 1px 2px rgba(31,31,31,.06); /* Subtle */ --shadow: 0 1px 2px rgba(31,31,31,.06); /* default = Subtle */ --shadow-md: 0 6px 16px -4px rgba(31,31,31,.12); /* Raised */ --shadow-lg: 0 18px 40px -12px rgba(31,31,31,.22); /* Floating */ /* DS semantic aliases (prefer these in new code) */ --shadow-subtle: var(--shadow-sm); --shadow-raised: var(--shadow-md); --shadow-floating: var(--shadow-lg); /* ── Motion (DS v1.0: 150 micro / 200 default / 300 surfaces) ── */ --dur-fast: .15s; /* was .12 - hover, color, small fades */ --dur: .2s; /* was .15 - default transitions, page fades */ --dur-slow: .3s; /* was .25 - drawer slide, larger surfaces */ --ease: cubic-bezier(.4, 0, .2, 1); } /* ── Text selection (DS v1.0): cognac-subtle ground, ink text ── */ ::selection { background: var(--cf-accent-subtle); color: var(--cf-text); } /* ── Canonical rotation keyframe (consumed by spinners across templates) ── Consolidated in MB8 - previously duplicated in import / digest/preview / digest/input / onboarding/wizard, plus an aliased cfSpin in content/index. */ @keyframes spin { to { transform: rotate(360deg); } } /* ── Reduced-motion: global opt-out (Step 2 a11y foundation) ── Zero such rules existed before; this covers all 4 skeleton keyframes, drawer/sidebar transitions, and board drag animations at once. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }