/* =========================================================================== FLASHMAC — RADII, BORDERS, SHADOWS & GLOW Corners: confidently rounded but never pill-soft on big surfaces — the rounded wordmark sets the tone. Gaming energy comes from GLOW shadows (colored, blurred) layered over neutral elevation shadows. =========================================================================== */ :root { /* ---- Radii ------------------------------------------------------------ Squared — tightened site-wide from the original soft scale (archived at tokens/_archive/effects-soft-2026-08-29.css) after a canvas comparison (guidelines/radius-exploration.html, options A/B/C). Gaming is now the primary audience over Apple-refurb, and geometry should read more confident/angular; --radius-pill is unchanged — pills are a shape, not a point on this scale. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; /* default card / input */ --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px; --radius-pill: 999px; /* ---- Border widths ---------------------------------------------------- */ --border-hair: 1px; --border-thin: 1.5px; --border-bold: 2px; /* ---- Elevation (neutral, cool-tinted) --------------------------------- */ --shadow-xs: 0 1px 2px rgba(13, 11, 20, 0.06); --shadow-sm: 0 2px 6px rgba(13, 11, 20, 0.08); --shadow-md: 0 8px 24px rgba(13, 11, 20, 0.10); --shadow-lg: 0 18px 48px rgba(13, 11, 20, 0.14); --shadow-xl: 0 32px 80px rgba(13, 11, 20, 0.20); /* ---- Glow (gaming accent — colored, for emphasis & hover) ------------- */ --glow-pink: 0 0 0 1px rgba(235,63,147,0.35), 0 8px 28px rgba(235,63,147,0.35); --glow-orange: 0 0 0 1px rgba(245,149,111,0.35), 0 8px 28px rgba(245,149,111,0.38); --glow-violet: 0 0 0 1px rgba(126,73,242,0.35), 0 8px 30px rgba(126,73,242,0.40); --glow-flash: 0 10px 30px rgba(235,63,147,0.30), 0 4px 14px rgba(245,149,111,0.28); /* Focus ring */ --ring-focus: 0 0 0 3px rgba(126,73,242,0.45); /* ---- Glass (frosted overlay — text panels over photography) ----------- New family, item 7 (hero slider): nothing elsewhere in the kit sits on top of a photograph, so no existing surface/shadow token covers a scrim + blur treatment. Same values in both themes — it reads against a photo, not against --bg-base, so it doesn't flip with .theme-dark. */ --glass-scrim: rgba(16, 12, 24, 0.32); --glass-blur: blur(16px) saturate(1.5); /* @kind other */ --glass-border: 1px solid rgba(255, 255, 255, 0.14); /* @kind other */ --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); /* ---- Ambient surface glow (dark theme atmosphere, body-level) ---------- Two soft radial blooms behind all content — gaming energy without touching any component. Ported from the live theme's dark background, with three corrections: 1. Color: the live theme's pink bloom was rgb(255,77,166) — off-palette, not --flash-pink (#EB3F93/rgb(235,63,147)). At 18% opacity, fully blurred, behind a near-black base, the two are visually indistinguishable — there's no legibility or brand reason to keep a bespoke 4th pink in the system for a purely decorative wash. Aliased to --flash-pink so the glow follows the brand token (retint the brand, the glow follows). The orange bloom was already exactly --flash-orange — also aliased, for the same single-source reason. 2. Always-on gradients, opacity-only toggle (--surface-glow-strength: 0 in light / 1 in .theme-dark) — background-image can't tween between "none" and a gradient, which is why the live theme's glow snapped in instead of fading. Opacity animates smoothly instead. 3. Contrast checked at the BRIGHTEST point of each bloom (its gradient centre, 18%/14% alpha over --ink-950), not the nominal --ink-950 value: white text (--text-strong, dark theme) still measures ~16.3:1 (pink centre) and ~15.9:1 (orange centre) — both comfortably past the 4.5:1 AA floor for body text, so the wash never needs to dodge type. */ --surface-glow: radial-gradient(50% 38% at 15% 0%, color-mix(in srgb, var(--flash-pink) 18%, transparent), transparent 60%), radial-gradient(45% 35% at 100% 8%, color-mix(in srgb, var(--flash-orange) 14%, transparent), transparent 60%); /* @kind color */ --surface-glow-strength: 0; /* @kind other */ /* ---- Z-index scale ------------------------------------------------------ Seven layers, ordered by how much of the page each one commands — not by when a component happened to be built. Gaps of 10 leave room to insert. 10 header sticky chrome that coexists with scrolling content. 20 dropdown transient popovers anchored to that content (mega menu). 30 sticky chrome pinned to the viewport but non-blocking (PDP anchored mobile buy bar, PDP desktop mini bar) — above ordinary content and dropdowns, below anything modal. 40 overlay modal backdrops/scrims (the dimming layer alone). 50 drawer the modal surface itself — always the backdrop's tier +10, so any overlay/drawer pair nests correctly without per-component math (cart, search, installment, catalog filter sheet, mobile nav). 60 lightbox full-bleed media takeover (PDP image zoom) — opened from inside a page that may itself have drawers queued, so it must beat the drawer tier. 70 preloader brand splash on load — must beat literally everything; nothing else on the page is legitimately above it. A backdrop+panel pair within one tier-step uses the two tiers directly (e.g. overlay/drawer); a single element needing to sit just above its own backdrop without consuming a whole tier uses calc(var(--z-x) + 1). */ --z-header: 10; /* @kind other */ --z-dropdown: 20; /* @kind other */ --z-sticky: 30; /* @kind other */ --z-overlay: 40; /* @kind other */ --z-drawer: 50; /* @kind other */ --z-lightbox: 60; /* @kind other */ --z-preloader: 70; /* @kind other */ } .theme-dark { --surface-glow-strength: 1; }