/** * Platform skin: Windows (Fluent Design) * Only token overrides + details CSS variables can't express. * Activated by data-platform="windows" on (platform-detect). */ :root[data-platform='windows'] { --sp-font-system: 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif; --sp-radius-control: 0.25rem; --sp-radius-card: 0.5rem; --sp-motion-easing: cubic-bezier(0, 0, 0, 1); --sp-motion-duration: 170ms; --sp-touch-target: 32px; --sp-backdrop-blur: 30px; } [data-platform='windows'] body { font-family: var(--sp-font-system); } /* Fluent focus visuals */ [data-platform='windows'] :focus-visible { outline: 2px solid var(--sp-color-text-primary); outline-offset: 1px; border-radius: var(--sp-radius-control); } /* Reveal-style hover on buttons */ [data-platform='windows'] .btn:hover { box-shadow: inset 0 0 0 1px var(--sp-color-border-medium); }