/* ============================================================================ Feel IT — Design System tokens (shared across CRM · Insight · Flow) ---------------------------------------------------------------------------- ONE canonical file. Each product copies it into public/ and sets the brand accent via (default = crm). Architecture (3 tiers): 1) PRIMITIVES — raw scales (never used directly in components) 2) SEMANTIC — role tokens (--bg, --text, --brand …) → components use THESE 3) COMPONENT — per-component knobs built on semantic tokens Aesthetic: warm, soft, calm-professional. Refined, accessible (WCAG AA). Dark mode: structure is in place (see [data-theme="dark"]) but OFF by default. ============================================================================ */ :root { /* ---------- 1. PRIMITIVES ------------------------------------------------ */ /* Warm neutral ramp (the family's backbone) */ --gray-0: #ffffff; --gray-25: #faf9f7; --gray-50: #f5f3f0; --gray-100: #ece8e2; --gray-200: #ddd7cd; --gray-300: #c9c1b4; --gray-400: #a89f90; --gray-500: #8a8278; --gray-600: #6b6459; --gray-700: #4d4842; --gray-800: #332f2b; --gray-900: #2a2725; --gray-950: #1c1a18; /* Brand accent — CRM (indigo) is the default. Overridden per product below. */ --brand-50: #eeeefb; --brand-100: #dcdcf7; --brand-200: #c2c3f1; --brand-300: #a9abef; --brand-400: #8a8de8; --brand-500: #6b6ee0; --brand-600: #585bd6; --brand-700: #4f52c4; --brand-800: #3f41a0; --brand-900: #313274; /* Semantic hues (shared by all products) — soft, not vivid */ --green-soft: #ebf3ee; --green-500: #5fa980; --green-700: #3f8a63; /* success / sage */ --red-soft: #f6e7e4; --red-500: #d96a5f; --red-700: #b8493f; /* danger / coral */ --amber-soft: #f6ece0; --amber-500: #c99257; --amber-700: #9a6a2f; /* warning / amber */ --blue-soft: #e9eefb; --blue-500: #5b8def; --blue-700: #3a64c2; /* info */ /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-36: 36px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extra: 800; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --tracking-tight: -0.01em; --tracking-wide: 0.02em; /* Spacing (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Radius */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-full: 999px; /* Elevation (warm-neutral tint, consistent across products) */ --shadow-sm: 0 1px 2px rgba(40, 35, 30, .05); --shadow-md: 0 4px 14px rgba(40, 35, 30, .07), 0 2px 4px rgba(40, 35, 30, .04); --shadow-lg: 0 12px 32px rgba(40, 35, 30, .10), 0 4px 10px rgba(40, 35, 30, .05); /* Motion */ --motion-fast: 120ms; --motion: 180ms; --motion-slow: 280ms; --ease: cubic-bezier(.2, .6, .2, 1); /* Layout */ --sidebar-w: 220px; --topbar-h: 60px; --bottom-nav-h: 60px; --z-dropdown: 100; --z-sticky: 200; --z-drawer: 800; --z-modal: 1000; --z-toast: 1100; /* ---------- 2. SEMANTIC (light) ----------------------------------------- */ --bg: var(--gray-25); --surface: var(--gray-0); --surface-2: var(--gray-50); --surface-3: var(--gray-100); --border: var(--gray-100); --border-strong: var(--gray-200); --text: var(--gray-900); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-on-brand: #ffffff; --brand: var(--brand-500); /* accents, highlights */ --brand-strong: var(--brand-700); /* links & text on light (AA contrast) */ --brand-soft: var(--brand-50); /* tinted backgrounds, active nav */ --ok: var(--green-500); --ok-strong: var(--green-700); --ok-soft: var(--green-soft); --danger: var(--red-500); --danger-strong: var(--red-700); --danger-soft: var(--red-soft); --warn: var(--amber-500); --warn-strong: var(--amber-700); --warn-soft: var(--amber-soft); --info: var(--blue-500); --info-strong: var(--blue-700); --info-soft: var(--blue-soft); --focus-ring: 0 0 0 3px var(--brand-soft); --focus-border: var(--brand-500); /* ---------- 3. COMPONENT ------------------------------------------------- */ --btn-primary-bg: var(--brand-700); /* AA: white text on 700 */ --btn-primary-bg-hover: var(--brand-800); --btn-primary-text: var(--text-on-brand); --btn-ghost-text: var(--text); --btn-ghost-bg-hover: var(--surface-2); --input-bg: var(--surface); --input-border: var(--border-strong); --input-text: var(--text); --input-radius: var(--radius-sm); --card-bg: var(--surface); --card-border: var(--border); --card-radius: var(--radius); --card-shadow: var(--shadow-sm); --nav-active-bg: var(--brand-soft); --nav-active-text: var(--brand-strong); --nav-hover-bg: var(--surface-2); --badge-bg: var(--surface-2); --badge-text: var(--text-muted); --table-head-bg: var(--surface-2); --table-row-hover: var(--surface-2); } /* ==== Per-product brand accent (set ) ================= */ /* Insight — forest green */ [data-brand="insight"] { --brand-50: #e8f3ed; --brand-100: #cbe5d6; --brand-200: #a3d2b6; --brand-300: #6fae8c; --brand-400: #3f9268; --brand-500: #2a7d52; --brand-600: #1f6b44; --brand-700: #1a5c38; --brand-800: #144a2c; --brand-900: #0e3a22; } /* Flow — warm terracotta (kitchen / hospitality energy) */ [data-brand="flow"] { --brand-50: #fbeee7; --brand-100: #f6dccd; --brand-200: #eebfa3; --brand-300: #e39e75; --brand-400: #db8453; --brand-500: #cf6f3c; --brand-600: #bb5e30; --brand-700: #9c4c28; --brand-800: #7d3d22; --brand-900: #5f2f1b; } /* ==== Dark mode (STRUCTURE ONLY — enable later via ) */ [data-theme="dark"] { --bg: var(--gray-950); --surface: #232020; --surface-2: #2c2926; --surface-3: #383430; --border: #383430; --border-strong: #4a443e; --text: #f3f0ec; --text-muted: #a89f90; --text-subtle: #7a7269; --brand: var(--brand-400); --brand-strong: var(--brand-300); --brand-soft: rgba(255, 255, 255, .06); --ok-soft: rgba(95, 169, 128, .14); --danger-soft: rgba(217, 106, 95, .16); --warn-soft: rgba(201, 146, 87, .16); --info-soft: rgba(91, 141, 239, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .4); --card-shadow: var(--shadow-sm); --table-head-bg: var(--surface-2); } /* Respect reduced-motion (a11y) */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion: 0ms; --motion-slow: 0ms; } }