/** * FixMyCar AI — Customer diagnostic chat · DESIGN TOKENS * ------------------------------------------------------------------- * Single source of truth for every visual primitive the customer chat * uses. Vanilla CSS custom properties scoped to `.fmc-dc` so nothing * leaks into the host WordPress theme. * * Two layers: * 1. PRIMITIVES — the raw palette / scale / motion / z values. * Designers and devs rarely reference these directly. * 2. SEMANTIC ALIASES — what designers in Figma actually reach for * ("text-primary", "surface-elevated", "accent"). Dark mode would * flip these aliases, not the primitives. * * Migration note (B12 redesign): the existing `--fmc-dc-ink-*`, * `--fmc-dc-ember-*` and `--fmc-dc-radius-*` tokens still live in the * §1 block of `frontend-chat.css` because ~100 existing rules read them. * Those legacy tokens will be deleted PR-by-PR as the redesign migrates * each surface to the primitives + aliases below. * * @package FixMyCar */ .fmc-dc { /* ============================================================ 1. Primitives — colour ============================================================ */ --fmc-dc-color-bay: #f7f6f3; --fmc-dc-color-panel: #ffffff; --fmc-dc-color-rail: #f1f1ee; --fmc-dc-color-deck: #e8e8e3; --fmc-dc-color-line: #e3e1da; --fmc-dc-color-rule: #cfcdc4; --fmc-dc-color-spark: #a8a59a; --fmc-dc-color-ink-0: #0e131a; --fmc-dc-color-ink-1: #1f2632; --fmc-dc-color-ink-2: #4a5260; --fmc-dc-color-ink-3: #6b7384; --fmc-dc-color-ink-4: #9aa3b3; --fmc-dc-color-amber-300: #fcd34d; --fmc-dc-color-amber-400: #fbbf24; --fmc-dc-color-amber-500: #f59e0b; --fmc-dc-color-amber-600: #d97706; --fmc-dc-color-amber-700: #b45309; --fmc-dc-color-ember-400: #fb923c; --fmc-dc-color-ember-500: #f97316; --fmc-dc-color-ember-600: #ea580c; --fmc-dc-color-ruby-400: #f87171; --fmc-dc-color-ruby-500: #ef4444; --fmc-dc-color-ruby-600: #dc2626; --fmc-dc-color-ruby-700: #b91c1c; --fmc-dc-color-moss-400: #4ade80; --fmc-dc-color-moss-500: #22c55e; --fmc-dc-color-moss-600: #16a34a; --fmc-dc-color-moss-700: #15803d; --fmc-dc-color-saffron-400: #facc15; --fmc-dc-color-saffron-500: #eab308; --fmc-dc-color-saffron-700: #a16207; --fmc-dc-color-cyan-400: #38bdf8; --fmc-dc-color-cyan-500: #0ea5e9; --fmc-dc-color-cyan-700: #0369a1; /* ============================================================ 2. Primitives — spacing scale ============================================================ */ --fmc-dc-space-1: 4px; --fmc-dc-space-2: 8px; --fmc-dc-space-3: 12px; --fmc-dc-space-4: 16px; --fmc-dc-space-5: 20px; --fmc-dc-space-6: 24px; --fmc-dc-space-8: 32px; --fmc-dc-space-10: 40px; --fmc-dc-space-12: 48px; --fmc-dc-space-14: 56px; --fmc-dc-space-16: 64px; --fmc-dc-space-20: 80px; --fmc-dc-space-24: 96px; /* ============================================================ 3. Primitives — type ============================================================ */ --fmc-dc-text-xs: 11px; --fmc-dc-text-sm: 13px; --fmc-dc-text-base: 15px; --fmc-dc-text-md: 16px; --fmc-dc-text-lg: 18px; --fmc-dc-text-xl: 22px; --fmc-dc-text-2xl: 28px; --fmc-dc-text-display: 44px; --fmc-dc-text-hero: 64px; --fmc-dc-weight-regular: 400; --fmc-dc-weight-medium: 500; --fmc-dc-weight-semibold: 600; --fmc-dc-weight-bold: 700; --fmc-dc-weight-black: 800; --fmc-dc-leading-tight: 1.2; --fmc-dc-leading-snug: 1.4; --fmc-dc-leading-normal: 1.55; --fmc-dc-leading-relaxed: 1.7; --fmc-dc-tracking-tight: -0.025em; --fmc-dc-tracking-normal: 0; --fmc-dc-tracking-mono: 0.14em; --fmc-dc-tracking-eyebrow: 0.18em; /* ONE consistent sans-serif family for the whole /diagnose page — display / body / serif / mono all resolve to the same system stack so nothing diverges into a different typeface (typography-consistency pass). */ --fmc-dc-font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fmc-dc-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fmc-dc-font-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --fmc-dc-font-mono: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ============================================================ 4. Primitives — radius ============================================================ */ --fmc-dc-radius-sm: 6px; --fmc-dc-radius-md: 10px; --fmc-dc-radius-lg: 16px; --fmc-dc-radius-xl: 20px; --fmc-dc-radius-full: 9999px; /* ============================================================ 5. Primitives — shadow ============================================================ */ --fmc-dc-shadow-card: 0 8px 24px -14px rgba(15, 23, 42, 0.18); --fmc-dc-shadow-lift: 0 18px 40px -20px rgba(15, 23, 42, 0.22); --fmc-dc-shadow-input: inset 0 1px 2px rgba(15, 23, 42, 0.04); --fmc-dc-shadow-glow-accent: 0 0 24px -4px rgba(245, 158, 11, 0.5); --fmc-dc-shadow-glow-danger: 0 0 22px -4px rgba(220, 38, 38, 0.45); --fmc-dc-shadow-glow-info: 0 0 24px -4px rgba(14, 165, 233, 0.35); /* ============================================================ 6. Primitives — motion ============================================================ */ --fmc-dc-duration-fast: 100ms; --fmc-dc-duration-standard: 150ms; --fmc-dc-duration-slow: 250ms; --fmc-dc-duration-pulse: 2000ms; --fmc-dc-duration-blink: 1300ms; --fmc-dc-duration-caret: 900ms; --fmc-dc-ease-out: cubic-bezier(0.2, 0, 0, 1); --fmc-dc-ease-in-out: ease-in-out; /* ============================================================ 7. Primitives — z-index ============================================================ */ --fmc-dc-z-skip: 50; --fmc-dc-z-header: 30; --fmc-dc-z-dock: 40; --fmc-dc-z-modal: 100; --fmc-dc-z-tweaks: 60; /* ============================================================ 8. Primitives — alpha overlays ============================================================ */ --fmc-dc-alpha-overlay-hairline: rgba(15, 23, 42, 0.04); --fmc-dc-alpha-overlay-mute: rgba(15, 23, 42, 0.06); --fmc-dc-alpha-overlay-card: rgba(15, 23, 42, 0.18); /* ============================================================ 9. Semantic aliases ------------------------------------------------------------ These map primitives to design intent. Designers in Figma reference these, not the primitives. Dark mode (when shipped) flips these aliases, not the primitives. ============================================================ */ --fmc-dc-text-primary: var(--fmc-dc-color-ink-0); --fmc-dc-text-secondary: var(--fmc-dc-color-ink-1); --fmc-dc-text-tertiary: var(--fmc-dc-color-ink-2); --fmc-dc-text-muted: var(--fmc-dc-color-ink-3); --fmc-dc-text-faint: var(--fmc-dc-color-ink-4); --fmc-dc-text-on-accent: var(--fmc-dc-color-ink-0); --fmc-dc-text-on-danger: #ffffff; --fmc-dc-surface-canvas: var(--fmc-dc-color-bay); --fmc-dc-surface-base: var(--fmc-dc-color-panel); --fmc-dc-surface-elevated: var(--fmc-dc-color-panel); --fmc-dc-surface-sunken: var(--fmc-dc-color-rail); --fmc-dc-surface-deck: var(--fmc-dc-color-deck); --fmc-dc-border-subtle: var(--fmc-dc-color-line); --fmc-dc-border-strong: var(--fmc-dc-color-rule); --fmc-dc-border-accent: var(--fmc-dc-color-spark); --fmc-dc-accent: var(--fmc-dc-color-amber-500); --fmc-dc-accent-hover: var(--fmc-dc-color-amber-400); --fmc-dc-accent-strong: var(--fmc-dc-color-amber-700); --fmc-dc-danger: var(--fmc-dc-color-ruby-500); --fmc-dc-danger-hover: var(--fmc-dc-color-ruby-400); --fmc-dc-danger-strong: var(--fmc-dc-color-ruby-700); --fmc-dc-success: var(--fmc-dc-color-moss-600); --fmc-dc-success-strong: var(--fmc-dc-color-moss-700); --fmc-dc-info: var(--fmc-dc-color-cyan-500); --fmc-dc-info-strong: var(--fmc-dc-color-cyan-700); /* Focus ring — single source of truth. */ --fmc-dc-focus-ring: 0 0 0 3px rgba(245, 158, 11, 0.32); }