/** * 256Bank Theme Definitions * * Theme is applied by adding `theme-dark` or `theme-light` class. * Inside a themed container, all --t-* tokens resolve to the theme's values. * * Usage: *

* // Card uses var(--t-surface-1), --t-text-1, etc. *

* * For app-wide theme: apply to or . * For partial theming: apply to any container element. */ /* ============ DARK THEME (default for app) ============ */ .theme-dark { --t-bg: var(--navy-950); --t-bg-elevated: var(--navy-900); --t-bg-gradient: radial-gradient(ellipse at center 35%, rgba(167,139,250,0.18) 0%, transparent 60%), var(--navy-950); --t-bg-confirm: radial-gradient(ellipse at center, rgba(123, 94, 167, 0.15) 0%, transparent 60%), var(--navy-950); --t-surface-1: rgba(255, 255, 255, 0.04); --t-surface-2: rgba(255, 255, 255, 0.07); --t-border: rgba(255, 255, 255, 0.06); --t-border-strong: rgba(255, 255, 255, 0.12); --t-text-1: rgba(255, 255, 255, 1); --t-text-2: rgba(255, 255, 255, 0.7); --t-text-3: rgba(255, 255, 255, 0.55); --t-text-4: rgba(255, 255, 255, 0.4); --t-button-primary-bg: #FFFFFF; --t-button-primary-text: var(--navy-900); --t-tab-bar: rgba(10, 24, 40, 0.85); --t-tab-active: var(--purple-300); --t-tab-inactive: rgba(255, 255, 255, 0.5); --t-status-bar-text: rgba(255, 255, 255, 0.95); --t-action-icon: var(--purple-300); --t-tx-icon-bg: rgba(167, 139, 250, 0.12); --t-tx-icon-text: var(--purple-300); --t-tx-amount-in: #6FD09A; --t-tx-amount-out: #FFFFFF; --t-mark-glow: rgba(167, 139, 250, 0.5); --t-mark-grid-color: var(--purple-400); --t-mark-grid-opacity: 0.08; --t-mark-lines-gradient: var(--grad-mark-purple-dark); --t-mark-lines-opacity: 0.2; --t-mark-core-fill: var(--grad-mark-purple-dark); --t-mark-sat-fill: var(--grad-mark-purple-dark); --t-success-text: #FFFFFF; --t-success-meta: rgba(255, 255, 255, 0.5); } /* ============ LIGHT THEME (user-selectable) ============ */ .theme-light { --t-bg: #F8F9FC; --t-bg-elevated: #FFFFFF; --t-bg-gradient: radial-gradient(ellipse at center 35%, rgba(167,139,250,0.10) 0%, transparent 60%), #F8F9FC; --t-bg-confirm: radial-gradient(ellipse at center, rgba(123, 94, 167, 0.08) 0%, transparent 60%), #F8F9FC; --t-surface-1: #FFFFFF; --t-surface-2: #F0F2F7; --t-border: #E6E8EF; --t-border-strong: #D0D4DE; --t-text-1: var(--navy-900); --t-text-2: var(--navy-700); --t-text-3: #5A6172; --t-text-4: #8A8E99; --t-button-primary-bg: var(--purple-500); --t-button-primary-text: #FFFFFF; --t-tab-bar: rgba(255, 255, 255, 0.92); --t-tab-active: var(--purple-600); --t-tab-inactive: #8A8E99; --t-status-bar-text: var(--navy-900); --t-action-icon: var(--purple-600); --t-tx-icon-bg: rgba(123, 94, 167, 0.10); --t-tx-icon-text: var(--purple-700); --t-tx-amount-in: var(--success); --t-tx-amount-out: var(--navy-900); --t-mark-glow: rgba(123, 94, 167, 0.35); --t-mark-grid-color: var(--purple-500); --t-mark-grid-opacity: 0.12; --t-mark-lines-gradient: var(--grad-mark-purple-light); --t-mark-lines-opacity: 0.35; --t-mark-core-fill: var(--grad-mark-purple-light); --t-mark-sat-fill: var(--grad-mark-purple-light); --t-success-text: var(--navy-900); --t-success-meta: #5A6172; } /* ============ AUTO (match system) ============ */ @media (prefers-color-scheme: dark) { .theme-auto { --t-bg: var(--navy-950); --t-bg-elevated: var(--navy-900); --t-bg-gradient: radial-gradient(ellipse at center 35%, rgba(167,139,250,0.18) 0%, transparent 60%), var(--navy-950); --t-bg-confirm: radial-gradient(ellipse at center, rgba(123, 94, 167, 0.15) 0%, transparent 60%), var(--navy-950); --t-surface-1: rgba(255, 255, 255, 0.04); --t-surface-2: rgba(255, 255, 255, 0.07); --t-border: rgba(255, 255, 255, 0.06); --t-border-strong: rgba(255, 255, 255, 0.12); --t-text-1: rgba(255, 255, 255, 1); --t-text-2: rgba(255, 255, 255, 0.7); --t-text-3: rgba(255, 255, 255, 0.55); --t-text-4: rgba(255, 255, 255, 0.4); --t-button-primary-bg: #FFFFFF; --t-button-primary-text: var(--navy-900); --t-tab-bar: rgba(10, 24, 40, 0.85); --t-tab-active: var(--purple-300); --t-tab-inactive: rgba(255, 255, 255, 0.5); --t-status-bar-text: rgba(255, 255, 255, 0.95); --t-action-icon: var(--purple-300); --t-tx-icon-bg: rgba(167, 139, 250, 0.12); --t-tx-icon-text: var(--purple-300); --t-tx-amount-in: #6FD09A; --t-tx-amount-out: #FFFFFF; --t-mark-glow: rgba(167, 139, 250, 0.5); --t-mark-grid-color: var(--purple-400); --t-mark-grid-opacity: 0.08; --t-mark-lines-gradient: var(--grad-mark-purple-dark); --t-mark-lines-opacity: 0.2; --t-mark-core-fill: var(--grad-mark-purple-dark); --t-mark-sat-fill: var(--grad-mark-purple-dark); --t-success-text: #FFFFFF; --t-success-meta: rgba(255, 255, 255, 0.5); } } @media (prefers-color-scheme: light) { .theme-auto { --t-bg: #F8F9FC; --t-bg-elevated: #FFFFFF; --t-bg-gradient: radial-gradient(ellipse at center 35%, rgba(167,139,250,0.10) 0%, transparent 60%), #F8F9FC; --t-bg-confirm: radial-gradient(ellipse at center, rgba(123, 94, 167, 0.08) 0%, transparent 60%), #F8F9FC; --t-surface-1: #FFFFFF; --t-surface-2: #F0F2F7; --t-border: #E6E8EF; --t-border-strong: #D0D4DE; --t-text-1: var(--navy-900); --t-text-2: var(--navy-700); --t-text-3: #5A6172; --t-text-4: #8A8E99; --t-button-primary-bg: var(--purple-500); --t-button-primary-text: #FFFFFF; --t-tab-bar: rgba(255, 255, 255, 0.92); --t-tab-active: var(--purple-600); --t-tab-inactive: #8A8E99; --t-status-bar-text: var(--navy-900); --t-action-icon: var(--purple-600); --t-tx-icon-bg: rgba(123, 94, 167, 0.10); --t-tx-icon-text: var(--purple-700); --t-tx-amount-in: var(--success); --t-tx-amount-out: var(--navy-900); --t-mark-glow: rgba(123, 94, 167, 0.35); --t-mark-grid-color: var(--purple-500); --t-mark-grid-opacity: 0.12; --t-mark-lines-gradient: var(--grad-mark-purple-light); --t-mark-lines-opacity: 0.35; --t-mark-core-fill: var(--grad-mark-purple-light); --t-mark-sat-fill: var(--grad-mark-purple-light); --t-success-text: var(--navy-900); --t-success-meta: #5A6172; } } /* Smooth transitions on theme switch */ .theme-dark, .theme-light, .theme-auto { transition: background-color var(--d-theme) var(--e-smooth), color var(--d-theme) var(--e-smooth), border-color var(--d-theme) var(--e-smooth); }