/* ===================================================== EncuentraIglesias APP — Shared design tokens Warm palette adapted for mobile/app context ===================================================== */ :root { /* Brand navy (kept from web) */ --app-navy-1: #0d2846; --app-navy-2: #123c68; --app-navy-3: #1f4c84; /* Fixed brand navy for SURFACES — backgrounds, primary buttons, hero cards, active chips, and text-on-gold that must stay dark in BOTH themes. Unlike --app-navy-* (which INVERT to cream in dark mode for use as body text), these never invert. Using --app-navy-* as a background is what made buttons/heroes vanish in dark mode. */ --ink-navy-1: #0d2846; --ink-navy-2: #123c68; --ink-navy-3: #1f4c84; /* Gold (kept, plus brighter for warm bg) */ --app-gold: #d9a028; --app-gold-bright: #e8b545; --app-gold-deep: #b87f1c; /* Warm cream background (Theo-inspired) */ --app-cream-1: #faf3e3; --app-cream-2: #f5ebd4; --app-cream-3: #ede0bc; /* Card surfaces */ --app-card: #ffffff; --app-card-soft: #fffdf7; --app-border: #e8dfc8; --app-border-soft: #f0e6d0; /* Text on cream */ --app-text: #1f2d3d; --app-text-strong: #0d2846; --app-muted: #6f6450; /* bumped from #8a7e64 (~3.5:1, sub-AA) → ~5.2:1 on cream/white */ /* Type-tinted tiles */ --tile-orac-bg: #fce2c6; --tile-orac-fg: #8a4a18; --tile-hist-bg: #e3dcf5; --tile-hist-fg: #4a3a8c; --tile-medit-bg: #d4ecdf; --tile-medit-fg: #2a6e4a; --tile-afirm-bg: #dbe9f5; --tile-afirm-fg: #1f4c84; --tile-bible-bg: #fce8e1; --tile-bible-fg: #a83a2a; --app-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Smooth color transitions when dark mode toggles */ --app-theme-transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ===================================================== DARK MODE — applied via [data-theme="dark"] on . Auto-resolved by app.js based on user pref → localStorage → OS prefers-color-scheme. Toggle in Cuenta → Settings. ===================================================== */ :root[data-theme="dark"] { /* Navy becomes the surface; cream flips to ink. */ --app-navy-1: #f0e6d0; --app-navy-2: #faf3e3; --app-navy-3: #ffffff; /* Gold stays gold — accent reads on dark even better */ --app-gold: #e8b545; --app-gold-bright: #f5c659; --app-gold-deep: #d9a028; /* Background gradient ramp goes deep navy */ --app-cream-1: #0d1f33; --app-cream-2: #0a1828; --app-cream-3: #061322; /* Card surface inverted */ --app-card: #16263b; --app-card-soft: #1b2c44; --app-border: #28384f; --app-border-soft: #1f2f47; /* Text on dark */ --app-text: #e8eaee; --app-text-strong: #ffffff; --app-muted: #92a4ba; /* Type-tinted tiles — deeper but still distinct */ --tile-orac-bg: #3a2415; --tile-orac-fg: #fce2c6; --tile-hist-bg: #221c3a; --tile-hist-fg: #e3dcf5; --tile-medit-bg: #14302a; --tile-medit-fg: #d4ecdf; --tile-afirm-bg: #14283f; --tile-afirm-fg: #dbe9f5; --tile-bible-bg: #3a1812; --tile-bible-fg: #fce8e1; } /* Smooth transition between themes — applied broadly, no perf cost */ html, body, .card, .ei-tile, .app-tabs, .app-header, .ei-verse, .premium-banner, .audio-player-sheet, input, select, textarea, button { transition: var(--app-theme-transition); }