/* ========================================================= MEGA RIDE DS v1 "Onyx · Gold · Crimson" — DESIGN TOKENS Mega Ride (by Mega Tickets USA). Near-black onyx + brushed gold + a crimson signature accent (the red bar in the M mark). Light mode: ivory page + onyx ink. Dark mode: onyx + gold-fill. 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 — Personnalité royal navy ink */ --text-primary: #0B0D17; --text-secondary: rgba(11,13,23,0.72); --text-muted: rgba(11,13,23,0.50); --text-on-gold: #05060C; --text-on-dark: #F5F1E8; --text-on-light: #05060C; /* Borders */ --border-default: rgba(11,13,23,0.16); --border-subtle: rgba(11,13,23,0.08); --border-strong: rgba(11,13,23,0.26); --border-focus: #D4A94E; /* Personnalité gold focus */ /* Accent — Mega Ride gold (≤3% of any view on light) */ --accent-gold: #D4A94E; --accent-gold-deep: #A8822F; --accent-gold-light: #E8C66A; --accent-gold-glow: rgba(212,169,78,0.20); /* Accent — Mega Ride crimson (signature; live / urgent / brand) */ --accent-crimson: #C8102E; --accent-crimson-deep: #9E0C24; --accent-crimson-glow: rgba(200,16,46,0.18); /* Accent — onyx (key names kept as navy* for back-compat) */ --navy-default: #0B0D17; --navy-deep: #05060C; --navy-light: #262A3A; --navy-glow: rgba(11,13,23,0.18); /* Actions (light: primary is royal navy fill) */ --action-primary-bg: #0B0D17; --action-primary-text: #F5F1E8; --action-primary-press: #05060C; --action-secondary-bg: transparent; --action-secondary-text: #0B0D17; --action-secondary-border: rgba(11,13,23,0.26); --action-destructive-bg: #A25149; --action-destructive-text: #F5F1E8; /* Status (muted, hospitality-tuned — kept from V3) */ --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 neon/glow) */ --shadow-sm: 0 1px 2px rgba(11,13,23,0.04); --shadow-md: 0 4px 16px rgba(11,13,23,0.08); --shadow-lg: 0 16px 60px rgba(11,13,23,0.12); --shadow-gold: 0 8px 20px rgba(212,169,78,0.18); /* 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: #D4A94E; --tier-platinum: #B4A9F0; --tier-elite: #5DCAA5; } /* ── Dark — Personnalité signature (royal navy gradient + gold-fill primary) Used on hero-always-dark contexts (auth pages, any page that wants the cinematic Personnalité look) or when the user flips dispatch theme toggle. Apply via `` or ``. ── */ [data-theme="dark"], body.dark, .theme-dark { /* Mid-deep navy — Personnalité royal #0B0D17 kept as ACCENT only. Page surfaces desaturated so the bright royal blue doesn't dominate. */ --surface-page: #0B0D17; /* mid-deep navy — controlled */ --surface-card: #10121C; /* slightly lifted, navy + charcoal */ --surface-elevated: #161824; /* modals / hover */ --surface-overlay: rgba(7,8,15,0.92); --surface-gradient-end: #040509; /* almost-black navy — drama terminus */ --text-primary: #F5F1E8; --text-secondary: rgba(245,241,232,0.70); --text-muted: rgba(245,241,232,0.45); --text-on-gold: #05060C; --text-on-dark: #F5F1E8; --text-on-light: #05060C; --border-default: rgba(245,241,232,0.12); --border-subtle: rgba(245,241,232,0.06); --border-strong: rgba(245,241,232,0.22); --border-focus: #D4A94E; --accent-gold: #D4A94E; --accent-gold-deep: #A8822F; --accent-gold-light: #E8C66A; --accent-gold-glow: rgba(212,169,78,0.22); --accent-crimson: #E0223E; --accent-crimson-deep: #C8102E; --accent-crimson-glow: rgba(224,34,62,0.28); --navy-default: #0B0D17; --navy-deep: #05060C; --navy-light: #262A3A; --navy-glow: rgba(11,13,23,0.40); /* Actions (dark: primary is GOLD-fill — Personnalité signature) */ --action-primary-bg: #D4A94E; --action-primary-text: #05060C; --action-primary-press: #A8822F; --action-secondary-bg: transparent; --action-secondary-text: #F5F1E8; --action-secondary-border: rgba(245,241,232,0.22); --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 16px rgba(0,0,0,0.40); --shadow-lg: 0 16px 60px rgba(0,0,0,0.55); --shadow-gold: 0 8px 20px rgba(212,169,78,0.22); }