/** * Platform skin: Android (Material 3) * Only token overrides + details CSS variables can't express. * Activated by data-platform="android" on (platform-detect). */ :root[data-platform='android'] { --sp-font-system: Roboto, 'Noto Sans', system-ui, sans-serif; --sp-radius-control: 1.25rem; /* M3 pill-leaning buttons */ --sp-radius-card: 0.75rem; /* 12px */ --sp-radius-sheet: 1.75rem 1.75rem 0 0; --sp-motion-easing: cubic-bezier(0.2, 0, 0, 1); /* M3 emphasized */ --sp-motion-duration: 250ms; --sp-touch-target: 48px; } [data-platform='android'] body { font-family: var(--sp-font-system); } /* M3 tonal elevation: dark surfaces tint toward primary as they elevate */ :root[data-platform='android'][data-theme='dark'] { --sp-color-surface-1: #1e261f; --sp-color-surface-2: #28312a; } /* Ripple hook consumed by sp-platform-behaviors.js */ [data-platform='android'] .sp-ripple-host { position: relative; overflow: hidden; } [data-platform='android'] .sp-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.12; transform: scale(0); animation: sp-ripple 450ms var(--sp-motion-easing) forwards; } @keyframes sp-ripple { to { transform: scale(2.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { [data-platform='android'] .sp-ripple { animation: none; opacity: 0; } }