Yeah.. The core styles are not great in CSS variable structure / usage. IMHO it's better to have str

:root {
  --color-shadow-primary: #ff0000;

  --default-focus-box-shadow: 0 0 5px var(--color-shadow-primary);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus {
  box-shadow: var(--input-focus-box-shadow, var(--default-focus-box-shadow));
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus {
  box-shadow: 0 0 5px var(--color-shadow-primary);
}