/** * Earnture global theme tokens. * * One token layer for the whole site. Light is the default; dark is applied by a * single `data-theme="dark"` attribute on , set before first paint. * * Any future Earnture component that uses these tokens gets both themes for free * and needs no dark-mode CSS of its own. */ :root { /* ---- Brand constants: identity, never theme-dependent ---- */ --ent-petrol: #0D2426; --ent-ivory: #F5F1E8; --ent-ember: #E86F4B; --ent-sage: #5F6E6A; --ent-apricot: #F2D6C9; --ent-petrol-lift: #153033; /* ---- Semantic tokens: LIGHT ---- */ --ent-c-bg: var(--ent-ivory); --ent-c-surface: #FFFFFF; --ent-c-surface-2: #FAF7F0; --ent-c-text: var(--ent-petrol); --ent-c-text-body: #1F3A3B; --ent-c-text-muted: var(--ent-sage); --ent-c-border: rgba(13, 36, 38, 0.12); --ent-c-border-strong: rgba(13, 36, 38, 0.22); --ent-c-accent: var(--ent-ember); --ent-c-accent-quiet: var(--ent-apricot); --ent-c-on-accent: #FFFFFF; --ent-c-invert-bg: var(--ent-petrol); --ent-c-invert-text: var(--ent-ivory); --ent-c-focus: #0D2426; --ent-c-overlay: rgba(13, 36, 38, 0.45); --ent-c-shadow: rgba(13, 36, 38, 0.10); /* Interaction surfaces. Defined once here so components never need their own dark-mode override just to tint a hover or an input. */ --ent-c-hover: #EFEADF; --ent-c-pressed: #E6E0D3; --ent-c-field: #FFFFFF; --ent-c-field-border: rgba(13, 36, 38, 0.16); /* ---- Typography: reuse what the site already loads ---- */ --ent-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ent-font-display: "Bricolage Grotesque", var(--ent-font-body); /* ---- Spacing / geometry ---- */ --ent-gap-xs: 4px; --ent-gap-sm: 8px; --ent-gap-md: 16px; --ent-gap-lg: 24px; --ent-gap-xl: 32px; --ent-radius-sm: 8px; --ent-radius-md: 12px; --ent-radius-lg: 16px; --ent-container: 1320px; /* ---- Motion ---- */ --ent-t-fast: 180ms; --ent-t-base: 200ms; --ent-t-panel: 240ms; --ent-ease: cubic-bezier(0.2, 0, 0.2, 1); color-scheme: light; } :root[data-theme="dark"] { --ent-c-bg: var(--ent-petrol); --ent-c-surface: var(--ent-petrol-lift); --ent-c-surface-2: #10292C; --ent-c-text: var(--ent-ivory); --ent-c-text-body: #E8E4DB; --ent-c-text-muted: #A7B4B0; --ent-c-border: rgba(245, 241, 232, 0.14); --ent-c-border-strong: rgba(245, 241, 232, 0.26); --ent-c-accent: var(--ent-ember); --ent-c-accent-quiet: rgba(232, 111, 75, 0.20); --ent-c-on-accent: #180B06; --ent-c-invert-bg: var(--ent-ivory); --ent-c-invert-text: var(--ent-petrol); --ent-c-focus: #F5F1E8; --ent-c-overlay: rgba(5, 16, 17, 0.62); --ent-c-shadow: rgba(0, 0, 0, 0.45); --ent-c-hover: rgba(245, 241, 232, 0.08); --ent-c-pressed: rgba(245, 241, 232, 0.14); /* Lifted clearly off the Deep Petrol bar so the field stays legible. */ --ent-c-field: #1B383B; --ent-c-field-border: rgba(245, 241, 232, 0.20); color-scheme: dark; } /* -------------------------------------------------------------------------- * Global surfaces. * Deliberately narrow: only elements confirmed to exist on this site, and only * under an explicit dark theme, so nothing changes for light-mode visitors. * -------------------------------------------------------------------------- */ :root[data-theme="dark"] body { background-color: var(--ent-c-bg); color: var(--ent-c-text-body); } :root[data-theme="dark"] .site, :root[data-theme="dark"] .site-content, :root[data-theme="dark"] #content, :root[data-theme="dark"] #primary, :root[data-theme="dark"] .ast-container, :root[data-theme="dark"] .entry-content { background-color: transparent; color: var(--ent-c-text-body); } :root[data-theme="dark"] .entry-title, :root[data-theme="dark"] .entry-content h1, :root[data-theme="dark"] .entry-content h2, :root[data-theme="dark"] .entry-content h3, :root[data-theme="dark"] .entry-content h4 { color: var(--ent-c-text); } /* Astra global palette, remapped for dark. Astra still owns the layout. */ :root[data-theme="dark"] { --ast-global-color-2: #F5F1E8; --ast-global-color-3: #A7B4B0; --ast-global-color-4: #153033; --ast-global-color-5: #0D2426; --ast-global-color-8: #E8E4DB; } /* -------------------------------------------------------------------------- * Earnture homepage sections. * All seven share one identical token set, so one override converts them all. * -------------------------------------------------------------------------- */ :root[data-theme="dark"] .ent-featured, :root[data-theme="dark"] .ent-categories, :root[data-theme="dark"] .ent-latest, :root[data-theme="dark"] .ent-roadmap, :root[data-theme="dark"] .ent-trending, :root[data-theme="dark"] .ent-resources, :root[data-theme="dark"] .ent-newsletter { --ent-white: #153033; --ent-soft: #10292C; --ent-border: rgba(245, 241, 232, 0.14); --ent-navy: #F5F1E8; --ent-text: #E8E4DB; --ent-muted: #A7B4B0; --ent-green: #5FD98C; --ent-blue: #7FB2FF; --ent-error: #FF8A80; } /* -------------------------------------------------------------------------- * Reduced motion: honoured globally, once. * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --ent-t-fast: 1ms; --ent-t-base: 1ms; --ent-t-panel: 1ms; } }