@layer components{.section-band{padding-block:clamp(120px,14vw,200px)}.section-band[data-tone=light]{background:var(--surface);color:var(--ink)}.section-band[data-tone=light][data-level=low]{background:var(--surface-low)}.section-band[data-tone=light][data-level=mid]{background:var(--surface-mid)}.section-band[data-tone=light][data-level=high]{background:var(--surface-high)}.section-band[data-tone=dark]{background:var(--surface-dark);color:var(--surface);--ink:var(--surface);--ink-2:color-mix(in srgb, var(--surface) 82%, transparent);--ink-3:color-mix(in srgb, var(--surface) 62%, transparent);--ink-4:color-mix(in srgb, var(--surface) 46%, transparent);--ink-5:color-mix(in srgb, var(--surface) 22%, transparent);--ghost:color-mix(in srgb, var(--surface) 6%, transparent);--ghost-2:color-mix(in srgb, var(--surface) 12%, transparent)}}