/* Aurora theme — design tokens (CSS custom properties) * These declare default values. Tenant-specific overrides written by * tenant-context.ejs into * load AFTER this file in the cascade and therefore win automatically. * * Dark mode: explicit via , or * prefers-color-scheme when tenant themeConfig.colorScheme is "auto". * Default storefront is light (data-aurora-color-scheme="light" via tenant-context). */ :root { /* Brand */ --aurora-brand-primary: #1A2A4A; --aurora-brand-primary-rgb: 26, 42, 74; --aurora-brand-primary-hover: #112042; --aurora-brand-accent: #E76F51; --aurora-brand-accent-rgb: 231, 111, 81; --aurora-brand-accent-hover: #d96346; /* Surfaces */ --aurora-surface: #FAFAF7; --aurora-surface-elevated: #FFFFFF; --aurora-surface-muted: #F2F0EA; --aurora-surface-overlay: rgba(20, 22, 28, 0.55); /* Text */ --aurora-text: #1B1B1B; --aurora-text-muted: #6B6B6B; --aurora-text-subtle: #9A9A95; --aurora-text-inverse: #FAFAF7; /* Borders */ --aurora-border: #E6E2DA; --aurora-border-strong: #C9C3B6; --aurora-border-focus: var(--aurora-brand-accent); /* Status */ --aurora-success: #2E7D5B; --aurora-success-bg: #E6F4EC; --aurora-warning: #B7791F; --aurora-warning-bg: #FBF2DA; --aurora-danger: #B22D2D; --aurora-danger-bg: #FBE6E6; --aurora-info: #1F5DA0; --aurora-info-bg: #E2EEF9; /* Radius */ --aurora-radius-xs: 4px; --aurora-radius-sm: 6px; --aurora-radius-md: 12px; --aurora-radius-lg: 20px; --aurora-radius-pill: 999px; /* Shadow */ --aurora-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --aurora-shadow-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06); --aurora-shadow-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 40px rgba(0, 0, 0, 0.10); --aurora-shadow-focus: 0 0 0 3px rgba(231, 111, 81, 0.25); /* Typography */ --aurora-font-heading: "Fraunces", Georgia, "Times New Roman", serif; --aurora-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --aurora-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --aurora-fs-xs: 0.75rem; /* 12px */ --aurora-fs-sm: 0.875rem; /* 14px */ --aurora-fs-base: 1rem; /* 16px */ --aurora-fs-md: 1.125rem; /* 18px */ --aurora-fs-lg: 1.375rem; /* 22px */ --aurora-fs-xl: 1.75rem; /* 28px */ --aurora-fs-2xl: 2.25rem; /* 36px */ --aurora-fs-3xl: 3rem; /* 48px */ --aurora-fs-4xl: 4rem; /* 64px */ --aurora-lh-tight: 1.15; --aurora-lh-snug: 1.35; --aurora-lh-base: 1.55; --aurora-lh-relaxed: 1.75; --aurora-fw-regular: 400; --aurora-fw-medium: 500; --aurora-fw-semibold: 600; --aurora-fw-bold: 700; /* Spacing scale (4-based) */ --aurora-space-1: 4px; --aurora-space-2: 8px; --aurora-space-3: 12px; --aurora-space-4: 16px; --aurora-space-5: 20px; --aurora-space-6: 24px; --aurora-space-8: 32px; --aurora-space-10: 40px; --aurora-space-12: 48px; --aurora-space-16: 64px; --aurora-space-20: 80px; /* Layout */ --aurora-container: 1240px; --aurora-container-narrow: 880px; --aurora-container-wide: 1440px; --aurora-header-height: 88px; --aurora-header-height-mobile: 64px; --aurora-z-header: 100; --aurora-z-drawer: 200; --aurora-z-modal: 300; --aurora-z-toast: 400; /* Motion */ --aurora-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --aurora-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --aurora-dur-fast: 150ms; --aurora-dur-base: 220ms; --aurora-dur-slow: 360ms; /* Grid */ --aurora-grid-gap: var(--aurora-space-6); --aurora-grid-gap-mobile: var(--aurora-space-4); /* Tenant compatibility: * The default theme uses --color-primary etc. We mirror Aurora tokens onto * those legacy names so existing default widgets that the storefront still * uses (cart count badge, dropdowns from /js/header.js, etc.) inherit * Aurora's palette automatically. */ --color-primary: var(--aurora-brand-primary); --color-primary-hover: var(--aurora-brand-primary-hover); --color-secondary: var(--aurora-brand-accent); --color-accent: var(--aurora-brand-accent); --color-text: var(--aurora-text); --color-text-muted: var(--aurora-text-muted); --color-bg: var(--aurora-surface); --color-surface: var(--aurora-surface-elevated); --color-border: var(--aurora-border); } :root[data-aurora-color-scheme="light"] { color-scheme: light; } /* Reduced motion: shorten transitions */ @media (prefers-reduced-motion: reduce) { :root { --aurora-dur-fast: 0ms; --aurora-dur-base: 0ms; --aurora-dur-slow: 0ms; } } /* =================== DARK MODE TOKENS =================== */ /* Shared dark token block reused by both auto + explicit selectors. */ @media (prefers-color-scheme: dark) { :root:not([data-aurora-color-scheme="light"]) { /* Brand — slightly brighter for dark contrast */ --aurora-brand-primary: #4A6FA5; --aurora-brand-primary-rgb: 74, 111, 165; --aurora-brand-primary-hover: #5b80b6; --aurora-brand-accent: #F08A6B; --aurora-brand-accent-rgb: 240, 138, 107; --aurora-brand-accent-hover: #f59779; /* Surfaces */ --aurora-surface: #0F1216; --aurora-surface-elevated: #181C22; --aurora-surface-muted: #1F242C; --aurora-surface-overlay: rgba(0, 0, 0, 0.65); /* Text */ --aurora-text: #F2EDE3; --aurora-text-muted: #B5AFA3; --aurora-text-subtle: #7C7A73; --aurora-text-inverse: #1B1B1B; /* Borders */ --aurora-border: #2A2F38; --aurora-border-strong: #3D434E; /* Status — softened for dark backgrounds */ --aurora-success: #4FBF87; --aurora-success-bg: #11281D; --aurora-warning: #E2B05A; --aurora-warning-bg: #2B210A; --aurora-danger: #E16E6E; --aurora-danger-bg: #2C1212; --aurora-info: #6FA8E6; --aurora-info-bg: #102136; /* Shadows: deeper, more translucent */ --aurora-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --aurora-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --aurora-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.55); } } /* Explicit opt-in (overrides the auto media query when set). */ :root[data-aurora-color-scheme="dark"] { --aurora-brand-primary: #4A6FA5; --aurora-brand-primary-rgb: 74, 111, 165; --aurora-brand-primary-hover: #5b80b6; --aurora-brand-accent: #F08A6B; --aurora-brand-accent-rgb: 240, 138, 107; --aurora-brand-accent-hover: #f59779; --aurora-surface: #0F1216; --aurora-surface-elevated: #181C22; --aurora-surface-muted: #1F242C; --aurora-surface-overlay: rgba(0, 0, 0, 0.65); --aurora-text: #F2EDE3; --aurora-text-muted: #B5AFA3; --aurora-text-subtle: #7C7A73; --aurora-text-inverse: #1B1B1B; --aurora-border: #2A2F38; --aurora-border-strong: #3D434E; --aurora-success: #4FBF87; --aurora-success-bg: #11281D; --aurora-warning: #E2B05A; --aurora-warning-bg: #2B210A; --aurora-danger: #E16E6E; --aurora-danger-bg: #2C1212; --aurora-info: #6FA8E6; --aurora-info-bg: #102136; --aurora-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --aurora-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45); --aurora-shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-aurora-color-scheme="light"]) { color-scheme: dark; } } /* Dark-mode tweaks for surfaces that have hardcoded white-ish backgrounds in * inline EJS (rare cases). Components.css already uses tokens, but a couple * of layout layers benefit from explicit overrides for parity. */ @media (prefers-color-scheme: dark) { .theme-aurora:not([data-aurora-color-scheme="light"]) img { /* Slightly soften pure-white assets so they don't flash against dark UI */ } .theme-aurora:not([data-aurora-color-scheme="light"]) .aurora-footer__brand-logo:not(.aurora-footer__brand-logo--no-filter):not(.aurora-footer__brand-logo--native) { filter: invert(1) brightness(2); } } :root[data-aurora-color-scheme="dark"] .theme-aurora .aurora-footer__brand-logo:not(.aurora-footer__brand-logo--no-filter):not(.aurora-footer__brand-logo--native) { filter: invert(1) brightness(2); }