/* ============================================================ ds-bridge.css · Wepic Design System → existing codebase ------------------------------------------------------------ Load order in every page : 1. ds/tokens.css 2. ds/colors_and_type.css 3. ds/components.css 4. ds/ds-bridge.css ← THIS FILE 5. your existing page CSS (event-manager.css, landing.css, …) This file re-points the variable names your code already uses (--lp-*, and optionally the gallery --green/--lavender/…) at the design-system role tokens. The DS values were lifted from your CSS, so this is visually ~identical — but now every color, radius, shadow and font has ONE source of truth in tokens.css. RTL is already the default in colors_and_type.css. No change needed to your dir="rtl". ============================================================ */ /* ------------------------------------------------------------ 1 · APP BRAND (landing.css + event-manager.css use --lp-*) Active by default — safe to keep on every page. ------------------------------------------------------------ */ :root { /* palette */ --lp-ink: var(--color-text-strong); /* #1c1330 */ --lp-plum: var(--color-heading); /* #3a2363 */ --lp-plum-deep: var(--color-surface-inverse); /* #221145 */ --lp-violet: var(--color-accent); /* #7c5cff */ --lp-violet-soft: var(--color-accent-violet-soft); /* #a892ff */ --lp-gold: var(--color-gold); /* #f4b740 */ --lp-gold-deep: var(--color-gold-hover); /* #d99a1f */ --lp-paper: var(--color-surface-2); /* #ffffff */ --lp-cream: var(--color-surface-1); /* #f7f4ff */ --lp-mute: var(--color-text-muted); /* #6c6585 */ --lp-line: var(--color-border); /* #e7e2f3 */ /* status (event-manager.css success/danger pills) */ --lp-success-bg: var(--color-success-bg); --lp-success-text: var(--color-success-fg); --lp-danger-bg: var(--color-danger-bg); --lp-danger-text: var(--color-danger-fg); /* shape + elevation */ --lp-radius: var(--radius-lg); /* 20px */ --lp-shadow: var(--shadow-3); --lp-shadow-strong: var(--shadow-4); /* type */ --lp-font: var(--font-text); /* Heebo */ --lp-display: var(--font-display); /* Secular One */ } /* ------------------------------------------------------------ 2 · GUEST GALLERY (site.css / my-photos.css / event-shared.css and the admin theme editor read the legacy --green/--lavender/… names) ACTIVE — this is the permanent compatibility layer. themes.css has been retired; every theme's palette now lives ONCE in tokens.css ([data-theme] blocks) and is exposed under the legacy names here. The admin editor probe (admin-theme.js readThemePaletteFromCss) reads ALL of these via getComputedStyle, so the full set must map. ------------------------------------------------------------ */ :root, [data-theme] { --green: var(--color-accent); --green-light: var(--color-leaf); --green-dark: var(--color-accent-hover); --lavender: var(--color-blush); --lavender-light: var(--color-accent-soft); --lavender-dark: var(--color-accent-strong); --cream: var(--color-surface-1); --parchment: var(--color-surface-3); --blush: var(--color-blush-soft); --text-dark: var(--color-text-strong); --text-medium: var(--color-text); --text-light: var(--color-text-muted); --border-soft: var(--color-border-soft); --white-glass: var(--color-surface-glass); --bg-gradient-1: var(--color-bg-gradient-1); --bg-gradient-2: var(--color-bg-gradient-2); --bg-gradient-3: var(--color-bg-gradient-3); --gold: var(--color-gold); --font-body: var(--font-text); --font-title: var(--font-display); /* --font-heading needs no bridge: the gallery's legacy name and the role token share the same name (--font-heading), set directly per [data-theme] in tokens.css. Mapping it here would be self-referential and invalid. */ }