@layer components{.pk-tone--neutral,.pk-badge--neutral{--tone:var(--pk-line-strong)}.pk-tone--info,.pk-badge--info{--tone:var(--pk-palette-blue)}.pk-tone--warn,.pk-badge--warn{--tone:var(--pk-palette-yellow)}.pk-tone--risk,.pk-badge--risk{--tone:var(--pk-palette-orange)}.pk-tone--ok,.pk-badge--ok{--tone:var(--pk-palette-green)}.pk-tone--danger,.pk-badge--danger{--tone:var(--pk-palette-red)}.pk-tone--accent,.pk-badge--accent{--tone:var(--pk-accent)}.pk-tone--fade-1{--tone:color-mix(in srgb, var(--pk-palette-blue) 65%, transparent)}.pk-tone--fade-2{--tone:color-mix(in srgb, var(--pk-palette-blue) 77%, transparent)}.pk-tone--fade-3{--tone:color-mix(in srgb, var(--pk-palette-blue) 89%, transparent)}.pk-tone--fade-4,.pk-tone--travel-1{--tone:var(--pk-palette-blue)}.pk-tone--travel-2{--tone:color-mix(in oklab, var(--pk-palette-blue) 67%, var(--pk-palette-teal))}.pk-tone--travel-3{--tone:color-mix(in oklab, var(--pk-palette-blue) 33%, var(--pk-palette-teal))}.pk-tone--travel-4{--tone:var(--pk-palette-teal)}}