@layer reset, tokens, shell, typography, grammar, components, systems, routes, handles, effects, ornament;
@layer systems {
@property --spw-theme-resonance-amplitude {
syntax: '<number>';
inherits: true;
initial-value: 1;
}
:where([data-spw-theme-cluster]) {
--spw-theme-charge-color: var(--spw-charge-field-color, var(--active-op-color, #008080));
}
:where([data-spw-theme-cluster="credit"]) {
--spw-theme-charge-color: var(--op-probe-color, #8f5cff);
}
:where([data-spw-theme-cluster="spend"]) {
--spw-theme-charge-color: var(--op-binding-color, #8a5a35);
}
@keyframes spw-theme-resonance {
0%, 92%, 100% { box-shadow: var(--spw-local-shadow, none); }
94% {
box-shadow:
var(--spw-local-shadow, none),
0 0 0 1px color-mix(
in srgb,
var(--spw-theme-charge-color) calc(var(--spw-theme-resonance-amplitude, 1) * 55%),
transparent
);
}
96% {
box-shadow:
var(--spw-local-shadow, none),
0 0 0 2px color-mix(
in srgb,
var(--spw-theme-charge-color) calc(var(--spw-theme-resonance-amplitude, 1) * 30%),
transparent
);
}
}
@media (prefers-reduced-motion: no-preference) {
:where([data-spw-theme-cluster]) {
animation: spw-theme-resonance 9s var(--ease-settle, ease-in-out) infinite;
animation-delay: calc(var(--spw-theme-cluster-index, 0) * -700ms);
}
:where(:hover, :focus-within) > :where([data-spw-theme-cluster]),
:where([data-spw-theme-cluster]):is(:hover, :focus-visible) {
animation-play-state: paused;
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-spw-theme-cluster]) {
outline: 1px dashed color-mix(in srgb, var(--spw-theme-charge-color, currentColor) 60%, transparent);
outline-offset: 2px;
}
}
}