/* ============================================================ Vitaalands · 24 Personality Universe — extracted token layer (LOOP 01) Every value here is either (a) an alias of a design-system token, or (b) measured from the 24 character plates in assets/vee/. Character identity is never altered — only presentation is unified. Load AFTER the design-system tokens, BEFORE the page style block. ============================================================ */ :root{ /* ---- 1 · Primary / secondary ---- */ --u-primary:var(--brand-primary); /* #2563eb deep European blue */ --u-primary-deep:var(--brand-primary-600); --u-secondary:var(--brand-accent); /* #14b8a6 jade */ --u-energy:var(--vita-energy); /* #f97316 rare warm highlight */ --u-ink:var(--text-primary);--u-ink-2:var(--text-secondary);--u-ink-3:#8a93a5; /* muted lifted to 6.6:1 on canvas for small text (WCAG AA) */ /* ---- 2 · Background tones (page → raised → glass) ---- */ --u-bg:var(--vita-canvas); /* #08080d */ --u-bg-raise:var(--vita-raised); /* #15171f */ --u-sheet-from:#12141d;--u-sheet-to:#0a0b11; --u-scrim:rgba(4,4,8,.76); --u-card-from:rgba(255,255,255,.055);--u-card-to:rgba(255,255,255,.012); --u-hairline:var(--border-glass);--u-hairline-strong:var(--border-glass-strong); /* ---- 3 · Gradient directions (locked angles — never ad hoc) ---- */ --u-grad-card:165deg;--u-grad-panel:160deg;--u-grad-sheet:150deg;--u-grad-brand:100deg; --u-halo-origin:50% 0%;--u-halo-size:112% 78%;--u-halo-stop:60%; /* ---- 4 · Radius system (single source, DS ladder) ---- */ --u-r-chip:var(--radius-xs);--u-r-btn:var(--radius-sm);--u-r-block:var(--radius-md); --u-r-card:var(--radius-xl);--u-r-sheet:var(--radius-2xl);--u-r-pill:var(--radius-pill); --u-r-glyph:14px; /* ---- 5 · Shadow softness ladder ---- */ --u-shadow-card:var(--elev-1);--u-shadow-card-hover:var(--elev-3);--u-shadow-sheet:var(--elev-3); --u-shadow-art:0 16px 24px rgba(0,0,0,.5);--u-shadow-art-lg:0 26px 40px rgba(0,0,0,.55); --u-shadow-art-hero:0 22px 34px rgba(0,0,0,.55); /* ---- 6 · Glow intensity (ambient → focus; opacity of the accent halo) ---- */ --u-glow-rest:.15;--u-glow-hover:.28;--u-glow-stage:.22;--u-glow-hero:.24;--u-glow-blur:22px; /* ---- 7 · Spacing scale (8-pt) ---- */ --u-s1:4px;--u-s2:8px;--u-s3:12px;--u-s4:16px;--u-s5:24px;--u-s6:32px;--u-s7:48px; --u-gap-grid:clamp(13px,1.4vw,20px);--u-pad-card:16px;--u-pad-sheet:clamp(22px,2.4vw,34px); /* ---- 8 · Card proportions + character safe areas (MEASURED) ---- Plates are 760×760. Subject occupies y 3.7–4.2% → 95.8% (h≈0.918) and is centred at cx 0.492–0.500. Silhouette fill ranges 39.8%–50.7% of canvas, mean 44.7% — so apparent size is normalised by area, not by width. */ --u-card-min:226px;--u-art-ratio:1/1;--u-art-safe:84%;--u-art-top-safe:4%; --u-motto-min:36px; /* 2-line lock → card feet align across all 24 */ --u-fit-floor:.94;--u-fit-ceil:1.06; /* ---- 9 · Typography hierarchy ---- */ --u-t-hero:clamp(2.35rem,5.3vw,4.4rem);--u-t-h2:clamp(1.75rem,3.4vw,2.85rem); --u-t-h3:clamp(19px,2vw,25px);--u-t-card:15.5px;--u-t-body:clamp(15px,1.05vw,17.5px); --u-t-meta:12.5px;--u-t-micro:11px;--u-t-nano:9.5px; --u-over-track:.22em;--u-tight:-.03em;--u-tight-2:-.015em; /* ---- 10 · Character accent colours (sampled from costume, snapped to DS tokens) Rule: dominant costume hue → nearest design-system token; when two members of the same core family land on one token, the sibling takes the adjacent shade. Achromatic costumes (astronaut, scientist, knight, doctor coat) are assigned by meaning, since hue sampling is unreliable below S≈0.2. ---- */ --acc-astronaut:var(--brand-primary); /* h233 navy suit */ --acc-pirate:var(--rarity-bronze-2); /* h21/31 leather */ --acc-ninja:var(--aurora-2); /* h222 midnight */ --acc-firefighter:var(--mod-room); /* h4 red */ --acc-musician:var(--mod-game); /* h31 wood/amber */ --acc-builder:var(--core-fire); /* h35 hi-vis */ --acc-superhero:var(--mod-room); /* h3 red cape */ --acc-alien:var(--core-earth); /* h108 green */ --acc-doctor:var(--brand-accent); /* care jade */ --acc-police:var(--aurora-2); /* h223 navy */ --acc-artist:var(--mod-game); /* h30 palette */ --acc-gamer:var(--mod-vee); /* h220 screen */ --acc-graduate:var(--brand-primary); /* h236 gown */ --acc-safari:var(--rarity-bronze-2); /* h31 khaki */ --acc-scientist:var(--mod-trust); /* lab, achromatic */ --acc-teacher:var(--aurora-2); /* h219 jacket */ --acc-wizard:var(--mod-language); /* h272 robe */ --acc-robot:var(--mod-vee); /* h202 steel/cyan */ --acc-farmer:var(--core-earth); /* crops + denim */ --acc-cowboy:var(--rarity-bronze-2); /* h19 leather */ --acc-chef:var(--mod-room); /* h6 red */ --acc-knight:var(--rarity-silver); /* armour */ --acc-detective:var(--rarity-bronze); /* h23 tweed */ --acc-diver:var(--core-water); /* h211 suit */ /* ---- 11 · Optical fit per character = sqrt(mean fill / own fill), clamped ±6%. Equalises how large each Vee reads inside an identical card frame without touching the artwork itself. ---- */ --fit-astronaut:1.019;--fit-pirate:.981;--fit-ninja:.991;--fit-firefighter:.995; --fit-musician:1.000;--fit-builder:1.029;--fit-superhero:.961;--fit-alien:.974; --fit-doctor:1.011;--fit-police:1.042;--fit-artist:.983;--fit-gamer:1.007; --fit-graduate:1.003;--fit-safari:.990;--fit-scientist:1.009;--fit-teacher:1.016; --fit-wizard:1.004;--fit-robot:1.019;--fit-farmer:.939;--fit-cowboy:1.035; --fit-chef:.973;--fit-knight:.977;--fit-detective:1.059;--fit-diver:1.009; } /* One hook applies both character tokens wherever a Vee appears. */ [data-char="astronaut"]{--acc:var(--acc-astronaut);--art-fit:var(--fit-astronaut)} [data-char="pirate"]{--acc:var(--acc-pirate);--art-fit:var(--fit-pirate)} [data-char="ninja"]{--acc:var(--acc-ninja);--art-fit:var(--fit-ninja)} [data-char="firefighter"]{--acc:var(--acc-firefighter);--art-fit:var(--fit-firefighter)} [data-char="musician"]{--acc:var(--acc-musician);--art-fit:var(--fit-musician)} [data-char="builder"]{--acc:var(--acc-builder);--art-fit:var(--fit-builder)} [data-char="superhero"]{--acc:var(--acc-superhero);--art-fit:var(--fit-superhero)} [data-char="alien"]{--acc:var(--acc-alien);--art-fit:var(--fit-alien)} [data-char="doctor"]{--acc:var(--acc-doctor);--art-fit:var(--fit-doctor)} [data-char="police"]{--acc:var(--acc-police);--art-fit:var(--fit-police)} [data-char="artist"]{--acc:var(--acc-artist);--art-fit:var(--fit-artist)} [data-char="gamer"]{--acc:var(--acc-gamer);--art-fit:var(--fit-gamer)} [data-char="graduate"]{--acc:var(--acc-graduate);--art-fit:var(--fit-graduate)} [data-char="safari"]{--acc:var(--acc-safari);--art-fit:var(--fit-safari)} [data-char="scientist"]{--acc:var(--acc-scientist);--art-fit:var(--fit-scientist)} [data-char="teacher"]{--acc:var(--acc-teacher);--art-fit:var(--fit-teacher)} [data-char="wizard"]{--acc:var(--acc-wizard);--art-fit:var(--fit-wizard)} [data-char="robot"]{--acc:var(--acc-robot);--art-fit:var(--fit-robot)} [data-char="farmer"]{--acc:var(--acc-farmer);--art-fit:var(--fit-farmer)} [data-char="cowboy"]{--acc:var(--acc-cowboy);--art-fit:var(--fit-cowboy)} [data-char="chef"]{--acc:var(--acc-chef);--art-fit:var(--fit-chef)} [data-char="knight"]{--acc:var(--acc-knight);--art-fit:var(--fit-knight)} [data-char="detective"]{--acc:var(--acc-detective);--art-fit:var(--fit-detective)} [data-char="diver"]{--acc:var(--acc-diver);--art-fit:var(--fit-diver)}