/* ═══════════════════════════════════════════════════════════ css/app-theme.css — v2.3.0 Capital da Boa Mesa — Premium theme override layer ───────────────────────────────────────────────────────── LOAD ORDER (critical): 1. main.css ← legacy tokens (--bg, --text, ...) 2. theme-tokens.css ← v2.2.0 palette + font tokens 3. desktop*.css / premium.css / ai-chat.css 4. app-theme.css ← THIS FILE, loaded LAST so its :root[data-bm-theme=*] rules win over everything that precedes it. ROLLBACK SAFETY ───────────────────────────────────────────────────────── Every rule in this file is gated on a [data-bm-theme] or [data-bm-ai-theme] attribute on . If the runtime loader (js/app-theme-loader.js) doesn't run — because the script is removed, the API is down, or migration 15 hasn't been applied — these attributes are absent and NONE of the rules below match. The app then renders exactly as it did in v2.2.0, with main.css + theme-tokens.css in charge. The :root selector at the top defines defaults for the new --bm-* variables only. These don't conflict with anything in main.css (which uses --bg, --text, etc.). New components can read --bm-* directly; legacy components keep using --bg, --text, etc. — which we remap when a theme is active. ───────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════ 1. DEFAULTS — new CSS variables (no theme-active gate) ───────────────────────────────────────────────────────── These are the hardcoded safe defaults. If the database is unreachable AND localStorage is empty, the page still paints with these values. They match the "Boa Mesa Signature Dark" preset. ───────────────────────────────────────────────────────── */ :root { --bm-bg-primary: #0F1115; --bm-surface-secondary: #181B20; --bm-card-surface: #22262D; --bm-border: #2F343D; --bm-accent: #D4A85A; --bm-accent-hover: #E5BC73; --bm-secondary-accent: transparent; /* set by Urban Slate only */ --bm-text-primary: #F5F5F5; --bm-text-secondary: #B8BDC7; --bm-text-muted: #8A9099; --bm-header-bg: var(--bm-bg-primary); --bm-footer-bg: var(--bm-bg-primary); --bm-ai-bg: #0B0D10; --bm-ai-surface: #171A1F; --bm-ai-card: #1F242B; --bm-ai-accent: #D6A756; --bm-ai-glow: rgba(214,167,86,0.15); --bm-ai-text-primary: #F7F7F7; --bm-ai-text-secondary: #B0B6C0; /* Derived tokens used by gradient/glass effects. Computed once here so toggles flip without touching every rule. */ --bm-gradient: linear-gradient(180deg, var(--bm-bg-primary) 0%, var(--bm-surface-secondary) 100%); --bm-glass-bg: rgba(34, 38, 45, 0.55); /* card_surface @ 55% */ --bm-glass-blur: blur(14px) saturate(140%); } /* ═══════════════════════════════════════════════════════════ 2. PRESETS — keyed by html[data-bm-theme=""] ───────────────────────────────────────────────────────── The runtime loader sets data-bm-theme on based on the saved theme. Admin can also pick "custom" and set individual color overrides via inline CSS variables on — that path bypasses the preset blocks below. ───────────────────────────────────────────────────────── */ /* Preset 1 — Boa Mesa Signature Dark (default) */ html[data-bm-theme="boa-mesa-signature-dark"] { --bm-bg-primary: #0F1115; --bm-surface-secondary: #181B20; --bm-card-surface: #22262D; --bm-border: #2F343D; --bm-accent: #D4A85A; --bm-accent-hover: #E5BC73; --bm-text-primary: #F5F5F5; --bm-text-secondary: #B8BDC7; --bm-text-muted: #8A9099; } /* Preset 2 — Warm Espresso */ html[data-bm-theme="warm-espresso"] { --bm-bg-primary: #161311; --bm-surface-secondary: #211C19; --bm-card-surface: #2A2420; --bm-border: #3A302A; --bm-accent: #C9864A; --bm-accent-hover: #D99A60; --bm-text-primary: #FAF6F1; --bm-text-secondary: #C9BEB2; --bm-text-muted: #9B8D82; } /* Preset 3 — Urban Slate (the only preset with a secondary accent) */ html[data-bm-theme="urban-slate"] { --bm-bg-primary: #121417; --bm-surface-secondary: #1A1E24; --bm-card-surface: #242A33; --bm-border: #343B46; --bm-accent: #D9B15F; --bm-accent-hover: #E8C675; --bm-secondary-accent: #5EA3D6; --bm-text-primary: #F2F4F7; --bm-text-secondary: #A7B0BB; --bm-text-muted: #7F8995; } /* Preset 4 — Luxury Ivory (light) */ html[data-bm-theme="luxury-ivory"] { --bm-bg-primary: #F6F1E8; --bm-surface-secondary: #FFFFFF; --bm-card-surface: #FFFDF9; --bm-border: #E8DFD1; --bm-accent: #C89B4B; --bm-accent-hover: #D7AE63; --bm-text-primary: #1E1E1E; --bm-text-secondary: #555555; --bm-text-muted: #777777; /* Light theme needs a lighter glass tint */ --bm-glass-bg: rgba(255, 253, 249, 0.65); } /* Preset 5 — Noir Gold Elite (premium dark, also used for AI) */ html[data-bm-theme="noir-gold-elite"] { --bm-bg-primary: #0B0D10; --bm-surface-secondary: #171A1F; --bm-card-surface: #1F242B; --bm-border: #2A2F37; --bm-accent: #D6A756; --bm-accent-hover: #E5BC73; --bm-text-primary: #F7F7F7; --bm-text-secondary: #B0B6C0; --bm-text-muted: #828A95; } /* ═══════════════════════════════════════════════════════════ 3. LEGACY MAPPING — when a theme is ACTIVE, also override the v1.x / v2.2.0 variables so existing components inherit the new colors without code changes. ───────────────────────────────────────────────────────── This is the "do not break" guarantee: every existing component that reads --bg / --surface / --text / --border automatically picks up the new theme. If no theme is active, this block does nothing and those vars retain their main.css values. ───────────────────────────────────────────────────────── */ html[data-bm-theme] { /* Backgrounds */ --bg: var(--bm-bg-primary); --bg-2: var(--bm-surface-secondary); --surface: var(--bm-surface-secondary); --surface-2: var(--bm-card-surface); --surface-3: var(--bm-card-surface); /* Text */ --text: var(--bm-text-primary); --text-sub: var(--bm-text-secondary); --text-muted: var(--bm-text-muted); /* Borders */ --border: var(--bm-border); --border-subtle: var(--bm-border); /* Accent — does NOT touch --primary (brand green) to preserve restaurant cuisine tags, ratings etc. Only the gold accent is themed. */ --accent: var(--bm-accent); --accent-light: var(--bm-accent-hover); } /* Same on body — main.css reads `background: var(--bg)` on body, but some legacy rules query the body element directly. Belt-and-suspenders. */ html[data-bm-theme] body { background: var(--bm-bg-primary); color: var(--bm-text-primary); } /* ═══════════════════════════════════════════════════════════ 4. COMPONENT TOUCH-UPS — the "premium" pass on areas identified in the spec (cards, headers, nav, buttons). Gated on [data-bm-theme] so they're inert without a theme. ───────────────────────────────────────────────────────── These rules are conservative on purpose. They reuse the variable names already in the project so we don't have to refactor component selectors. */ /* App shell + topbar inherit primary bg */ html[data-bm-theme] #app, html[data-bm-theme] .topbar { background: var(--bm-bg-primary); color: var(--bm-text-primary); border-color: var(--bm-border); } /* Restaurant cards / event cards / generic surface cards */ html[data-bm-theme] .card, html[data-bm-theme] .restaurant-card, html[data-bm-theme] .event-card, html[data-bm-theme] .collection-card, html[data-bm-theme] .stat-card, html[data-bm-theme] .form-card, html[data-bm-theme] .admin-table { background: var(--bm-card-surface); border-color: var(--bm-border); color: var(--bm-text-primary); } /* Buttons — only the gold/accent variant. We don't theme the primary green button because that's brand. */ html[data-bm-theme] .btn-gold, html[data-bm-theme] .btn-accent { background: var(--bm-accent); color: #1a1714; } html[data-bm-theme] .btn-gold:hover, html[data-bm-theme] .btn-accent:hover { background: var(--bm-accent-hover); } /* Bottom nav (mobile) and desktop sidebar surface */ html[data-bm-theme] #bottom-nav, html[data-bm-theme] .bottom-nav, html[data-bm-theme] .dp-header { background: var(--bm-header-bg); border-color: var(--bm-border); } /* Inputs / form fields */ html[data-bm-theme] .form-input, html[data-bm-theme] .form-textarea, html[data-bm-theme] .form-select, html[data-bm-theme] input[type="text"], html[data-bm-theme] input[type="email"], html[data-bm-theme] input[type="number"], html[data-bm-theme] textarea, html[data-bm-theme] select { background: var(--bm-surface-secondary); color: var(--bm-text-primary); border-color: var(--bm-border); } /* Secondary accent (Urban Slate) — link/secondary CTA color. Only renders when the variable is set; otherwise inherits. */ html[data-bm-theme] .link-secondary, html[data-bm-theme] a.text-secondary-accent { color: var(--bm-secondary-accent, var(--bm-accent)); } /* ═══════════════════════════════════════════════════════════ 5. EFFECT TOGGLES — gradients & glassmorphism Activated by data-bm-gradient="on" / data-bm-glass="on" ───────────────────────────────────────────────────────── Both are opt-in. Defaults are OFF in the DB. Both are designed to NEVER reduce contrast — gradient stays in the bg-primary → surface-secondary range, glass uses an already-readable surface color at high opacity. ───────────────────────────────────────────────────────── */ /* Subtle vertical gradient on the main app background */ html[data-bm-theme][data-bm-gradient="on"] body, html[data-bm-theme][data-bm-gradient="on"] #app { background: var(--bm-gradient); } /* Glassmorphism — only applied to cards/sheets, never to text containers (would hurt legibility). */ html[data-bm-theme][data-bm-glass="on"] .card, html[data-bm-theme][data-bm-glass="on"] .restaurant-card, html[data-bm-theme][data-bm-glass="on"] .event-card, html[data-bm-theme][data-bm-glass="on"] .modal-content, html[data-bm-theme][data-bm-glass="on"] .sheet { background: var(--bm-glass-bg); -webkit-backdrop-filter: var(--bm-glass-blur); backdrop-filter: var(--bm-glass-blur); border-color: var(--bm-border); } /* Graceful fallback for browsers without backdrop-filter support (~3% of mobile traffic per caniuse). The card stays opaque-ish so text is still readable. */ @supports not (backdrop-filter: blur(1px)) { html[data-bm-theme][data-bm-glass="on"] .card, html[data-bm-theme][data-bm-glass="on"] .restaurant-card, html[data-bm-theme][data-bm-glass="on"] .event-card, html[data-bm-theme][data-bm-glass="on"] .modal-content, html[data-bm-theme][data-bm-glass="on"] .sheet { background: var(--bm-card-surface); } } /* ═══════════════════════════════════════════════════════════ 6. AI CHAT SUB-THEME Active when html[data-bm-ai-theme] is set. ───────────────────────────────────────────────────────── The AI chat module (css/ai/ai-chat.css) already defines #bm-ai-fab and #bm-ai-root with their own --bm-ai-* vars pulled from --bg/--text. When the v2.3.0 AI sub-theme is active, we override those scoped variables directly. If ai_theme_enabled=false in the DB, no html[data-bm-ai-theme] attribute is set, and the AI chat keeps inheriting from the global theme (or v2.2.0 styles if no global theme either). ───────────────────────────────────────────────────────── */ html[data-bm-ai-theme] #bm-ai-fab, html[data-bm-ai-theme] #bm-ai-root { --bm-ai-bg: var(--bm-ai-bg, #0B0D10); --bm-ai-bg-soft: var(--bm-ai-surface, #171A1F); --bm-ai-text: var(--bm-ai-text-primary, #F7F7F7); --bm-ai-text-sub: var(--bm-ai-text-secondary, #B0B6C0); --bm-ai-text-muted: var(--bm-ai-text-secondary, #B0B6C0); --bm-ai-accent: var(--bm-ai-accent, #D6A756); --bm-ai-accent-dark: var(--bm-ai-accent, #D6A756); --bm-ai-primary: var(--bm-ai-accent, #D6A756); --bm-ai-primary-dark: var(--bm-ai-accent, #D6A756); --bm-ai-border: rgba(255, 255, 255, .08); --bm-ai-border-soft: rgba(255, 255, 255, .04); /* Use --bm-ai-glow for the FAB ring / hover halo */ --bm-ai-shadow: 0 0 0 0 var(--bm-ai-glow, rgba(214,167,86,0.15)), 0 18px 48px rgba(0, 0, 0, .55), 0 4px 12px rgba(0, 0, 0, .35); } /* AI chat card surfaces — distinct from generic cards because the AI panel has its own visual identity. */ html[data-bm-ai-theme] #bm-ai-root .bm-ai-card, html[data-bm-ai-theme] #bm-ai-root .bm-ai-message { background: var(--bm-ai-card, #1F242B); } /* ═══════════════════════════════════════════════════════════ 7. ADMIN PREVIEW SANDBOX ───────────────────────────────────────────────────────── The admin "Tema & Branding" preview renders mini-components inside .bm-theme-preview-sandbox. The sandbox reads from inline --bm-* CSS vars so the admin can preview unsaved changes without flipping the live theme. We mirror the component touch-ups above, scoped to .bm-theme-preview-sandbox. ───────────────────────────────────────────────────────── */ .bm-theme-preview-sandbox { background: var(--bm-bg-primary, #0F1115); color: var(--bm-text-primary, #F5F5F5); border: 1px solid var(--bm-border, #2F343D); border-radius: 14px; padding: 18px; font-family: 'Inter', -apple-system, sans-serif; } .bm-theme-preview-sandbox .bm-pv-card { background: var(--bm-card-surface, #22262D); border: 1px solid var(--bm-border, #2F343D); border-radius: 12px; padding: 14px; margin-top: 12px; } .bm-theme-preview-sandbox .bm-pv-card h4 { color: var(--bm-text-primary, #F5F5F5); font-size: 0.95rem; margin: 0 0 4px; } .bm-theme-preview-sandbox .bm-pv-card p { color: var(--bm-text-secondary, #B8BDC7); font-size: 0.82rem; margin: 0; line-height: 1.4; } .bm-theme-preview-sandbox .bm-pv-card .bm-pv-meta { color: var(--bm-text-muted, #8A9099); font-size: 0.72rem; margin-top: 6px; } .bm-theme-preview-sandbox .bm-pv-btn { display: inline-block; padding: 8px 14px; background: var(--bm-accent, #D4A85A); color: #1a1714; border-radius: 8px; font-weight: 600; font-size: 0.82rem; border: none; cursor: pointer; margin-top: 10px; } .bm-theme-preview-sandbox .bm-pv-btn:hover { background: var(--bm-accent-hover, #E5BC73); } .bm-theme-preview-sandbox .bm-pv-header { background: var(--bm-header-bg, var(--bm-bg-primary, #0F1115)); border-bottom: 1px solid var(--bm-border, #2F343D); padding: 10px 14px; border-radius: 12px 12px 0 0; font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: space-between; } .bm-theme-preview-sandbox .bm-pv-header .bm-pv-tag { background: var(--bm-accent, #D4A85A); color: #1a1714; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; } .bm-theme-preview-sandbox .bm-pv-ai { background: var(--bm-ai-card, #1F242B); color: var(--bm-ai-text-primary, #F7F7F7); border: 1px solid var(--bm-border, #2F343D); border-radius: 18px 18px 18px 4px; padding: 10px 14px; margin-top: 10px; font-size: 0.85rem; box-shadow: 0 0 0 3px var(--bm-ai-glow, rgba(214,167,86,0.15)); max-width: 80%; } .bm-theme-preview-sandbox .bm-pv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } @media (max-width: 720px) { .bm-theme-preview-sandbox .bm-pv-row { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════ 8. MOBILE GUARDS ───────────────────────────────────────────────────────── The app shell uses 100dvh and safe-area insets — the theme doesn't change those. We only need to make sure touch targets keep their contrast when light themes are picked (Luxury Ivory). On iOS, blurred surfaces can cost frame budget on older devices; this media query disables glass below a perf-safe device pixel ratio. ───────────────────────────────────────────────────────── */ @media (max-width: 430px) and (max-resolution: 1.5dppx) { html[data-bm-theme][data-bm-glass="on"] .card, html[data-bm-theme][data-bm-glass="on"] .restaurant-card, html[data-bm-theme][data-bm-glass="on"] .event-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bm-card-surface); } } /* Respect users who prefer reduced motion / transparency. This is an accessibility win: glass is decorative, not functional, so always disable it for these users. */ @media (prefers-reduced-transparency: reduce) { html[data-bm-theme][data-bm-glass="on"] .card, html[data-bm-theme][data-bm-glass="on"] .restaurant-card, html[data-bm-theme][data-bm-glass="on"] .event-card, html[data-bm-theme][data-bm-glass="on"] .modal-content, html[data-bm-theme][data-bm-glass="on"] .sheet { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bm-card-surface); } }