:root {
    --back-num: 100%;
    --back-num-inv: 0%;
    --text-num: 100%;
    --text-num-inv: 0%;
}

body {
    background-color: color-mix(in srgb, #fff var(--back-num), #ff0000 var(--back-num-inv));
    color: color-mix(in srgb, #000 var(--text-num), color-mix(in srgb, #fff var(--back-num), #ff0000 var(--back-num-inv)) var(--text-num-inv));
}

input {
    border-color: color-mix(in srgb, #aaa var(--back-num), #ff0000 var(--back-num-inv));
    background-color: color-mix(in srgb, #fff var(--back-num), #ff0000 var(--back-num-inv));
    color: color-mix(in srgb, #000 var(--text-num), color-mix(in srgb, #fff var(--back-num), #ff0000 var(--back-num-inv)) var(--text-num-inv)); 
    border-radius: 2px;
    border-width: 1px;
}

input:disabled {
    border-color: color-mix(in srgb, #ccc var(--back-num), #ff0000 var(--back-num-inv));
    background-color: color-mix(in srgb, #eee var(--back-num), #ff0000 var(--back-num-inv));
    color: color-mix(in srgb, #000 var(--text-num), color-mix(in srgb, #fff var(--back-num), #ff0000 var(--back-num-inv)) var(--text-num-inv)); 
    border-radius: 2px;
    border-width: 1px;
}