/* ========================================================================= * Darvazavia Ethical Living — Design Tokens * Single source of truth for the strict 8px grid, the premium "gate" palette, * and typography. Loaded BEFORE style.css so every other rule can consume it. * * Theme modes are driven by [data-theme="light"] / [data-theme="dark"] on * the element (set zero-flash by assets/js/il-theme-swapper.js). * ========================================================================= */ :root { /* ---- Brand "gate" palette (raw) ---- */ --il-brand-green: #3DAF85; --il-brand-navy: #0F2B3D; --il-brand-orange:#F5A623; --il-forest: #0F2B22; --il-cream: #F5F2EC; /* Foreground colors verified for WCAG AA on their paired backgrounds * (see inc/accessibility.php for the automated contrast audit). */ --il-on-green: #0F2B22; /* forest text on green button -> AA */ --il-on-orange: #0F2B3D; /* navy text on orange button -> AA */ --il-on-navy: #F5F2EC; /* cream text on navy -> AAA */ --il-on-forest: #F5F2EC; /* cream text on forest -> AAA */ --il-on-cream: #0F2B3D; /* navy text on cream -> AAA */ /* ---- 8px spacing grid (every value is a multiple of 8) ---- */ --il-space-0: 0; --il-space-1: 8px; --il-space-2: 16px; --il-space-3: 24px; --il-space-4: 32px; --il-space-5: 40px; /* note: jumps by 8 from here, layout-scale */ --il-space-6: 48px; --il-space-7: 64px; --il-space-8: 80px; --il-space-9: 96px; --il-space-10: 128px; /* ---- Radii (multiples of 8 / half-steps for pills) ---- */ --il-radius-sm: 4px; --il-radius-md: 8px; --il-radius-lg: 16px; --il-radius-xl: 24px; --il-radius-pill: 999px; /* ---- Layout ---- */ --il-container-max: 1280px; --il-container-narrow: 768px; /* ---- Elevation ---- */ --il-shadow-sm: 0 1px 2px rgba(15, 43, 34, 0.08); --il-shadow-md: 0 8px 24px rgba(15, 43, 34, 0.12); --il-shadow-lg: 0 16px 48px rgba(15, 43, 34, 0.18); /* ---- Typography ---- * Cormorant Garamond for luxury display headings. * Inter for UI/body text, 16px base, 1.5 line-height. */ --il-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --il-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --il-font-size-base: 16px; --il-line-height-base: 1.5; /* ---- Motion timing (consumed by JS + CSS fallbacks) ---- */ --il-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --il-dur-fast: 0.2s; --il-dur-med: 0.5s; --il-dur-slow: 0.8s; } /* ============================ LIGHT MODE ============================ */ :root, [data-theme="light"] { --il-color-bg: var(--il-cream); --il-color-surface: #FFFFFF; --il-color-surface-alt: #EFEAE0; --il-color-text: #102A22; /* near-forest, AAA on cream */ --il-color-heading: var(--il-brand-navy); --il-color-muted: #4A5B53; --il-color-border: #D8D0C2; --il-color-link-hover: #2C8F6A; /* darker green -> AA on cream */ --il-color-overlay: rgba(15, 43, 34, 0.55); } /* ============================ DARK MODE ============================ */ [data-theme="dark"] { --il-color-bg: var(--il-forest); --il-color-surface: #143A2C; --il-color-surface-alt: #1C4A39; --il-color-text: #EDEBE4; /* cream-ish, AAA on forest */ --il-color-heading: #F5F2EC; --il-color-muted: #B9C7BF; --il-color-border: #2A5A47; --il-color-link-hover: #6FD4AC; /* lighter green -> AA on forest */ --il-color-overlay: rgba(7, 20, 16, 0.7); /* On dark surfaces the green/orange need lighter on-colors */ --il-on-green: #06140F; --il-on-orange: #06140F; } /* Auto dark for first paint when user has OS dark + no stored choice. * The swapper script promotes this to an explicit attribute on load. */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --il-color-bg: var(--il-forest); --il-color-surface: #143A2C; --il-color-surface-alt: #1C4A39; --il-color-text: #EDEBE4; --il-color-heading: #F5F2EC; --il-color-muted: #B9C7BF; --il-color-border: #2A5A47; --il-color-link-hover: #6FD4AC; --il-color-overlay: rgba(7, 20, 16, 0.7); } }