/* * FamilyCase Design System — Tokens (v2.6) * ------------------------------------------------------------------ * Single source of truth for color, type, space, motion, elevation * and radii. Inspired by neutral-heavy, restrained-accent systems * (Brex, Stripe Dashboard, HubSpot Sprocket). * * NEW FILE — does not modify the legacy ../styles.css tokens. Hero * components in components.css consume these; legacy screens keep * using ../styles.css until migrated per docs/ui-ux-audit-v2.6.md. * * Naming: --fc-{category}-{role}-{step} * fc = familycase namespace (avoid clobbering legacy --bg) * category = color | space | font | radius | shadow | motion | z * role = neutral | brand | success | warning | danger | info * step = numeric scale (50..900 for color, 0..16 for space) * * Do NOT hard-code raw hex / px values in components.css. If a token * is missing, add it here first. See docs/design-system.md. */ :root { /* ---------------------------------------------------------------- * Color — Neutral scale * Cool gray, slight blue tint. Backbone of the UI: surfaces, text, * borders, dividers. 90% of pixels should come from this scale. * ---------------------------------------------------------------- */ --fc-color-neutral-0: #ffffff; --fc-color-neutral-50: #f7f8fa; --fc-color-neutral-100: #eef0f4; --fc-color-neutral-150: #e4e7ed; --fc-color-neutral-200: #d6dae3; --fc-color-neutral-300: #b8bfcc; --fc-color-neutral-400: #8e97a8; --fc-color-neutral-500: #6b7385; --fc-color-neutral-600: #4d5566; --fc-color-neutral-700: #353c4d; --fc-color-neutral-800: #1f2535; --fc-color-neutral-900: #0b1020; /* ---------------------------------------------------------------- * Color — Brand * Restrained navy primary with a single saturated accent for CTAs * and focus. Use sparingly (<10% of pixels). * ---------------------------------------------------------------- */ --fc-color-brand-50: #eaf1ff; --fc-color-brand-100: #cfdfff; --fc-color-brand-200: #9bbcff; --fc-color-brand-300: #6798fe; --fc-color-brand-400: #3877f7; --fc-color-brand-500: #1f5fe6; /* primary action */ --fc-color-brand-600: #154bc2; /* hover */ --fc-color-brand-700: #0f3a99; /* pressed */ --fc-color-brand-800: #0a2a70; --fc-color-brand-900: #061a47; /* ---------------------------------------------------------------- * Color — Semantic * Reserve for status, validation, banners. Never decorative. * ---------------------------------------------------------------- */ --fc-color-success-50: #e8f7ef; --fc-color-success-500: #1f9d55; --fc-color-success-700: #146c3a; --fc-color-warning-50: #fff5e0; --fc-color-warning-500: #c97a0c; --fc-color-warning-700: #8a5208; --fc-color-danger-50: #fdecec; --fc-color-danger-500: #d6342a; --fc-color-danger-700: #9a1f17; --fc-color-info-50: #e7f1fb; --fc-color-info-500: #2073c4; --fc-color-info-700: #14507f; /* ---------------------------------------------------------------- * Color — Aliases (semantic role, not raw color) * Components should prefer these. Re-theming = remap aliases. * ---------------------------------------------------------------- */ --fc-surface-canvas: var(--fc-color-neutral-50); --fc-surface-raised: var(--fc-color-neutral-0); --fc-surface-sunken: var(--fc-color-neutral-100); --fc-surface-overlay: rgba(11, 16, 32, 0.48); --fc-text-strong: var(--fc-color-neutral-900); --fc-text-default: var(--fc-color-neutral-800); --fc-text-muted: var(--fc-color-neutral-500); --fc-text-subtle: var(--fc-color-neutral-400); --fc-text-inverse: var(--fc-color-neutral-0); --fc-text-link: var(--fc-color-brand-600); --fc-text-link-hover: var(--fc-color-brand-700); --fc-border-subtle: var(--fc-color-neutral-150); --fc-border-default: var(--fc-color-neutral-200); --fc-border-strong: var(--fc-color-neutral-300); --fc-border-focus: var(--fc-color-brand-500); /* ---------------------------------------------------------------- * Dashboard — sidebar * ---------------------------------------------------------------- */ --fc-sidebar-bg: #ffffff; --fc-sidebar-text: #5f6d84; --fc-sidebar-text-active: #3b82f6; --fc-sidebar-active-bg: #eef4ff; --fc-sidebar-active-border: #3b82f6; --fc-sidebar-hover-bg: #f1f5f9; --fc-sidebar-border: #e2e6ed; /* Context-aware wordmark color: dark on the light sidebar by default, * flipped to white under dark surfaces (see body.high-contrast / dark * surface overrides in styles.css). */ --fc-sidebar-brand-text: #0b152b; --fc-sidebar-width: 220px; /* ---------------------------------------------------------------- * Spacing — 4px base, geometric-ish to keep rhythm tight * Use step tokens; do not write raw px in components. * ---------------------------------------------------------------- */ --fc-space-0: 0; --fc-space-1: 2px; --fc-space-2: 4px; --fc-space-3: 8px; --fc-space-4: 12px; --fc-space-5: 16px; --fc-space-6: 20px; --fc-space-7: 24px; --fc-space-8: 32px; --fc-space-9: 40px; --fc-space-10: 48px; --fc-space-11: 64px; --fc-space-12: 80px; --fc-space-13: 96px; --fc-space-14: 128px; /* ---------------------------------------------------------------- * Typography * System stack first for snappy first paint. Mono for IDs / money. * Scale: 12 / 14 / 16 / 20 / 24 / 32 / 48. * ---------------------------------------------------------------- */ --fc-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --fc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fc-font-size-xs: 12px; --fc-font-size-sm: 14px; --fc-font-size-md: 16px; --fc-font-size-lg: 20px; --fc-font-size-xl: 24px; --fc-font-size-2xl: 32px; --fc-font-size-3xl: 48px; --fc-line-height-xs: 16px; --fc-line-height-sm: 20px; --fc-line-height-md: 24px; --fc-line-height-lg: 28px; --fc-line-height-xl: 32px; --fc-line-height-2xl: 40px; --fc-line-height-3xl: 56px; --fc-font-weight-regular: 400; --fc-font-weight-medium: 500; --fc-font-weight-semibold: 600; --fc-font-weight-bold: 700; --fc-letter-spacing-tight: -0.01em; --fc-letter-spacing-normal: 0; --fc-letter-spacing-wide: 0.02em; /* ---------------------------------------------------------------- * Radii — slightly rounded, no pill-everything * ---------------------------------------------------------------- */ --fc-radius-xs: 2px; --fc-radius-sm: 4px; --fc-radius-md: 6px; --fc-radius-lg: 10px; --fc-radius-xl: 16px; --fc-radius-pill: 9999px; /* ---------------------------------------------------------------- * Shadows — soft, single-direction, layered * Avoid heavy drop shadows. Stripe-style: subtle border + tiny lift. * ---------------------------------------------------------------- */ --fc-shadow-xs: 0 1px 1px rgba(11, 16, 32, 0.04); --fc-shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.06), 0 1px 3px rgba(11, 16, 32, 0.04); --fc-shadow-md: 0 4px 8px -2px rgba(11, 16, 32, 0.08), 0 2px 4px -2px rgba(11, 16, 32, 0.04); --fc-shadow-lg: 0 12px 24px -8px rgba(11, 16, 32, 0.14), 0 4px 8px -4px rgba(11, 16, 32, 0.06); --fc-shadow-xl: 0 24px 48px -12px rgba(11, 16, 32, 0.22); --fc-shadow-focus: 0 0 0 3px rgba(31, 95, 230, 0.32); /* ---------------------------------------------------------------- * Motion — short, decisive. Respect prefers-reduced-motion. * ---------------------------------------------------------------- */ --fc-motion-duration-instant: 60ms; --fc-motion-duration-fast: 120ms; --fc-motion-duration-base: 180ms; --fc-motion-duration-slow: 260ms; --fc-motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); --fc-motion-ease-enter: cubic-bezier(0, 0, 0, 1); --fc-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---------------------------------------------------------------- * Z-index — explicit ladder, no surprise stacking * ---------------------------------------------------------------- */ --fc-z-base: 0; --fc-z-raised: 10; --fc-z-dropdown: 100; --fc-z-sticky: 200; --fc-z-overlay: 900; --fc-z-modal: 1000; --fc-z-toast: 1100; } @media (prefers-reduced-motion: reduce) { :root { --fc-motion-duration-instant: 0ms; --fc-motion-duration-fast: 0ms; --fc-motion-duration-base: 0ms; --fc-motion-duration-slow: 0ms; } } /* ------------------------------------------------------------------ * Dark theme — opt-in via [data-fc-theme="dark"] on or scope. * Aliases remap; raw scale tokens stay constant. * ------------------------------------------------------------------ */ [data-fc-theme="dark"] { --fc-surface-canvas: var(--fc-color-neutral-900); --fc-surface-raised: var(--fc-color-neutral-800); --fc-surface-sunken: #06091a; --fc-surface-overlay: rgba(0, 0, 0, 0.6); --fc-text-strong: var(--fc-color-neutral-0); --fc-text-default: var(--fc-color-neutral-100); --fc-text-muted: var(--fc-color-neutral-300); --fc-text-subtle: var(--fc-color-neutral-400); --fc-border-subtle: var(--fc-color-neutral-700); --fc-border-default: var(--fc-color-neutral-600); --fc-border-strong: var(--fc-color-neutral-500); }