/* Density — the third theming axis, alongside light/dark (`.dark`) and surface (`data-surface`). Web hook: `data-density` on or any wrapper; `regular` is the default and needs no attribute. Density changes PADDING STEPS ONLY — never type size, never radius — so a view tightens without disturbing the type hierarchy or the shape language. Each level resolves to the value the platform skin already declares for it (`--p-card-pad-compact`, `--p-table-cell-pad-y-compact`, …) rather than a global multiplier, so compact under `data-platform="ios"` is iOS's own compact metric. The second selector in each rule re-applies the level to nested platform subtrees, whose `[data-platform]` block would otherwise reset these back. Only the families the skins define a density step for are remapped here: card inset and rhythm at all three levels, table cell height at compact. For your own rules, key off the same attribute (that is the whole extension mechanism): [data-density="compact"] .my-row{padding:8px 12px} .my-row {padding:12px 16px} [data-density="comfy"] .my-row{padding:16px 20px} */ [data-density="compact"],[data-density="compact"] [data-platform]{ --p-card-pad:var(--p-card-pad-compact); --p-card-gap:var(--p-card-gap-compact); --p-table-cell-pad-y:var(--p-table-cell-pad-y-compact); } [data-density="comfy"],[data-density="comfy"] [data-platform]{ --p-card-pad:var(--p-card-pad-comfortable); --p-card-gap:var(--p-card-gap-comfortable); }