/** * Platform skin: macOS (desktop density + vibrancy) * Only token overrides + details CSS variables can't express. * Activated by data-platform="macos" on (platform-detect). */ :root[data-platform='macos'] { --sp-font-system: -apple-system, 'SF Pro Text', system-ui, sans-serif; --sp-radius-control: 0.375rem; --sp-radius-card: 0.625rem; --sp-motion-duration: 180ms; --sp-touch-target: 32px; --sp-backdrop-blur: 24px; } [data-platform='macos'] body { font-family: var(--sp-font-system); } /* Overlay-style scrollbars */ [data-platform='macos'] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-platform='macos'] ::-webkit-scrollbar-thumb { background: var(--sp-color-border-dark); border-radius: 4px; } [data-platform='macos'] ::-webkit-scrollbar-track { background: transparent; } /* Subtle hover transitions, desktop-grade */ [data-platform='macos'] .btn, [data-platform='macos'] .card { transition: all var(--sp-motion-duration) var(--sp-motion-easing); }