/* ================================================================ Veralia Globe — Theme (Light / Dark / System) ================================================================ How it works: - `data-theme` attribute on chooses which palette applies. - No attribute (or data-theme="system") → follows OS preference. - data-theme="light" / "dark" → force that theme. - header.php sets the attribute BEFORE the page renders to avoid a flash of the wrong theme. Brand colors are derived from the official Veralia Globe logo: - Deep royal blue #0c2f6f (wordmark) - Medium royal blue #1d4ed8 (web-friendly primary) - Accent cyan #1fa9ff (Real-ID badge check) ================================================================ */ /* ---------- Light palette (default) ---------- */ :root, :root[data-theme="light"] { /* Brand (from logo) */ --color-brand: #1d4ed8; /* Veralia Blue — web-friendly */ --color-brand-deep: #0c2f6f; /* Veralia Deep — wordmark */ --color-brand-hover: #1e40af; --color-brand-soft: #e8eefd; --color-accent: #1fa9ff; /* Real-ID check cyan */ /* Semantic */ --color-success: #16a34a; --color-warning: #f59e0b; --color-danger: #dc2626; /* Surfaces */ --color-bg: #ffffff; --color-bg-subtle: #f7f9fc; --color-bg-muted: #eef2f7; --color-surface: #ffffff; --color-surface-hover: #f4f6fa; /* Text */ --color-text: #0f1419; --color-text-muted: #536471; --color-text-subtle: #8b98a5; --color-text-on-brand: #ffffff; /* Borders & shadows */ --color-border: #e5e9ef; --color-border-strong: #cfd9e0; --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04); --shadow-md: 0 2px 8px rgba(15, 20, 25, 0.08); --shadow-lg: 0 12px 32px rgba(15, 20, 25, 0.10); /* Badges */ --badge-verified-bg: #e8eefd; --badge-verified-fg: #1d4ed8; } /* ---------- Dark palette ---------- */ :root[data-theme="dark"] { --color-brand: #4e7ff0; --color-brand-deep: #1d4ed8; --color-brand-hover: #6e96f4; --color-brand-soft: #152040; --color-accent: #1fa9ff; --color-success: #22c55e; --color-warning: #fbbf24; --color-danger: #f87171; --color-bg: #0b1116; --color-bg-subtle: #0f1620; --color-bg-muted: #151e2b; --color-surface: #111821; --color-surface-hover: #18212d; --color-text: #e7edf4; --color-text-muted: #8b98a5; --color-text-subtle: #5b6672; --color-text-on-brand: #ffffff; --color-border: #202a37; --color-border-strong: #2c3845; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --badge-verified-bg: #152040; --badge-verified-fg: #4e7ff0; } /* ---------- System: follow OS preference ---------- */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --color-brand: #4e7ff0; --color-brand-deep: #1d4ed8; --color-brand-hover: #6e96f4; --color-brand-soft: #152040; --color-accent: #1fa9ff; --color-success: #22c55e; --color-warning: #fbbf24; --color-danger: #f87171; --color-bg: #0b1116; --color-bg-subtle: #0f1620; --color-bg-muted: #151e2b; --color-surface: #111821; --color-surface-hover: #18212d; --color-text: #e7edf4; --color-text-muted: #8b98a5; --color-text-subtle: #5b6672; --color-text-on-brand: #ffffff; --color-border: #202a37; --color-border-strong: #2c3845; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); --badge-verified-bg: #152040; --badge-verified-fg: #4e7ff0; } }