/* =========================================================================== tokens.css — Casino Design System: design tokens --------------------------------------------------------------------------- Single source of truth for color, type, spacing, radius, shadow, and motion. Component CSS MUST reference these vars — no raw hex allowed in components. All tokens are scoped to :root so they cascade everywhere, but the casino visual system only activates once .casino-theme is applied to . =========================================================================== */ :root { /* ---- Backgrounds ----------------------------------------------------- */ /* 2026-05-23 v3: premium repaint. Flat near-black → layered navy ink with cool indigo undertone. Brings depth + matches the blue accent. */ --bg-base: #07091a; /* page background — deep navy-black */ --bg-surface: #0f1330; /* card surface, panels (cool slate) */ --bg-elevated: #181d44; /* modals, popovers, hover states */ --bg-glass: rgba(15, 19, 48, 0.72); /* glass cards (backdrop-blur) */ --bg-overlay: rgba(7, 9, 26, 0.85); /* sticky header backdrop */ /* ---- Borders --------------------------------------------------------- */ --border-subtle: #232a55; --border-strong: #353f7a; --border-glow: rgba(99, 124, 255, 0.35); /* ---- Text ------------------------------------------------------------ */ --text-primary: #f1f4ff; --text-secondary: #aab2d8; --text-muted: #6b73a3; /* ---- Accents --------------------------------------------------------- */ /* 2026-05-23 v3: premium palette. Single blue → gradient brand range (royal blue → indigo → violet). Var names kept to avoid sweeping every component file. */ --accent-primary: #4f7dff; /* royal blue — primary */ --accent-primary-2: #7c5bff; /* indigo — gradient mid */ --accent-primary-3: #b154ff; /* violet — gradient end */ --accent-primary-glow: rgba(99, 124, 255, 0.45); --accent-secondary: #22d3ee; /* cyan — info / online */ --accent-violet: #a855f7; /* premium highlights */ --accent-gold: #f5b942; /* VIP, jackpot (kept gold but warmer) */ /* Gradient utilities (use via background: var(--gradient-brand);) */ --gradient-brand: linear-gradient(135deg, #4f7dff 0%, #7c5bff 55%, #b154ff 100%); --gradient-brand-soft: linear-gradient(135deg, rgba(79,125,255,0.18) 0%, rgba(177,84,255,0.18) 100%); --gradient-cover: linear-gradient(135deg, #1d2570 0%, #3e2a8a 50%, #5e2980 100%); /* ---- States ---------------------------------------------------------- */ --state-win: #22d3ee; --state-loss: #ff5577; --state-pending: #f5b942; /* ---- Typography ------------------------------------------------------ */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Courier New", monospace; /* Type scale — 8 steps from --fs-xs to --fs-5xl */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --fs-5xl: 64px; /* ---- Spacing scale — 4px base, 12 steps ----------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* ---- Radii ----------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ---- Shadows --------------------------------------------------------- */ /* 2026-05-23 v3: deeper, color-tinted shadows for premium depth. */ --shadow-card: 0 10px 40px -12px rgba(40, 60, 200, 0.35), 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-card-hover: 0 18px 60px -14px rgba(99, 124, 255, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.06) inset; --shadow-glow-green: 0 0 0 1px var(--accent-primary), 0 6px 24px var(--accent-primary-glow); --shadow-glow-brand: 0 0 0 1px rgba(99, 124, 255, 0.5), 0 8px 28px rgba(99, 124, 255, 0.45); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.5); /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.6, 0.04, 0.98, 0.34); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 400ms; /* ---- Brand (SheaTeam social feed integration, 2026-05-23) ---------- */ /* 2026-05-23 v3: premium ink + royal-blue accent. Var name --brand-gold is now the brand royal blue; legacy name kept so feed.css doesn't need a class sweep. --brand-bg matches the page surface for seamless transitions. The dashboard's --accent-gold above is the warm gold used only for VIP/jackpot strips and is unaffected. */ --brand-bg: #07091a; --brand-gold: #4f7dff; --brand-gold-hover: #6b8aff; } /* =========================================================================== 2026-05-23 v4: LIGHT THEME, site-wide. --------------------------------------------------------------------------- Loaded by base.html on every page (including dashboard, games, wallet, payment, support) — not just the social pages. Re-defines every token at the body level so existing components (which read tokens, not raw hex) automatically flip to a Facebook-style white surface without any per- component rewrites. =========================================================================== */ body.casino-theme { --bg-base: #f0f2f5; --bg-surface: #ffffff; --bg-elevated: #f7f8fa; --bg-glass: rgba(255, 255, 255, 0.82); --bg-overlay: rgba(255, 255, 255, 0.85); --border-subtle: #dadde1; --border-strong: #bcc0c4; --border-glow: rgba(79, 125, 255, 0.35); --text-primary: #050505; --text-secondary: #4b5563; --text-muted: #6b7280; --brand-bg: #ffffff; /* Re-tuned semantic colors so dashboard widgets (live wins, jackpot strip, payment status) keep enough contrast on the light surface. Cyan/lime green don't read on white; switch to true emerald + amber + rose with WCAG-AA-friendly ratios. */ --state-win: #16a34a; --state-loss: #dc2626; --state-pending: #d97706; --accent-secondary: #0891b2; /* Light shadows: softer + neutral. */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.6) inset; --shadow-card-hover: 0 8px 24px -6px rgba(99, 124, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.10); background: radial-gradient(900px 600px at 12% -10%, rgba(79, 125, 255, 0.10), transparent 60%), radial-gradient(800px 500px at 95% 10%, rgba(177, 84, 255, 0.07), transparent 65%), #f0f2f5 !important; color: var(--text-primary); } /* Casino header / brand / user-pill — flip to light on every route. */ body.casino-theme .casino-header { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid var(--border-subtle) !important; color: var(--text-primary); } body.casino-theme .casino-brand-text { color: var(--text-primary); } body.casino-theme .user-pill, body.casino-theme .user-pill-name { color: var(--text-primary); } body.casino-theme .user-menu { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; box-shadow: var(--shadow-modal) !important; } body.casino-theme .user-menu a { color: var(--text-primary) !important; } body.casino-theme .user-menu a:hover { background: #f0f2f5 !important; color: var(--accent-primary) !important; } body.casino-theme .casino-bottom-nav { background: var(--bg-surface) !important; border-top: 1px solid var(--border-subtle) !important; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.05) !important; } body.casino-theme .casino-tab { color: var(--text-secondary) !important; } body.casino-theme .casino-tab:hover { color: var(--accent-primary) !important; } /* Footer hidden by default — only the rewards page opts in via {% block bodyclass %}show-footer{% endblock %}. */ body.casino-theme .casino-footer { background: var(--bg-surface) !important; border-top: 1px solid var(--border-subtle) !important; color: var(--text-secondary) !important; display: none; } body.casino-theme.show-footer .casino-footer { display: block; } body.casino-theme .casino-footer-title { color: var(--text-primary) !important; } body.casino-theme .casino-footer-links a { color: var(--text-secondary) !important; } body.casino-theme .casino-footer-links a:hover { color: var(--accent-primary) !important; } body.casino-theme, body.casino-theme .casino-main { color: var(--text-primary); } /* ── Force readable contrast on common dashboard chrome classes ──────── */ body.casino-theme .balance-pill { background: var(--bg-surface) !important; border: 1px solid var(--border-strong) !important; color: var(--text-primary) !important; } body.casino-theme .balance-pill-amt { color: var(--text-primary) !important; } body.casino-theme .balance-pill-ccy { color: var(--text-secondary) !important; } body.casino-theme .balance-pill-icon { color: var(--accent-primary) !important; } body.casino-theme .cta-deposit { background: var(--accent-primary) !important; color: #ffffff !important; border: none !important; box-shadow: 0 4px 12px -4px rgba(79, 125, 255, 0.5); } body.casino-theme .text-win, body.casino-theme .casino-livewin-amt { color: var(--state-win) !important; } body.casino-theme .text-loss { color: var(--state-loss) !important; } body.casino-theme .text-pending { color: var(--state-pending) !important; } body.casino-theme .text-muted-c { color: var(--text-secondary) !important; } body.casino-theme .casino-hero-eyebrow { color: var(--accent-primary) !important; } /* Casino tabs in bottom-nav: active state visible. */ body.casino-theme .casino-tab.is-active, body.casino-theme .casino-tab[aria-current="page"] { color: var(--accent-primary) !important; } body.casino-theme .casino-tab span { color: inherit; } /* Live wins ticker row + jackpot strip — ensure backgrounds readable. */ body.casino-theme .casino-livewin, body.casino-theme .casino-livewin-row { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; } /* Composer + comment placeholder text needs darker color on white. */ body.casino-theme textarea::placeholder, body.casino-theme input::placeholder { color: var(--text-muted) !important; } /* Hide the floating chat widget root on social-mode pages (its inner .shea-chat-bubble may be a child; hide the root container too). */ body.social-mode .shea-chat-root, body.social-mode #sheaChatRoot { display: none !important; } /* Cover-photo placeholder: gradient bg is still dark, force white text. */ body.casino-theme .fb-cover-empty { color: #ffffff !important; } /* Dashboard rewards strip cards: legacy translucent bg may look washed out on light. Add subtle border for definition. */ body.casino-theme [class*="casino-rewards-card"], body.casino-theme [class*="casino-bonus-strip"], body.casino-theme [class*="casino-card"] { background: var(--bg-surface) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important; } /* ─── Inline-style hex overrides (shea_home.html rewards strip) ────── The legacy dashboard template hardcodes dark-theme hex values in `style="color: #xxx"` attributes. We can't change inline styles from CSS, but we CAN match them with attribute-substring selectors and override with !important. Scoped to body.casino-theme so casino- theme-off pages remain untouched. ----------------------------------------------------------------- */ body.casino-theme [style*="color:#ccc"], body.casino-theme [style*="color: #ccc"] { color: var(--text-secondary) !important; } body.casino-theme [style*="color:#aaa"], body.casino-theme [style*="color: #aaa"] { color: var(--text-muted) !important; } body.casino-theme [style*="color:#fff"], body.casino-theme [style*="color: #fff"] { /* keep white only on dark surfaces */ } body.casino-theme [style*="color:#ffd700"], body.casino-theme [style*="color: #ffd700"]{ color: #b45309 !important; } /* gold → amber dark */ body.casino-theme [style*="color:#FFB800"], body.casino-theme [style*="color: #FFB800"]{ color: #b45309 !important; } body.casino-theme [style*="color:#FFC107"], body.casino-theme [style*="color: #FFC107"]{ color: #b45309 !important; } body.casino-theme [style*="color:#2ecc71"], body.casino-theme [style*="color: #2ecc71"]{ color: #15803d !important; } /* green dark */ body.casino-theme [style*="color:#01FF81"], body.casino-theme [style*="color: #01FF81"]{ color: #15803d !important; } body.casino-theme [style*="color:#00C2FF"], body.casino-theme [style*="color: #00C2FF"]{ color: var(--accent-secondary) !important; } body.casino-theme [style*="color:#FF3D5A"], body.casino-theme [style*="color: #FF3D5A"]{ color: var(--state-loss) !important; } body.casino-theme [style*="color:#aaa"] { color: var(--text-muted) !important; } body.casino-theme [style*="color:#bbb"], body.casino-theme [style*="color: #bbb"] { color: var(--text-secondary) !important; } body.casino-theme [style*="color:#888"], body.casino-theme [style*="color: #888"] { color: var(--text-secondary) !important; } body.casino-theme [style*="color:#777"], body.casino-theme [style*="color: #777"] { color: var(--text-muted) !important; } body.casino-theme [style*="color:#666"], body.casino-theme [style*="color: #666"] { color: var(--text-secondary) !important; } body.casino-theme [style*="color:#ddd"], body.casino-theme [style*="color: #ddd"] { color: var(--text-primary) !important; } body.casino-theme [style*="color:#eee"], body.casino-theme [style*="color: #eee"] { color: var(--text-primary) !important; } body.casino-theme [style*="color:#f39c12"], body.casino-theme [style*="color: #f39c12"]{ color: #b45309 !important; } body.casino-theme [style*="color:#e74c3c"], body.casino-theme [style*="color: #e74c3c"]{ color: var(--state-loss) !important; } body.casino-theme [style*="color:#87f7c8"], body.casino-theme [style*="color: #87f7c8"]{ color: var(--accent-secondary) !important; } /* ─── Wallet page (wallet_home.html inline