/* Collector's Vault — design tokens (light + dark) See ../05-ui-ux-design/THEME.md Default mode follows the OS. Force a mode with . Brand accents (gold, electric, gradients) are identical in both modes — only surfaces and text change. */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600&family=Inter:wght@400;500&display=swap'); :root { /* ---- brand constants: identical in both modes ---- */ --color-gold: #E6B55C; --color-on-gold: #0E1116; --color-action: #2E8BFF; --color-action-hover: #1D7BF0; --color-on-action: #0E1116; --color-available: #36C28B; --color-gone: #F2545B; /* gradients — accents only, the holo-foil language */ --grad-holo: linear-gradient(135deg, #2E8BFF 0%, #7C5CFF 50%, #E6B55C 100%); --grad-gold: linear-gradient(135deg, #F4D58A 0%, #E6B55C 45%, #B8842E 100%); --grad-electric: linear-gradient(135deg, #36C9E0 0%, #2E8BFF 55%, #1D7BF0 100%); --grad-rare: linear-gradient(135deg, #FF7AD9 0%, #7C5CFF 35%, #2E8BFF 70%, #36C9E0 100%); /* type + shape */ --font-heading: 'Sora', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; } /* ---- DARK (default) ---- */ :root, :root[data-theme="dark"] { --color-bg: #0E1116; --color-surface: #1A1F27; --color-surface-raised: #222834; --color-border: #2A313C; --color-text: #F3F5F9; --color-text-muted: #97A1B0; --color-text-faint: #5B6675; --grad-vault: radial-gradient(120% 120% at 50% 0%, #1C2530 0%, #0E1116 65%); } /* ---- LIGHT (explicit) ---- */ :root[data-theme="light"] { --color-bg: #F7F8FA; --color-surface: #FFFFFF; --color-surface-raised: #EEF1F6; --color-border: #E2E6EE; --color-text: #0E1116; --color-text-muted: #5B6675; --color-text-faint: #98A2B3; --grad-vault: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F1F3F7 70%); } /* ---- LIGHT via OS preference when no explicit mode is set ---- */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --color-bg: #F7F8FA; --color-surface: #FFFFFF; --color-surface-raised: #EEF1F6; --color-border: #E2E6EE; --color-text: #0E1116; --color-text-muted: #5B6675; --color-text-faint: #98A2B3; --grad-vault: radial-gradient(120% 120% at 50% 0%, #FFFFFF 0%, #F1F3F7 70%); } } /* ---- base ---- */ body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; } h1, h2, h3 { font-family: var(--font-heading); letter-spacing: -0.01em; font-weight: 600; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 17px; font-weight: 500; } /* ---- components ---- */ .btn-primary { background: var(--grad-electric); color: var(--color-on-action); font-family: var(--font-heading); font-weight: 500; border: 0; border-radius: var(--radius-sm); padding: 10px 16px; } .btn-primary:hover { filter: brightness(1.08); } .badge-graded { background: var(--grad-gold); color: var(--color-on-gold); font-family: var(--font-heading); font-weight: 600; font-size: 11px; border-radius: var(--radius-sm); padding: 3px 8px; } .badge-chase { background: var(--grad-rare); color: var(--color-on-gold); font-family: var(--font-heading); font-weight: 600; font-size: 10px; border-radius: var(--radius-sm); padding: 3px 7px; } /* section background with subtle depth */ .surface-vault { background: var(--grad-vault); } /* 1px holo-foil frame: wrap a solid-bg child inside */ .holo-frame { padding: 1px; border-radius: var(--radius-lg); background: var(--grad-holo); } .holo-frame > * { border-radius: calc(var(--radius-lg) - 1px); } /* holo banner — text must use the darkest stop or sit on a solid scrim */ .holo-strip { background: var(--grad-holo); color: var(--color-on-gold); }