/* ---------------------------------------------------------------------------- Nick Spinelli — Color Black & white from the logo, charged with a single high-energy accent. DEFAULT accent: HYPE RED (#E8203A). An alternate MOLTEN GOLD theme is one attribute away — add data-theme="gold" to or any container. (The old SCE-associated pink has been retired.) ---------------------------------------------------------------------------- */ :root { /* ---- Base ---- */ --color-black: #000000; --color-onyx: #0E0E11; /* near-black surface/text */ --color-ink: #18181B; /* secondary dark surface */ --color-white: #FFFFFF; --color-paper: #F4F4F5; /* off-white elevated */ /* ---- Accent : HYPE RED (default) ---- */ --color-accent: #E8203A; /* hype red — the hero */ --color-accent-soft: #FF8A95; /* lighter (tints, on-dark labels) */ --color-accent-deep: #BC1228; /* pressed / text-on-light (AA) */ /* Nightlife supporting tones (from his club uplighting) */ --color-violet: #6C2BE2; --color-blue: #2F7BFF; /* ---- Cool neutral scale ---- */ --stone-50: #FAFAFA; --stone-100: #F1F1F3; --stone-200: #E3E3E7; --stone-300: #CACAD1; --stone-400: #9B9BA4; --stone-500: #6E6E78; --stone-600: #51515A; --stone-700: #3A3A41; --stone-800: #242429; --stone-900: #131316; /* ---- Semantic: surfaces ---- */ --bg-base: var(--color-white); --bg-elevated: var(--color-paper); --bg-inverse: var(--color-onyx); --surface-card: var(--color-white); --surface-sunken: var(--stone-50); --surface-tint: rgba(232,32,58,0.08); /* accent wash */ /* ---- Semantic: text ---- */ --text-primary: var(--color-onyx); --text-secondary: var(--stone-500); --text-muted: var(--stone-400); --text-inverse: var(--color-white); --text-accent: var(--color-accent-deep); /* accent text on light (AA) */ --on-accent: var(--color-white); /* text/icon on accent fill */ /* ---- Semantic: lines & accent ---- */ --border-subtle: rgba(14,14,17,0.10); --border-strong: rgba(14,14,17,0.24); --border-accent: rgba(232,32,58,0.55); --hairline-dark: rgba(255,255,255,0.16); /* on dark surfaces */ --accent: var(--color-accent); --accent-hover: #FF3A50; --accent-press: var(--color-accent-deep); /* Signature brand gradient — hot red → crimson. Use sparingly: hero accents, foil text, accent panels. Never as a default fill. */ --brand-gradient: linear-gradient(118deg, #FF3A2F 0%, #C81E3A 100%); /* @kind color */ /* Nightlife gradient (violet → blue) for club/event contexts. */ --brand-gradient-alt: linear-gradient(118deg, #6C2BE2 0%, #2F7BFF 100%); /* @kind color */ /* Accent rgba seed, consumed by effects.css for glow + overlay. */ --accent-rgb: 232, 32, 58; /* @kind other */ /* ---- Status ---- */ --success: #1FB67A; --warning: #F5A524; --danger: #F4334A; } /* ============================================================================ ALTERNATE THEME — MOLTEN GOLD Apply with: (or on any wrapper element). Premium, warm, luxury-wedding leaning. Note: gold needs DARK text on fills, so --on-accent flips to onyx. ============================================================================ */ [data-theme="gold"] { --color-accent: #E6A93C; /* molten gold — the hero */ --color-accent-soft: #F4D58A; --color-accent-deep: #A9781A; /* gold text on light (AA) */ --surface-tint: rgba(230,169,60,0.12); --text-accent: var(--color-accent-deep); --on-accent: var(--color-onyx); /* dark text on gold */ --border-accent: rgba(230,169,60,0.6); --accent: var(--color-accent); --accent-hover: #F0B850; --accent-press: var(--color-accent-deep); --brand-gradient: linear-gradient(118deg, #F2B33D 0%, #E0651E 100%); /* @kind color */ --accent-rgb: 230, 169, 60; /* @kind other */ }