/* ============================================ ANOINTED DIGITAL — Design Tokens PALETTE RULES: - Navy #0F172A → primary dark, body copy, headers - Slate #F1F5F9 → light base, premium white space - Platinum #BFC1C2 → borders, dividers, Abigail AI widget outline - Deep Gold #C69B3C → CTA buttons ONLY. Never decorative. PHILOSOPHY: Wealth insulation firm. NOT a startup. White space = premium asset. Never fill gaps with noise. ============================================ */ :root, [data-theme='light'] { /* === SURFACES (light mode) === */ --color-bg: #F1F5F9; /* Slate — main page bg */ --color-surface: #FFFFFF; /* Pure white — card surfaces */ --color-surface-2: #F8FAFC; /* Near white — subtle offset */ --color-surface-offset: #E2E8F0; /* Soft slate — section backgrounds */ --color-surface-offset-2:#CBD5E1; /* Medium slate — divider zones */ --color-surface-dark: #0F172A; /* Navy — dark sections */ --color-surface-dark-2: #1E293B; /* Navy lift — cards on dark */ --color-divider: #E2E8F0; --color-border: #BFC1C2; /* Platinum — all borders */ --color-border-subtle: #E2E8F0; /* Light borders */ /* === TEXT === */ --color-text: #0F172A; /* Navy — ALL body copy */ --color-text-muted: #475569; /* Slate-600 */ --color-text-faint: #94A3B8; /* Slate-400 */ --color-text-inverse: #F1F5F9; /* On dark surfaces */ --color-text-inverse-muted: rgba(241,245,249,0.65); /* === PRIMARY ACCENT — Deep Gold (CTAs ONLY) === */ --color-accent: #C69B3C; --color-accent-hover: #A67C28; --color-accent-active: #8B5E10; --color-accent-glow: rgba(198,155,60,0.18); --color-accent-border: rgba(198,155,60,0.30); /* === PLATINUM (AI widget, precision tools, borders) === */ --color-platinum: #BFC1C2; --color-platinum-light: #DDE1E4; --color-platinum-dark: #8E9295; --color-platinum-outline: rgba(191,193,194,0.50); /* === Radius === */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* === Transitions === */ --transition-fast: 140ms cubic-bezier(0.16, 1, 0.3, 1); --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); /* === Shadows === */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.05); --shadow-sm: 0 1px 4px rgba(15,23,42,0.08); --shadow-md: 0 4px 16px rgba(15,23,42,0.10); --shadow-lg: 0 12px 40px rgba(15,23,42,0.12); --shadow-xl: 0 24px 60px rgba(15,23,42,0.14); --shadow-gold: 0 4px 20px rgba(198,155,60,0.22); --shadow-gold-lg: 0 8px 32px rgba(198,155,60,0.28); --shadow-platinum: 0 0 0 1px rgba(191,193,194,0.6); /* === Content widths === */ --content-narrow: 600px; --content-default: 960px; --content-wide: 1200px; --content-max: 1400px; /* === Type Scale (fluid) === */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 8rem); /* === 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; /* === Fonts === */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'General Sans', 'Inter', system-ui, sans-serif; } /* ============================================ DARK MODE — Navy-forward. Premium. ============================================ */ [data-theme='dark'] { --color-bg: #080D18; --color-surface: #0F172A; --color-surface-2: #1E293B; --color-surface-offset: #162032; --color-surface-offset-2:#1A2640; --color-surface-dark: #050A12; --color-surface-dark-2: #0F172A; --color-divider: #1E293B; --color-border: rgba(191,193,194,0.18); --color-border-subtle: rgba(191,193,194,0.10); --color-text: #E2E8F0; --color-text-muted: #94A3B8; --color-text-faint: #475569; --color-text-inverse: #0F172A; --color-text-inverse-muted: rgba(15,23,42,0.65); --color-accent: #D4A84B; --color-accent-hover: #E8BC5E; --color-accent-active: #C69B3C; --color-accent-glow: rgba(212,168,75,0.20); --color-accent-border: rgba(212,168,75,0.28); --color-platinum: #94A3B8; --color-platinum-light: #CBD5E1; --color-platinum-dark: #64748B; --color-platinum-outline: rgba(148,163,184,0.35); --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 4px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55); --shadow-xl: 0 24px 60px rgba(0,0,0,0.65); --shadow-gold: 0 4px 20px rgba(212,168,75,0.22); --shadow-gold-lg: 0 8px 32px rgba(212,168,75,0.28); --shadow-platinum: 0 0 0 1px rgba(148,163,184,0.35); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #080D18; --color-surface: #0F172A; --color-surface-2: #1E293B; --color-surface-offset: #162032; --color-surface-offset-2:#1A2640; --color-surface-dark: #050A12; --color-surface-dark-2: #0F172A; --color-divider: #1E293B; --color-border: rgba(191,193,194,0.18); --color-border-subtle: rgba(191,193,194,0.10); --color-text: #E2E8F0; --color-text-muted: #94A3B8; --color-text-faint: #475569; --color-text-inverse: #0F172A; --color-text-inverse-muted: rgba(15,23,42,0.65); --color-accent: #D4A84B; --color-accent-hover: #E8BC5E; --color-accent-active: #C69B3C; --color-accent-glow: rgba(212,168,75,0.20); --color-accent-border: rgba(212,168,75,0.28); --color-platinum: #94A3B8; --color-platinum-light: #CBD5E1; --color-platinum-dark: #64748B; --color-platinum-outline: rgba(148,163,184,0.35); --shadow-xs: 0 1px 2px rgba(0,0,0,0.25); --shadow-sm: 0 1px 4px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55); --shadow-xl: 0 24px 60px rgba(0,0,0,0.65); --shadow-gold: 0 4px 20px rgba(212,168,75,0.22); --shadow-gold-lg: 0 8px 32px rgba(212,168,75,0.28); --shadow-platinum: 0 0 0 1px rgba(148,163,184,0.35); } }