<ul>
  <li><button class="button">Default</button></li>
  <li><button class="button disabled">Disabled</button></li>
</ul>

<ul>
  <li><button class="button primary">Primary</button></li>
  <li><button class="button disabled primary">Disabled</button></li>
</ul>

<ul>
  <li><button class="button secondary">Secondary</button></li>
  <li><button class="button disabled secondary">Disabled</button></li>
</ul>

<ul>
  <li><button class="button complementary">Complementary</button></li>
  <li><button class="button disabled complementary">Disabled</button></li>
</ul>

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;

  padding: 5vmax;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-content: center;
  gap: 5vmin;
}

ul {
  list-style: none outside none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.button {
  padding: 1em 1.5em;
  display: inline-flex;
  font-size: 1.25em;

  border: 2px solid currentColor;
  border-radius: 6px;
  transition: background 250ms ease-in-out, transform 150ms ease;
  cursor: pointer;
}

.button:focus {
  border: 2px solid currentColor;
  outline: none;
}

.button.disabled {
  cursor: not-allowed;
}
:root {
        --button-base-default-background-color: rgb(125 196 232);
        --button-base-default-text-color: rgb(26 26 26);
        --button-base-default-border-color: rgb(103 187 228);
        --button-base-hovered-background-color: rgb(110 201 247);
        --button-base-hovered-text-color: rgb(26 26 26);
        --button-base-hovered-border-color: rgb(13 166 242);
        --button-base-focused-background-color: rgb(168 216 240);
        --button-base-focused-text-color: rgb(26 26 26);
        --button-base-focused-border-color: rgb(82 177 224);
        --button-base-disabled-background-color: rgb(184 211 224);
        --button-base-disabled-text-color: rgb(26 26 26 / 50%);
        --button-base-disabled-border-color: rgb(148 189 209);
        --button-primary-default-background-color: rgb(204 168 240);
        --button-primary-default-text-color: rgb(26 26 26);
        --button-primary-default-border-color: rgb(191 147 236);
        --button-primary-hovered-background-color: rgb(204 158 250);
        --button-primary-hovered-text-color: rgb(26 26 26);
        --button-primary-hovered-border-color: rgb(153 61 245);
        --button-primary-focused-background-color: rgb(184 224 204);
        --button-primary-focused-text-color: rgb(26 26 26);
        --button-primary-focused-border-color: rgb(112 194 153);
        --button-primary-disabled-background-color: rgb(230 219 240);
        --button-primary-disabled-text-color: rgb(26 26 26 / 50%);
        --button-primary-disabled-border-color: rgb(204 184 224);
        --button-secondary-default-background-color: rgb(148 209 179);
        --button-secondary-default-text-color: rgb(26 26 26);
        --button-secondary-default-border-color: rgb(130 201 166);
        --button-secondary-hovered-background-color: rgb(133 224 179);
        --button-secondary-hovered-text-color: rgb(26 26 26);
        --button-secondary-hovered-border-color: rgb(51 204 128);
        --button-secondary-focused-background-color: rgb(184 224 204);
        --button-secondary-focused-text-color: rgb(26 26 26);
        --button-secondary-focused-border-color: rgb(112 194 153);
        --button-secondary-disabled-background-color: rgb(199 209 204);
        --button-secondary-disabled-text-color: rgb(26 26 26 / 50%);
        --button-secondary-disabled-border-color: rgb(171 186 179);
        --button-complementary-default-background-color: rgb(228 145 103);
        --button-complementary-default-text-color: rgb(26 26 26);
        --button-complementary-default-border-color: rgb(224 129 82);
        --button-complementary-hovered-background-color: rgb(246 139 85);
        --button-complementary-hovered-text-color: rgb(26 26 26);
        --button-complementary-hovered-border-color: rgb(218 80 11);
        --button-complementary-focused-background-color: rgb(236 176 147);
        --button-complementary-focused-text-color: rgb(26 26 26);
        --button-complementary-focused-border-color: rgb(221 113 60);
        --button-complementary-disabled-background-color: rgb(217 183 166);
        --button-complementary-disabled-text-color: rgb(26 26 26 / 50%);
        --button-complementary-disabled-border-color: rgb(201 154 130);
    }

 .button {
        --background-color: var(--button-base-default-background-color);
        --text-color: var(--button-base-default-text-color);
        --border-color: var(--button-base-default-border-color);
        background-color: var(--background-color);
        color: var(--text-color);
        border: 2px solid var(--border-color);
    }

    .button:hover {
        --background-color: var(--button-base-hovered-background-color);
        --text-color: var(--button-base-hovered-text-color)
        --border-color: var(--button-base-hovered-border-color)
    }

    .button:focus {
        --background-color: var(--button-base-focused-background-color);
        --text-color: var(--button-base-focused-text-color);
        --border-color: var(--button-base-focused-border-color);
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--border-color);
      border: 2px solid var(--border-color);
    }

    .button.disabled {
        --background-color: var(--button-base-disabled-background-color);
        --text-color: var(--button-base-disabled-text-color);
        --border-color: var(--button-base-disabled-border-color);
    }


    .primary {
        --background-color: var(--button-primary-default-background-color);
        --text-color: var(--button-primary-default-text-color);
        --border-color: var(--button-primary-default-border-color);
    }

    .primary:hover {
        --background-color: var(--button-primary-hovered-background-color);
        --text-color: var(--button-primary-hovered-text-color)
        --border-color: var(--button-primary-hovered-border-color)
    }

    .primary:focus {
        --background-color: var(--button-primary-focused-background-color);
        --text-color: var(--button-primary-focused-text-color);
        --border-color: var(--button-primary-focused-border-color);
    }

    .primary.disabled {
        --background-color: var(--button-primary-disabled-background-color);
        --text-color: var(--button-primary-disabled-text-color);
        --border-color: var(--button-primary-disabled-border-color);
    }


    .secondary {
        --background-color: var(--button-secondary-default-background-color);
        --text-color: var(--button-secondary-default-text-color);
        --border-color: var(--button-secondary-default-border-color);
    }

    .secondary:hover {
        --background-color: var(--button-secondary-hovered-background-color);
        --text-color: var(--button-secondary-hovered-text-color)
        --border-color: var(--button-secondary-hovered-border-color)
    }

    .secondary:focus {
        --background-color: var(--button-secondary-focused-background-color);
        --text-color: var(--button-secondary-focused-text-color);
        --border-color: var(--button-secondary-focused-border-color);
    }

    .secondary.disabled {
        --background-color: var(--button-secondary-disabled-background-color);
        --text-color: var(--button-secondary-disabled-text-color);
        --border-color: var(--button-secondary-disabled-border-color);
    }

    .complementary {
        --background-color: var(--button-complementary-default-background-color);
        --text-color: var(--button-complementary-default-text-color);
        --border-color: var(--button-complementary-default-border-color);
    }

    .complementary:hover {
        --background-color: var(--button-complementary-hovered-background-color);
        --text-color: var(--button-complementary-hovered-text-color)
        --border-color: var(--button-complementary-hovered-border-color)
    }

    .complementary:focus {
        --background-color: var(--button-complementary-focused-background-color);
        --text-color: var(--button-complementary-focused-text-color);
        --border-color: var(--button-complementary-focused-border-color);
    }

    .complementary.disabled {
        --background-color: var(--button-complementary-disabled-background-color);
        --text-color: var(--button-complementary-disabled-text-color);
        --border-color: var(--button-complementary-disabled-border-color);
    }