:root{
    --border-primary: color-mix( in srgb, var(--color-primary0) 70%, transparent );
    --border-primary-hover: color-mix( in srgb, var(--color-primary0) 90%, transparent );

    --border-secondary: color-mix( in srgb, var(--color-secondary0) 70%, transparent );
    --border-secondary-hover: color-mix( in srgb, var(--color-secondary0) 90%, transparent );

    --border-accent: color-mix( in srgb, var(--color-accent0) 70%, transparent );
    --border-accent-hover: color-mix( in srgb, var(--color-accent0) 90%, transparent );

    --border-subtle: color-mix( in srgb, var(--color-surface1) 40%, transparent );
    --border-subtle-hover: color-mix( in srgb, var(--color-surface1) 60%, transparent );

    --border-disabled: color-mix( in srgb, var(--color-border0) 35%, transparent );
}