61 lines
2.8 KiB
CSS
61 lines
2.8 KiB
CSS
/* Wiggleverse — Color tokens
|
||
Source of truth: wiggleverse-www/assets/tokens.css (brand BRAND.md §8–9).
|
||
Dark "sky" is the primary ground; Paper is for long reading. No-center motif. */
|
||
|
||
:root {
|
||
/* ---- Brand palette (base values) ---- */
|
||
--wv-midnight: #0E1230; /* sky / ground — primary dark background */
|
||
--wv-indigo: #1C2150; /* raised surfaces on dark (cards, mobile nav) */
|
||
--wv-indigo-2: #232A63; /* hover state for raised surfaces */
|
||
--wv-lilac: #9B8CFF; /* accent — "the bonds between us"; links, nodes */
|
||
--wv-violet: #7C6FE0; /* secondary links / strokes (on light) */
|
||
--wv-gold: #F4C76B; /* warmth / horizon / primary CTAs */
|
||
--wv-gold-hi: #F7D488; /* gold hover */
|
||
--wv-starlight:#EDEAFF; /* nodes / text on dark */
|
||
--wv-paper: #F6F4FB; /* light-mode background */
|
||
--wv-ink: #3B2F7A; /* text on light */
|
||
--wv-night: #090C22; /* footer / deepest ground */
|
||
|
||
/* CTA text-on-gold (very dark gold-brown, not pure black) */
|
||
--wv-gold-ink: #2A2003;
|
||
--wv-gold-ink-soft: #6B4E10; /* "soon" tag text on gold tint */
|
||
|
||
/* ---- Alpha derivations (lilac / gold / starlight washes) ---- */
|
||
--wv-lilac-08: rgba(155, 140, 255, .08);
|
||
--wv-lilac-12: rgba(155, 140, 255, .12);
|
||
--wv-lilac-16: rgba(155, 140, 255, .16);
|
||
--wv-lilac-18: rgba(155, 140, 255, .18);
|
||
--wv-lilac-32: rgba(155, 140, 255, .32);
|
||
--wv-gold-28: rgba(244, 199, 107, .28);
|
||
--wv-gold-40: rgba(244, 199, 107, .40);
|
||
--wv-starlight-85: rgba(237, 234, 255, .85);
|
||
--wv-starlight-78: rgba(237, 234, 255, .78);
|
||
--wv-starlight-60: rgba(237, 234, 255, .60);
|
||
--wv-starlight-55: rgba(237, 234, 255, .55);
|
||
|
||
/* ---- Semantic aliases ---- */
|
||
--surface-sky: var(--wv-midnight); /* page ground (dark) */
|
||
--surface-raised: var(--wv-indigo); /* cards / panels on dark */
|
||
--surface-raised-hi: var(--wv-indigo-2); /* raised hover */
|
||
--surface-paper: var(--wv-paper); /* long-reading light sections */
|
||
--surface-card-light:#FFFFFF; /* build-cards on paper */
|
||
--surface-footer: var(--wv-night);
|
||
|
||
--text-on-dark: var(--wv-starlight);
|
||
--text-on-dark-soft: var(--wv-starlight-78);
|
||
--text-on-dark-mute: var(--wv-starlight-60);
|
||
--text-on-light: var(--wv-ink);
|
||
--text-on-light-soft:#4B4170;
|
||
|
||
--accent: var(--wv-lilac); /* links + nodes on dark */
|
||
--accent-on-light: var(--wv-violet); /* links + strokes on light */
|
||
--cta: var(--wv-gold); /* primary action / horizon */
|
||
--cta-hover: var(--wv-gold-hi);
|
||
--cta-text: var(--wv-gold-ink);
|
||
|
||
--border-soft: var(--wv-lilac-16); /* hairlines on dark */
|
||
--border-card: var(--wv-lilac-18);
|
||
--border-strong: var(--wv-lilac-32);
|
||
--focus-ring: var(--wv-gold);
|
||
}
|