/* ========================================================================== Eye Marketing Limited — Design Tokens ========================================================================== */ :root { /* Brand palette (client-specified) */ --color-white: #FFFFFF; --color-pearl: #E1DFE4; --color-blush: #DF788D; --color-crimson: #CD0D32; --color-crimson-dark: #A50A28; --color-charcoal: #727272; /* Extended neutrals (derived, for text hierarchy + accessible contrast) */ --color-ink: #1C1B1E; --color-ink-soft: #423F45; --color-pearl-soft: #F3F2F4; --color-blush-tint: #FBEFF1; --color-border: #E7E5E9; /* Semantic surfaces */ --surface-page: var(--color-white); --surface-muted: var(--color-pearl-soft); --surface-accent: var(--color-blush-tint); --surface-inverse: var(--color-ink); --text-primary: var(--color-ink); --text-secondary: var(--color-charcoal); --text-inverse: var(--color-white); --text-inverse-muted: var(--color-pearl); --accent: var(--color-crimson); --accent-strong: var(--color-crimson-dark); /* Typography */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Type scale (~1.25 ratio, capped for hero) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.75rem; /* 28px */ --text-2xl: 2.25rem; /* 36px */ --text-3xl: 2.875rem; /* 46px */ --text-4xl: 3.5rem; /* 56px */ --text-5xl: 4.25rem; /* 68px */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.75; /* Spacing scale (4px base) */ --space-1: 0.5rem; /* 8px */ --space-2: 1rem; /* 16px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 3rem; /* 48px */ --space-6: 4rem; /* 64px */ --space-7: 6rem; /* 96px */ --space-8: 8rem; /* 128px */ /* Layout */ --container-max: 1240px; --container-pad: 1.5rem; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 22px; --radius-pill: 999px; /* Shadow */ --shadow-sm: 0 1px 2px rgba(28,27,30,0.05), 0 1px 3px rgba(28,27,30,0.06); --shadow-md: 0 8px 24px rgba(28,27,30,0.07), 0 2px 6px rgba(28,27,30,0.05); --shadow-lg: 0 24px 48px rgba(28,27,30,0.10), 0 8px 20px rgba(28,27,30,0.06); /* Motion */ --ease-out: cubic-bezier(.16,1,.3,1); --duration-fast: 150ms; --duration-base: 280ms; --duration-slow: 500ms; } /* Dark surface theme (toggle via [data-theme="dark"] on ) */ [data-theme="dark"] { --surface-page: #17161A; --surface-muted: #1F1E23; --surface-accent: #2A1B20; --surface-inverse: var(--color-white); --text-primary: #F4F3F5; --text-secondary: #B9B7BD; --text-inverse: var(--color-ink); --text-inverse-muted: var(--color-charcoal); --color-border: #2E2C32; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.35); --shadow-lg: 0 24px 48px rgba(0,0,0,0.45); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }