/* ========================================================= LUNA DS V3 — DESIGN TOKENS (source of truth) Rolex / Four Seasons luxury hospitality. Ivory + navy + champagne gold whisper. Canonical doc: LUNA_DS.md in the website repo. Loaded first by every stylesheet (auth-styles.css, dispatch-styles.css). Change tokens HERE to re-theme all surfaces at once. Rebranding for a new company = edit the values in :root and [data-theme="dark"] below. ========================================================= */ /* ── Light — day luxury (DEFAULT) ── */ :root { /* Surfaces */ --surface-page: #F5F1E8; /* ivory — Four Seasons stationery */ --surface-card: #FFFFFF; --surface-elevated: #FDFAF2; --surface-overlay: rgba(245,241,232,0.92); /* Text */ --text-primary: #070C18; /* deep navy-black */ --text-secondary: rgba(7,12,24,0.66); --text-muted: rgba(7,12,24,0.44); --text-on-gold: #070C18; --text-on-dark: #F5F1E8; --text-on-light: #070C18; /* Borders */ --border-default: rgba(7,12,24,0.14); --border-subtle: rgba(7,12,24,0.06); --border-strong: rgba(7,12,24,0.22); --border-focus: #B89560; /* deeper gold for contrast on ivory */ /* Accent — champagne gold (≤3% of any view) */ --accent-gold: #B89560; --accent-gold-deep: #9E7F4A; --accent-gold-glow: rgba(184,149,96,0.18); /* Actions (light: primary is navy-solid) */ --action-primary-bg: #070C18; --action-primary-text: #F5F1E8; --action-primary-press: #111828; --action-secondary-bg: transparent; --action-secondary-text: #070C18; --action-secondary-border: rgba(7,12,24,0.22); --action-destructive-bg: #A25149; --action-destructive-text: #F5F1E8; /* Status (muted, hospitality-tuned) */ --status-success: #5E8E60; --status-warning: #B8894A; --status-error: #A25149; --status-info: #5E7E9A; /* Radius (Rolex-precise) */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 16px; --r-full: 9999px; /* Typography */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Shadows (navy-alpha, paper-soft — NEVER gold-tinted) */ --shadow-sm: 0 1px 2px rgba(7,12,24,0.04); --shadow-md: 0 4px 12px rgba(7,12,24,0.08); --shadow-lg: 0 16px 40px rgba(7,12,24,0.12); /* Spacing (4px grid) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* Motion */ --dur-fast: 120ms; --dur-normal: 240ms; --dur-slow: 400ms; --ease-std: cubic-bezier(0.2, 0, 0.2, 1); --ease-dec: cubic-bezier(0, 0, 0.2, 1); /* Tier colors (for VIP badges) */ --tier-silver: #A8A8A8; --tier-gold: #D4B878; --tier-platinum: #B4A9F0; --tier-elite: #5DCAA5; } /* ── Dark — evening luxury (alt theme) Used on hero-always-dark contexts (auth pages, any page that wants the cinematic Rolex/Aston look) or when the user flips dispatch theme toggle. Apply via `` or ``. ── */ [data-theme="dark"], body.dark, .theme-dark { --surface-page: #0D1528; --surface-card: #121B30; --surface-elevated: #182239; --surface-overlay: rgba(13,21,40,0.92); --text-primary: #F5F1E8; --text-secondary: rgba(245,241,232,0.64); --text-muted: rgba(245,241,232,0.40); --text-on-gold: #070C18; --text-on-dark: #F5F1E8; --text-on-light: #070C18; --border-default: rgba(245,241,232,0.10); --border-subtle: rgba(245,241,232,0.06); --border-strong: rgba(245,241,232,0.20); --border-focus: #D4B878; --accent-gold: #D4B878; --accent-gold-deep: #B89560; --accent-gold-glow: rgba(212,184,120,0.18); --action-primary-bg: #F5F1E8; /* ivory solid on navy */ --action-primary-text: #070C18; --action-primary-press: #E5DFCE; --action-secondary-bg: transparent; --action-secondary-text: #F5F1E8; --action-secondary-border: rgba(245,241,232,0.20); --action-destructive-bg: #A25149; --action-destructive-text: #F5F1E8; --status-success: #7BAE7F; --status-warning: #D4A76A; --status-error: #C46B5F; --status-info: #8AA7C7; --shadow-sm: 0 1px 2px rgba(0,0,0,0.25); --shadow-md: 0 4px 12px rgba(0,0,0,0.40); --shadow-lg: 0 16px 40px rgba(0,0,0,0.55); }