/* ========================================================================== MOTIQ — Design Tokens All visual decisions live here. Change once, update everywhere. ========================================================================== */ :root { /* ── Brand Colors ─────────────────────────────────────────────────────── */ --color-white: #FFFFFF; --color-snow: #F8F8FA; --color-ice: #F0F0F3; --color-silver: #C0C0C8; --color-steel: #8A8A96; --color-slate: #5A5A66; --color-charcoal: #222222; --color-graphite: #111111; --color-black: #000000; --color-red: #D52B1E; --color-red-light: #E8453A; --color-red-dark: #B01F14; --color-red-glow: rgba(213, 43, 30, 0.35); /* ── Semantic Tokens (Light Mode) ─────────────────────────────────────── */ --bg-primary: var(--color-white); --bg-secondary: var(--color-snow); --bg-tertiary: var(--color-ice); --bg-elevated: var(--color-white); --bg-inverse: var(--color-graphite); --text-primary: var(--color-graphite); --text-secondary: var(--color-slate); --text-tertiary: var(--color-steel); --text-inverse: var(--color-white); --text-accent: var(--color-red); --border-color: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --divider: rgba(0, 0, 0, 0.06); --surface-glass: rgba(255, 255, 255, 0.72); --surface-glass-border: rgba(255, 255, 255, 0.25); --surface-glass-hover: rgba(255, 255, 255, 0.85); --card-bg: var(--color-white); --card-hover-bg: var(--color-white); --card-shadow: var(--shadow-md); --card-hover-shadow: var(--shadow-xl); --input-bg: var(--color-white); --input-border: rgba(0, 0, 0, 0.12); --input-focus-border: var(--color-red); --input-placeholder: var(--color-steel); --nav-bg: rgba(255, 255, 255, 0.80); --nav-bg-scrolled: rgba(255, 255, 255, 0.92); --footer-bg: var(--color-graphite); --footer-text: var(--color-silver); /* ── Chrome / Metallic Gradients ──────────────────────────────────────── */ --gradient-chrome: linear-gradient(135deg, #E8E8E8 0%, #B8B8C0 25%, #D8D8E0 50%, #A8A8B0 75%, #C8C8D0 100%); --gradient-red: linear-gradient(135deg, var(--color-red) 0%, var(--color-red-light) 100%); --gradient-dark: linear-gradient(180deg, var(--color-graphite) 0%, var(--color-charcoal) 100%); --gradient-hero: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.40) 40%, rgba(0,0,0,0.70) 100%); --gradient-card: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.60) 100%); --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); /* ── Typography ───────────────────────────────────────────────────────── */ --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --font-ui: 'Inter', system-ui, -apple-system, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* Fluid type scale — min @ 375px, max @ 1440px */ --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* 11-12px */ --text-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 12-14px */ --text-base: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); /* 14-16px */ --text-lg: clamp(1rem, 0.93rem + 0.3vw, 1.125rem); /* 16-18px */ --text-xl: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); /* 18-22px */ --text-2xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); /* 22-28px */ --text-3xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); /* 28-40px */ --text-4xl: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); /* 36-56px */ --text-5xl: clamp(2.75rem, 2rem + 3vw, 4.5rem); /* 44-72px */ --text-6xl: clamp(3.5rem, 2.5rem + 4vw, 6rem); /* 56-96px */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ── Spacing (4px base unit) ──────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ── Border Radius ────────────────────────────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-pill: 999px; --radius-round: 50%; /* ── Shadows ──────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16); --shadow-glow: 0 0 24px var(--color-red-glow); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* ── Transitions ──────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; --duration-slowest: 1000ms; --transition-base: all var(--duration-normal) var(--ease-out); --transition-fast: all var(--duration-fast) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-out); --transition-opacity: opacity var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); /* ── Glassmorphism ────────────────────────────────────────────────────── */ --glass-blur: 20px; --glass-blur-heavy: 40px; --glass-saturation: 180%; /* ── Z-Index Scale ────────────────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-max: 9999; /* ── Layout ───────────────────────────────────────────────────────────── */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1400px; --container-padding: clamp(1rem, 3vw, 3rem); /* ── Misc ─────────────────────────────────────────────────────────────── */ --nav-height: 80px; --nav-height-mobile: 64px; } /* ========================================================================== Dark Mode Overrides ========================================================================== */ [data-theme="dark"] { --bg-primary: var(--color-graphite); --bg-secondary: #0D0D0D; --bg-tertiary: var(--color-charcoal); --bg-elevated: #1A1A1A; --bg-inverse: var(--color-white); --text-primary: var(--color-white); --text-secondary: var(--color-silver); --text-tertiary: var(--color-steel); --text-inverse: var(--color-graphite); --border-color: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --divider: rgba(255, 255, 255, 0.06); --surface-glass: rgba(30, 30, 30, 0.72); --surface-glass-border: rgba(255, 255, 255, 0.08); --surface-glass-hover: rgba(40, 40, 40, 0.85); --card-bg: #1A1A1A; --card-hover-bg: #1F1F1F; --input-bg: rgba(255, 255, 255, 0.05); --input-border: rgba(255, 255, 255, 0.10); --input-placeholder: var(--color-steel); --nav-bg: rgba(17, 17, 17, 0.80); --nav-bg-scrolled: rgba(17, 17, 17, 0.92); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.5); }