/** * @fileoverview Surface system — flat / glass / clay as semantic overlay. * @module packages/ui/styles/surfaces * @package ui * @reviewed 2026-05-26 * * Components bind to four surface tokens: * --surface-bg background color or gradient (resolved via `background:`) * --surface-border border color * --surface-backdrop backdrop-filter value (blur/saturate) or "none" * --surface-shadow box-shadow value (may stack multiple layers) * * Two attributes activate the surface tokens: * - [data-style="…"] — used on by SaasflareShell (page-wide default) * - [data-surface="…"] — used on individual components for per-element override * * Both feed the same rule blocks so swapping at either level swaps the tokens * without touching any component. A component-level `data-surface` re-defines * the tokens for its subtree, overriding the cascaded page-wide value — that's * how `