/** * theme.css — Velthian design tokens * * Single source of truth for all colours, typography, spacing, and motion. * All other CSS files reference these variables — NO hardcoded colour values * anywhere else in the codebase. * * To change the brand: edit this file only. */ :root { /* ── Background surfaces ───────────────────────────────── */ --wa-bg-base: #0a0a0c; /* page background */ --wa-bg-raised: #111116; /* slightly elevated surfaces */ --wa-bg-card: #18181f; /* cards, modals */ --wa-bg-card-alt: #1e1e28; /* secondary card variant */ /* ── Borders ───────────────────────────────────────────── */ --wa-border: rgba(255, 255, 255, 0.10); --wa-border-md: rgba(255, 255, 255, 0.15); --wa-border-strong:rgba(255, 255, 255, 0.22); /* ── Gold — primary brand accent ──────────────────────── */ --wa-gold: #c9a84c; --wa-gold-dim: #8a6e2f; --wa-gold-pale: rgba(201, 168, 76, 0.10); --wa-gold-glow: rgba(201, 168, 76, 0.20); --wa-gold-hover: #d4b060; /* ── Text ──────────────────────────────────────────────── */ --wa-text: #eae5dc; /* primary body text */ --wa-text-2: #b8b0a4; /* secondary / labels */ --wa-text-muted: #8a8796; /* hints, placeholders */ --wa-text-inverse: #0a0a0c; /* text on gold backgrounds */ /* ── Semantic colours ──────────────────────────────────── */ --wa-green: #2ec27e; /* positive / success */ --wa-red: #e05a5a; /* negative / error */ --wa-blue: #4a90d9; /* informational */ /* ── Typography ────────────────────────────────────────── */ --wa-font-display: 'Cormorant Garamond', Georgia, serif; --wa-font-body: 'DM Sans', sans-serif; --wa-text-xs: 12px; --wa-text-sm: 14px; --wa-text-base: 15px; --wa-text-md: 17px; --wa-text-lg: 20px; --wa-text-xl: 26px; --wa-text-2xl: 32px; --wa-text-3xl: 42px; --wa-text-helper: 12px; /* tertiary helper copy */ --wa-text-label: 14px; /* secondary operational labels */ /* ── Spacing ───────────────────────────────────────────── */ --wa-space-xs: 4px; --wa-space-sm: 8px; --wa-space-md: 16px; --wa-space-lg: 24px; --wa-space-xl: 40px; --wa-space-2xl: 56px; --wa-space-3xl: 80px; /* ── Layout ────────────────────────────────────────────── */ --wa-nav-height: 72px; --wa-max-width: 1280px; --wa-radius-sm: 4px; --wa-radius-md: 8px; --wa-radius-lg: 12px; /* ── Motion ────────────────────────────────────────────── */ --wa-ease: cubic-bezier(0.16, 1, 0.3, 1); --wa-duration-fast: 150ms; --wa-duration-base: 220ms; --wa-duration-slow: 400ms; /* ── Shadows ───────────────────────────────────────────── */ --wa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --wa-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.4); --wa-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.6); --wa-shadow-gold: 0 4px 24px rgba(201, 168, 76, 0.25); /* ── Nav specific ──────────────────────────────────────── */ --wa-nav-bg: rgba(10, 10, 12, 0.95); --wa-nav-border: var(--wa-border); /* ── Component: Input ──────────────────────────────────── */ --wa-input-bg: var(--wa-bg-raised); --wa-input-border: var(--wa-border); --wa-input-border-focus:var(--wa-gold-dim); --wa-input-shadow-focus:0 0 0 3px var(--wa-gold-pale); --wa-input-text: var(--wa-text); --wa-input-placeholder: var(--wa-text-muted); /* ── Component: Button primary ─────────────────────────── */ --wa-btn-bg: var(--wa-gold); --wa-btn-bg-hover: var(--wa-gold-hover); --wa-btn-text: var(--wa-text-inverse); /* ── Component: Button ghost ───────────────────────────── */ --wa-btn-ghost-border: var(--wa-border-md); --wa-btn-ghost-text: var(--wa-text-muted); --wa-btn-ghost-border-hover: var(--wa-border-strong); --wa-btn-ghost-text-hover: var(--wa-text-2); } /* ══════════════════════════════════════════════════════════ LIGHT THEME — activated via ══════════════════════════════════════════════════════════ */ body.light { /* Invert backgrounds — light base with dark text */ --wa-bg-base: #f8f8f9; --wa-bg-raised: #ffffff; --wa-bg-card: #ffffff; --wa-bg-card-alt: #f3f3f4; /* Borders — darker in light mode */ --wa-border: rgba(0, 0, 0, 0.08); --wa-border-md: rgba(0, 0, 0, 0.12); --wa-border-strong:rgba(0, 0, 0, 0.18); /* Gold stays the same — it's brand */ /* --wa-gold, --wa-gold-dim, etc. inherited from :root */ /* Text — invert to dark */ --wa-text: #1a1a1c; --wa-text-2: #4a4a52; --wa-text-muted: #9a9aa2; --wa-text-inverse: #ffffff; /* Semantic colors stay vibrant */ /* --wa-green, --wa-red, --wa-blue inherited */ /* Shadows — lighter in light mode */ --wa-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --wa-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.08); --wa-shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.12); /* Nav background */ --wa-nav-bg: rgba(255, 255, 255, 0.95); }