/* ========================================================================= COSMIC PREMIUM, tokens.css (v2, dual-temperature) The single file to edit on rebrand/rename. Components reference SEMANTIC tokens only (never raw hex), so: • a rebrand edits the raw palette below • a temperature switch is ONE attribute: Cool = master · men · rigor surfaces (default). Dawn = women's flagship. ========================================================================= */ :root{ /* RAW PALETTE · COSMIC COOL (edit on rebrand) */ --c-void:#01091D; --c-cosmos:#050E25; --c-nebula:#0A1838; --c-horizon:#122448; --c-rim:#1E3460; --c-glow-100:#DCEEFF; --c-glow-200:#B6D8FF; --c-glow-300:#6BA5FF; --c-glow-400:#2E72FF; --c-glow-500:#1E55D8; --c-glow-600:#1543B0; --c-mist:#F4F6FB; --c-cloud:#FFFFFF; --c-stone-1:#2A3148; --c-stone-2:#4B5470; --c-stone-3:#7A819A; --c-border:#DBE2EE; --c-border-strong:#BCC5D8; /* RAW PALETTE · COSMIC DAWN (edit on rebrand) */ --d-void:#140910; --d-cosmos:#1C0E16; --d-nebula:#2A1620; --d-horizon:#3A1F2C; --d-rim:#58303F; --d-glow-100:#FFE9DD; --d-glow-200:#FFCFB8; --d-glow-300:#F5A98C; --d-glow-400:#E8896B; --d-glow-500:#C96A4E; --d-glow-600:#A4503A; --d-mist:#F7F2EC; --d-cloud:#FFFDFB; --d-stone-1:#34262C; --d-stone-2:#5C4A52; --d-stone-3:#8A7780; --d-border:#ECE0DA; --d-border-strong:#D6C5BD; /* STATUS */ --status-success:#4FB58A; --status-warning:#D4A24A; --status-danger:#E26A6A; /* GOLD · second accent (the brand metal, constant across temperatures) Sampled from the Peptós.LIFE mark. Blue glow stays the primary signal; gold is the warm, premium detail: rules, the wordmark Ó, trust marks, gilt hairlines. */ --gold-100:#F6E7BE; --gold-200:#EBD292; --gold-300:#DDB85F; --gold-400:#C99B3A; --gold-500:#A67A2A; --gold:var(--gold-300); --gold-rgb:221,184,95; --gold-soft:rgba(221,184,95,.12); --gold-glow-sm:0 0 12px rgba(var(--gold-rgb),.42); --gold-glow-md:0 0 26px rgba(var(--gold-rgb),.50),0 0 64px rgba(var(--gold-rgb),.22); --gold-line:linear-gradient(90deg,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.85) 50%,rgba(var(--gold-rgb),0)); /* TYPE */ --font-heading:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --font-edit:'Fraunces','Times New Roman',Georgia,serif; --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:2rem; --fs-40:2.5rem; --fs-48:3rem; --fs-64:4rem; --fs-80:5rem; --fs-96:6rem; --lh-tight:1.02; --lh-snug:1.15; --lh-normal:1.45; --lh-relaxed:1.65; --tracking-tight:-.02em; --tracking-wide:.06em; --tracking-wider:.18em; --tracking-widest:.32em; --tracking-logo:.42em; /* SPACE / RADII (keep) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-9:36px; --sp-11:44px; /* intermediate steps used by lp/pdp blocks */ --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:12px; --r-xl:20px; --r-pill:999px; /* SHADOW (light surfaces only) */ --shadow-1:0 1px 2px rgba(0,0,0,.30); --shadow-2:0 4px 14px rgba(0,0,0,.32); --shadow-3:0 16px 40px rgba(0,0,0,.42); --shadow-4:0 32px 80px rgba(0,0,0,.55); /* MOTION */ --ease-standard:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:150ms; --dur-base:240ms; --dur-slow:520ms; --dur-cinema:1200ms; /* GLOW (reads --glow-rgb → re-temperatures automatically) */ --glow-sm:0 0 12px rgba(var(--glow-rgb),.40); --glow-md:0 0 28px rgba(var(--glow-rgb),.50),0 0 72px rgba(var(--glow-rgb),.22); --glow-lg:0 0 48px rgba(var(--glow-rgb),.62),0 0 140px rgba(var(--glow-rgb),.28); --glow-rim:0 0 0 1px rgba(var(--glow-rgb),.55); --horizon:linear-gradient(180deg,transparent 0%,rgba(var(--glow-rgb),0) 60%, rgba(var(--glow-rgb),.65) 78%,rgba(255,255,255,.92) 80%, rgba(var(--glow-rgb),.65) 82%,rgba(var(--glow-rgb),0) 100%); } /* =========================== SEMANTIC TOKENS =========================== Components reference ONLY these. Temperature is declared once on a root element (body, or any container for side-by-side surfaces). ======================================================================== */ :root, [data-temp="cool"]{ --bg-dark:var(--c-void); --bg-dark-elev:var(--c-cosmos); --bg-dark-card:var(--c-nebula); --bg-dark-hover:var(--c-horizon); --rim:var(--c-rim); --fg-on-dark-1:var(--c-glow-100); --fg-on-dark-2:#B7C5DD; --fg-on-dark-3:#7A8AAA; --border-on-dark:rgba(255,255,255,.10); --border-on-dark-strong:rgba(127,183,255,.32); --bg:var(--c-mist); --bg-elevated:var(--c-cloud); --fg-1:var(--c-stone-1); --fg-2:var(--c-stone-2); --fg-3:var(--c-stone-3); --border:var(--c-border); --border-strong:var(--c-border-strong); --accent:var(--c-glow-400); --accent-hover:var(--c-glow-300); --accent-pressed:var(--c-glow-500); --accent-soft:rgba(46,114,255,.12); --glow-rgb:46,114,255; } [data-temp="dawn"]{ --bg-dark:var(--d-void); --bg-dark-elev:var(--d-cosmos); --bg-dark-card:var(--d-nebula); --bg-dark-hover:var(--d-horizon); --rim:var(--d-rim); --fg-on-dark-1:var(--d-glow-100); --fg-on-dark-2:#E4CDC4; --fg-on-dark-3:#A98E86; --border-on-dark:rgba(255,255,255,.10); --border-on-dark-strong:rgba(245,169,140,.34); --bg:var(--d-mist); --bg-elevated:var(--d-cloud); --fg-1:var(--d-stone-1); --fg-2:var(--d-stone-2); --fg-3:var(--d-stone-3); --border:var(--d-border); --border-strong:var(--d-border-strong); --accent:var(--d-glow-400); --accent-hover:var(--d-glow-300); --accent-pressed:var(--d-glow-500); --accent-soft:rgba(232,137,107,.14); --glow-rgb:232,137,107; }