/* ===== Allure Consulting — Design Tokens ===== */ :root, [data-theme='dark'] { /* Surfaces — deep charcoal, near-black with subtle blue undertone */ --color-bg: #0a0c10; --color-surface: #10131a; --color-surface-2: #161a23; --color-surface-offset: #1b1f29; --color-surface-offset-2: #232834; --color-surface-dynamic: #2a2f3c; --color-divider: #1d212b; --color-border: #2a3041; /* Text */ --color-text: #ecedef; --color-text-muted: #98a0ad; --color-text-faint: #5a6172; --color-text-inverse: #0a0c10; /* Primary — refined dark blue, the "trust" accent */ --color-primary: #2f6fae; --color-primary-hover: #4087c9; --color-primary-active: #5a9ddc; --color-primary-highlight: #1d2a3a; /* Accent — champagne gold (luxury restraint) */ --color-accent: #c9a66b; --color-accent-hover: #d7b97f; --color-accent-active: #b58f55; --color-accent-highlight: #2a2519; /* Semantic */ --color-error: #d35a6e; --color-warning: #d39a4e; --color-success: #5fa563; /* Type scale — fluid */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem); --text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); --text-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); --text-3xl: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem); --text-hero: clamp(3rem, 1.5rem + 5.5vw, 6rem); /* Spacing — 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem; /* Radius */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows tuned for dark surfaces */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.55); --shadow-glow: 0 0 0 1px rgba(201, 166, 107, 0.25), 0 12px 40px rgba(47, 111, 174, 0.18); /* Content widths */ --content-narrow: 720px; --content-default: 1080px; --content-wide: 1280px; --content-full: 100%; /* Transitions */ --t-fast: 160ms cubic-bezier(0.2, 0.7, 0.2, 1); --t-base: 280ms cubic-bezier(0.2, 0.7, 0.2, 1); --t-slow: 600ms cubic-bezier(0.2, 0.7, 0.2, 1); /* Fonts — loaded from Fontshare in */ --font-display: 'Tenor Sans', 'Cormorant Garamond', Georgia, serif; --font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-serif: 'Cormorant Garamond', Georgia, serif; } /* Light mode — secondary, for clients with display preference */ [data-theme='light'] { --color-bg: #f6f5f1; --color-surface: #ffffff; --color-surface-2: #faf9f4; --color-surface-offset: #efece4; --color-surface-offset-2: #e6e2d8; --color-divider: #e0ddd4; --color-border: #cfcabc; --color-text: #161a23; --color-text-muted: #545a68; --color-text-faint: #8a8f9b; --color-text-inverse: #ffffff; --color-primary: #1b3a5c; --color-primary-hover: #2f6fae; --color-primary-active: #112641; --color-primary-highlight: #d8e3ef; --color-accent: #a3823c; --color-accent-hover: #c9a66b; --color-accent-active: #816522; --color-accent-highlight: #f1e8d2; --shadow-sm: 0 1px 2px rgba(20, 24, 36, 0.06); --shadow-md: 0 8px 24px rgba(20, 24, 36, 0.08); --shadow-lg: 0 24px 60px rgba(20, 24, 36, 0.12); --shadow-glow: 0 0 0 1px rgba(163, 130, 60, 0.2), 0 16px 40px rgba(27, 58, 92, 0.15); }