/** * CommerceForge Design System - Central Design Tokens (Phase UI-01: Premium Commerce OS) * * Provides semantic CSS custom properties for color, typography, spacing, * containers, grids, radii, shadows, and motion curves. * * @author Jyotirmay Ray */ :root { /* ------------------------------------------------------------------------- * 1. Color System (Premium Commerce OS Palette) * ---------------------------------------------------------------------- */ --cf-color-ink: #0B0D10; --cf-color-surface: #111418; --cf-color-surface-raised: #171B20; --cf-color-surface-elevated: #1D2228; --cf-color-white: #FFFFFF; --cf-color-text-primary: #F5F7FA; --cf-color-text-secondary: #A5ACB8; --cf-color-text-muted: #737B87; --cf-color-border: #272D35; --cf-color-border-strong: #343B45; /* Primary Accent */ --cf-color-primary: #2F6BFF; --cf-color-primary-hover: #2458D9; --cf-color-primary-soft: rgba(47, 107, 255, 0.12); /* Semantic */ --cf-color-success: #22A06B; --cf-color-success-soft: rgba(34, 160, 107, 0.14); --cf-color-warning: #D99000; --cf-color-warning-soft: rgba(217, 144, 0, 0.14); --cf-color-danger: #D64545; --cf-color-danger-soft: rgba(214, 69, 69, 0.14); --cf-color-info: #4C8DFF; --cf-color-info-soft: rgba(76, 141, 255, 0.14); /* Semantic Overrides / Aliases for Full Compatibility */ --cf-color-bg: var(--cf-color-ink); --cf-color-text-inverse: var(--cf-color-ink); --cf-color-error: var(--cf-color-danger); --cf-color-error-subtle: var(--cf-color-danger-soft); --cf-color-success-subtle: var(--cf-color-success-soft); --cf-color-warning-subtle: var(--cf-color-warning-soft); --cf-color-sale: #FF4D4D; --cf-color-sale-subtle: rgba(255, 77, 77, 0.14); --cf-color-action-primary: var(--cf-color-primary); --cf-color-action-primary-hover: var(--cf-color-primary-hover); --cf-color-action-primary-text: var(--cf-color-white); --cf-color-action-secondary: var(--cf-color-surface-raised); --cf-color-action-secondary-hover: var(--cf-color-surface-elevated); --cf-color-action-secondary-text: var(--cf-color-text-primary); --cf-color-focus: var(--cf-color-primary); --cf-focus-ring: 0 0 0 2px var(--cf-color-surface), 0 0 0 4px var(--cf-color-primary); /* ------------------------------------------------------------------------- * 2. Typography Hierarchy (Space Grotesk Primary) * ---------------------------------------------------------------------- */ --cf-font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cf-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --cf-font-size-display: clamp(3.5rem, 5vw, 5rem); /* 64–80px */ --cf-font-size-hero: clamp(2.5rem, 4vw, 4rem); /* 48–64px */ --cf-font-size-h1: clamp(2.25rem, 3.2vw, 3rem); /* 40–48px */ --cf-font-size-h2: clamp(1.75rem, 2.5vw, 2.5rem); /* 32–40px */ --cf-font-size-h3: clamp(1.35rem, 1.8vw, 1.75rem); /* 24–28px */ --cf-font-size-body-lg: 1.125rem; /* 18px */ --cf-font-size-body: 1rem; /* 16px */ --cf-font-size-body-sm: 0.875rem; /* 14px */ --cf-font-size-small: 0.8125rem; /* 13px */ --cf-font-size-micro: 0.75rem; /* 12px */ --cf-font-size-caption: 0.6875rem; /* 11px */ --cf-line-height-tight: 1.15; --cf-line-height-snug: 1.3; --cf-line-height-normal: 1.5; --cf-line-height-relaxed: 1.65; --cf-font-weight-regular: 400; --cf-font-weight-medium: 500; --cf-font-weight-semibold: 600; --cf-font-weight-bold: 700; --cf-letter-spacing-tight: -0.03em; --cf-letter-spacing-normal: -0.01em; --cf-letter-spacing-wide: 0.04em; --cf-letter-spacing-caps: 0.08em; /* ------------------------------------------------------------------------- * 3. Spacing Scale System * ---------------------------------------------------------------------- */ --cf-space-4: 0.25rem; /* 4px */ --cf-space-8: 0.5rem; /* 8px */ --cf-space-12: 0.75rem; /* 12px */ --cf-space-16: 1rem; /* 16px */ --cf-space-20: 1.25rem; /* 20px */ --cf-space-24: 1.5rem; /* 24px */ --cf-space-32: 2rem; /* 32px */ --cf-space-40: 2.5rem; /* 40px */ --cf-space-48: 3rem; /* 48px */ --cf-space-64: 4rem; /* 64px */ --cf-space-80: 5rem; /* 80px */ --cf-space-96: 6rem; /* 96px */ --cf-space-120: 7.5rem; /* 120px */ /* Numeric aliases for existing code compatibility */ --cf-space-1: var(--cf-space-4); --cf-space-2: var(--cf-space-8); --cf-space-3: var(--cf-space-12); --cf-space-5: var(--cf-space-20); --cf-space-6: var(--cf-space-24); --cf-space-10: var(--cf-space-40); /* ------------------------------------------------------------------------- * 4. Layout, Containers & Grid System * ---------------------------------------------------------------------- */ --cf-container-max: 1440px; --cf-content-max: 1280px; --cf-grid-gap: 24px; --cf-gutter-desktop: 32px; --cf-gutter-tablet: 24px; --cf-gutter-mobile: 16px; /* ------------------------------------------------------------------------- * 5. Restrained Border Radius System * ---------------------------------------------------------------------- */ --cf-radius-sm: 8px; /* Small controls, badges, chips */ --cf-radius-input: 10px; /* Inputs, selects, textareas */ --cf-radius-card: 14px; /* Standard cards, components */ --cf-radius-lg: 18px; /* Large surfaces, modal dialogs, drawers */ --cf-radius-hero: 24px; /* Hero containers, major feature callouts */ --cf-radius-full: 9999px; /* Rounded pill badges */ --cf-radius-md: var(--cf-radius-input); /* ------------------------------------------------------------------------- * 6. Elevation, Surface Layering & Restrained Shadows * ---------------------------------------------------------------------- */ --cf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --cf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --cf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --cf-shadow-card: 0 0 0 1px var(--cf-color-border); --cf-shadow-card-hover: 0 0 0 1px var(--cf-color-border-strong), 0 8px 24px rgba(0, 0, 0, 0.4); --cf-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px var(--cf-color-border-strong); /* ------------------------------------------------------------------------- * 7. Transitions & Motion Curves (150-200ms Micro, 200-300ms Panels) * ---------------------------------------------------------------------- */ --cf-duration-micro: 160ms; --cf-duration-panel: 240ms; --cf-duration-fast: 160ms; --cf-duration-base: 240ms; --cf-duration-slow: 350ms; --cf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --cf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cf-transition-color: color var(--cf-duration-fast) var(--cf-ease-out), background-color var(--cf-duration-fast) var(--cf-ease-out), border-color var(--cf-duration-fast) var(--cf-ease-out); --cf-transition-card: transform var(--cf-duration-fast) var(--cf-ease-out), box-shadow var(--cf-duration-fast) var(--cf-ease-out), border-color var(--cf-duration-fast) var(--cf-ease-out); --cf-transition-panel: transform var(--cf-duration-panel) var(--cf-ease-out), opacity var(--cf-duration-panel) var(--cf-ease-out); /* ------------------------------------------------------------------------- * 8. Z-Index Layer Stack * ---------------------------------------------------------------------- */ --cf-z-normal: 1; --cf-z-elevate: 10; --cf-z-sticky: 100; --cf-z-header: 500; --cf-z-drawer: 1000; --cf-z-modal: 2000; --cf-z-toast: 3000; }