My Basic CSS Template

Introduction

I make a lot of web pages by hand¹. This is is a quick-start CSS I can copy/paste to get a new one rolling.

The colors come from color-picker.alanwsmith.com. (the have been renamed from -alfa, -bravo, -charlie to -primary, -secondary, -alt-1, etc. Plan is to make the tool use those names.)

Current Colors

The current color set is:

primary

secondary

alt-1

alt-2

alt-3

alt-4

There are versions of each color with opacity reduced by 10% between each iteration. I don't need all of them for any given project. I prefer to start with them all in and remove cruft compared to having to add them.

Block Widths

xxsmall

xsmall

small

medium

large

xlarge

full

Wrapper Widths

xxsmall

xsmall

small

medium

large

xlarge

full

CSS

:root {
  color-scheme: light dark;
  --color-background: oklch(96.778% 0.04773 212.121);
  --color-bw-match: rgb(255 255 255);
  --color-bw-match-90: rgb(255 255 255 / 90%);
  --color-bw-match-80: rgb(255 255 255 / 80%);
  --color-bw-match-70: rgb(255 255 255 / 70%);
  --color-bw-match-60: rgb(255 255 255 / 60%);
  --color-bw-match-50: rgb(255 255 255 / 50%);
  --color-bw-match-40: rgb(255 255 255 / 40%);
  --color-bw-match-30: rgb(255 255 255 / 30%);
  --color-bw-match-20: rgb(255 255 255 / 20%);
  --color-bw-match-10: rgb(255 255 255 / 10%);
  --color-bw-reverse: rgb(0 0 0);
  --color-bw-reverse-90: rgb(0 0 0 / 90%);
  --color-bw-reverse-80: rgb(0 0 0 / 80%);
  --color-bw-reverse-70: rgb(0 0 0 / 70%);
  --color-bw-reverse-60: rgb(0 0 0 / 60%);
  --color-bw-reverse-50: rgb(0 0 0 / 50%);
  --color-bw-reverse-40: rgb(0 0 0 / 40%);
  --color-bw-reverse-30: rgb(0 0 0 / 30%);
  --color-bw-reverse-20: rgb(0 0 0 / 20%);
  --color-bw-reverse-10: rgb(0 0 0 / 10%);
  --color-primary: oklch(36.778% 0.04773 332.121);
  --color-primary-90: oklch(36.778% 0.04773 332.121 / 90%);
  --color-primary-80: oklch(36.778% 0.04773 332.121 / 80%);
  --color-primary-70: oklch(36.778% 0.04773 332.121 / 70%);
  --color-primary-60: oklch(36.778% 0.04773 332.121 / 60%);
  --color-primary-50: oklch(36.778% 0.04773 332.121 / 50%);
  --color-primary-40: oklch(36.778% 0.04773 332.121 / 40%);
  --color-primary-30: oklch(36.778% 0.04773 332.121 / 30%);
  --color-primary-20: oklch(36.778% 0.04773 332.121 / 20%);
  --color-primary-10: oklch(36.778% 0.04773 332.121 / 10%);
  --color-secondary: oklch(16.778% 0.34773 32.121);
  --color-secondary-90: oklch(16.778% 0.34773 32.121 / 90%);
  --color-secondary-80: oklch(16.778% 0.34773 32.121 / 80%);
  --color-secondary-70: oklch(16.778% 0.34773 32.121 / 70%);
  --color-secondary-60: oklch(16.778% 0.34773 32.121 / 60%);
  --color-secondary-50: oklch(16.778% 0.34773 32.121 / 50%);
  --color-secondary-40: oklch(16.778% 0.34773 32.121 / 40%);
  --color-secondary-30: oklch(16.778% 0.34773 32.121 / 30%);
  --color-secondary-20: oklch(16.778% 0.34773 32.121 / 20%);
  --color-secondary-10: oklch(16.778% 0.34773 32.121 / 10%);
  --color-alt-1: oklch(56.778% 0.44773 92.121);
  --color-alt-1-90: oklch(56.778% 0.44773 92.121 / 90%);
  --color-alt-1-80: oklch(56.778% 0.44773 92.121 / 80%);
  --color-alt-1-70: oklch(56.778% 0.44773 92.121 / 70%);
  --color-alt-1-60: oklch(56.778% 0.44773 92.121 / 60%);
  --color-alt-1-50: oklch(56.778% 0.44773 92.121 / 50%);
  --color-alt-1-40: oklch(56.778% 0.44773 92.121 / 40%);
  --color-alt-1-30: oklch(56.778% 0.44773 92.121 / 30%);
  --color-alt-1-20: oklch(56.778% 0.44773 92.121 / 20%);
  --color-alt-1-10: oklch(56.778% 0.44773 92.121 / 10%);
  --color-alt-2: oklch(56.778% 0.14773 92.121);
  --color-alt-2-90: oklch(56.778% 0.14773 92.121 / 90%);
  --color-alt-2-80: oklch(56.778% 0.14773 92.121 / 80%);
  --color-alt-2-70: oklch(56.778% 0.14773 92.121 / 70%);
  --color-alt-2-60: oklch(56.778% 0.14773 92.121 / 60%);
  --color-alt-2-50: oklch(56.778% 0.14773 92.121 / 50%);
  --color-alt-2-40: oklch(56.778% 0.14773 92.121 / 40%);
  --color-alt-2-30: oklch(56.778% 0.14773 92.121 / 30%);
  --color-alt-2-20: oklch(56.778% 0.14773 92.121 / 20%);
  --color-alt-2-10: oklch(56.778% 0.14773 92.121 / 10%);
  --color-alt-3: oklch(36.778% 0.24773 152.121);
  --color-alt-3-90: oklch(36.778% 0.24773 152.121 / 90%);
  --color-alt-3-80: oklch(36.778% 0.24773 152.121 / 80%);
  --color-alt-3-70: oklch(36.778% 0.24773 152.121 / 70%);
  --color-alt-3-60: oklch(36.778% 0.24773 152.121 / 60%);
  --color-alt-3-50: oklch(36.778% 0.24773 152.121 / 50%);
  --color-alt-3-40: oklch(36.778% 0.24773 152.121 / 40%);
  --color-alt-3-30: oklch(36.778% 0.24773 152.121 / 30%);
  --color-alt-3-20: oklch(36.778% 0.24773 152.121 / 20%);
  --color-alt-3-10: oklch(36.778% 0.24773 152.121 / 10%);
  --color-alt-4: oklch(16.778% 0.34773 152.121);
  --color-alt-4-90: oklch(16.778% 0.34773 152.121 / 90%);
  --color-alt-4-80: oklch(16.778% 0.34773 152.121 / 80%);
  --color-alt-4-70: oklch(16.778% 0.34773 152.121 / 70%);
  --color-alt-4-60: oklch(16.778% 0.34773 152.121 / 60%);
  --color-alt-4-50: oklch(16.778% 0.34773 152.121 / 50%);
  --color-alt-4-40: oklch(16.778% 0.34773 152.121 / 40%);
  --color-alt-4-30: oklch(16.778% 0.34773 152.121 / 30%);
  --color-alt-4-20: oklch(16.778% 0.34773 152.121 / 20%);
  --color-alt-4-10: oklch(16.778% 0.34773 152.121 / 10%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: oklch(24.878% 0.04943 177.569);
    --color-bw-match: rgb(0 0 0);
    --color-bw-match-90: rgb(0 0 0 / 90%);
    --color-bw-match-80: rgb(0 0 0 / 80%);
    --color-bw-match-70: rgb(0 0 0 / 70%);
    --color-bw-match-60: rgb(0 0 0 / 60%);
    --color-bw-match-50: rgb(0 0 0 / 50%);
    --color-bw-match-40: rgb(0 0 0 / 40%);
    --color-bw-match-30: rgb(0 0 0 / 30%);
    --color-bw-match-20: rgb(0 0 0 / 20%);
    --color-bw-match-10: rgb(0 0 0 / 10%);
    --color-bw-reverse: rgb(255 255 255);
    --color-bw-reverse-90: rgb(255 255 255 / 90%);
    --color-bw-reverse-80: rgb(255 255 255 / 80%);
    --color-bw-reverse-70: rgb(255 255 255 / 70%);
    --color-bw-reverse-60: rgb(255 255 255 / 60%);
    --color-bw-reverse-50: rgb(255 255 255 / 50%);
    --color-bw-reverse-40: rgb(255 255 255 / 40%);
    --color-bw-reverse-30: rgb(255 255 255 / 30%);
    --color-bw-reverse-20: rgb(255 255 255 / 20%);
    --color-bw-reverse-10: rgb(255 255 255 / 10%);
    --color-primary: oklch(84.878% 0.04943 117.569);
    --color-primary-90: oklch(84.878% 0.04943 117.569 / 90%);
    --color-primary-80: oklch(84.878% 0.04943 117.569 / 80%);
    --color-primary-70: oklch(84.878% 0.04943 117.569 / 70%);
    --color-primary-60: oklch(84.878% 0.04943 117.569 / 60%);
    --color-primary-50: oklch(84.878% 0.04943 117.569 / 50%);
    --color-primary-40: oklch(84.878% 0.04943 117.569 / 40%);
    --color-primary-30: oklch(84.878% 0.04943 117.569 / 30%);
    --color-primary-20: oklch(84.878% 0.04943 117.569 / 20%);
    --color-primary-10: oklch(84.878% 0.04943 117.569 / 10%);
    --color-secondary: oklch(64.878% 0.14943 57.569);
    --color-secondary-90: oklch(64.878% 0.14943 57.569 / 90%);
    --color-secondary-80: oklch(64.878% 0.14943 57.569 / 80%);
    --color-secondary-70: oklch(64.878% 0.14943 57.569 / 70%);
    --color-secondary-60: oklch(64.878% 0.14943 57.569 / 60%);
    --color-secondary-50: oklch(64.878% 0.14943 57.569 / 50%);
    --color-secondary-40: oklch(64.878% 0.14943 57.569 / 40%);
    --color-secondary-30: oklch(64.878% 0.14943 57.569 / 30%);
    --color-secondary-20: oklch(64.878% 0.14943 57.569 / 20%);
    --color-secondary-10: oklch(64.878% 0.14943 57.569 / 10%);
    --color-alt-1: oklch(64.878% 0.44943 357.569);
    --color-alt-1-90: oklch(64.878% 0.44943 357.569 / 90%);
    --color-alt-1-80: oklch(64.878% 0.44943 357.569 / 80%);
    --color-alt-1-70: oklch(64.878% 0.44943 357.569 / 70%);
    --color-alt-1-60: oklch(64.878% 0.44943 357.569 / 60%);
    --color-alt-1-50: oklch(64.878% 0.44943 357.569 / 50%);
    --color-alt-1-40: oklch(64.878% 0.44943 357.569 / 40%);
    --color-alt-1-30: oklch(64.878% 0.44943 357.569 / 30%);
    --color-alt-1-20: oklch(64.878% 0.44943 357.569 / 20%);
    --color-alt-1-10: oklch(64.878% 0.44943 357.569 / 10%);
    --color-alt-2: oklch(64.878% 0.14943 357.569);
    --color-alt-2-90: oklch(64.878% 0.14943 357.569 / 90%);
    --color-alt-2-80: oklch(64.878% 0.14943 357.569 / 80%);
    --color-alt-2-70: oklch(64.878% 0.14943 357.569 / 70%);
    --color-alt-2-60: oklch(64.878% 0.14943 357.569 / 60%);
    --color-alt-2-50: oklch(64.878% 0.14943 357.569 / 50%);
    --color-alt-2-40: oklch(64.878% 0.14943 357.569 / 40%);
    --color-alt-2-30: oklch(64.878% 0.14943 357.569 / 30%);
    --color-alt-2-20: oklch(64.878% 0.14943 357.569 / 20%);
    --color-alt-2-10: oklch(64.878% 0.14943 357.569 / 10%);
    --color-alt-3: oklch(84.878% 0.24943 237.569);
    --color-alt-3-90: oklch(84.878% 0.24943 237.569 / 90%);
    --color-alt-3-80: oklch(84.878% 0.24943 237.569 / 80%);
    --color-alt-3-70: oklch(84.878% 0.24943 237.569 / 70%);
    --color-alt-3-60: oklch(84.878% 0.24943 237.569 / 60%);
    --color-alt-3-50: oklch(84.878% 0.24943 237.569 / 50%);
    --color-alt-3-40: oklch(84.878% 0.24943 237.569 / 40%);
    --color-alt-3-30: oklch(84.878% 0.24943 237.569 / 30%);
    --color-alt-3-20: oklch(84.878% 0.24943 237.569 / 20%);
    --color-alt-3-10: oklch(84.878% 0.24943 237.569 / 10%);
    --color-alt-4: oklch(64.878% 0.14943 237.569);
    --color-alt-4-90: oklch(64.878% 0.14943 237.569 / 90%);
    --color-alt-4-80: oklch(64.878% 0.14943 237.569 / 80%);
    --color-alt-4-70: oklch(64.878% 0.14943 237.569 / 70%);
    --color-alt-4-60: oklch(64.878% 0.14943 237.569 / 60%);
    --color-alt-4-50: oklch(64.878% 0.14943 237.569 / 50%);
    --color-alt-4-40: oklch(64.878% 0.14943 237.569 / 40%);
    --color-alt-4-30: oklch(64.878% 0.14943 237.569 / 30%);
    --color-alt-4-20: oklch(64.878% 0.14943 237.569 / 20%);
    --color-alt-4-10: oklch(64.878% 0.14943 237.569 / 10%);
  }
}


:root {
  --border-primary: 1px solid var(--color-primary);
  --border-primary-90: 1px solid var(--color-primary-90);
  --border-primary-80: 1px solid var(--color-primary-80);
  --border-primary-70: 1px solid var(--color-primary-70);
  --border-primary-60: 1px solid var(--color-primary-60);
  --border-primary-50: 1px solid var(--color-primary-50);
  --border-primary-40: 1px solid var(--color-primary-40);
  --border-primary-30: 1px solid var(--color-primary-30);
  --border-primary-20: 1px solid var(--color-primary-20);
  --border-primary-10: 1px solid var(--color-primary-10);
  --border-secondary: 1px solid var(--color-secondary);
  --border-secondary-90: 1px solid var(--color-secondary-90);
  --border-secondary-80: 1px solid var(--color-secondary-80);
  --border-secondary-70: 1px solid var(--color-secondary-70);
  --border-secondary-60: 1px solid var(--color-secondary-60);
  --border-secondary-50: 1px solid var(--color-secondary-50);
  --border-secondary-40: 1px solid var(--color-secondary-40);
  --border-secondary-30: 1px solid var(--color-secondary-30);
  --border-secondary-20: 1px solid var(--color-secondary-20);
  --border-secondary-10: 1px solid var(--color-secondary-10);
  --border-alt-1: 1px solid var(--color-alt-1);
  --border-alt-1-90: 1px solid var(--color-alt-1-90);
  --border-alt-1-80: 1px solid var(--color-alt-1-80);
  --border-alt-1-70: 1px solid var(--color-alt-1-70);
  --border-alt-1-60: 1px solid var(--color-alt-1-60);
  --border-alt-1-50: 1px solid var(--color-alt-1-50);
  --border-alt-1-40: 1px solid var(--color-alt-1-40);
  --border-alt-1-30: 1px solid var(--color-alt-1-30);
  --border-alt-1-20: 1px solid var(--color-alt-1-20);
  --border-alt-1-10: 1px solid var(--color-alt-1-10);
  --border-alt-2: 1px solid var(--color-alt-2);
  --border-alt-2-90: 1px solid var(--color-alt-2-90);
  --border-alt-2-80: 1px solid var(--color-alt-2-80);
  --border-alt-2-70: 1px solid var(--color-alt-2-70);
  --border-alt-2-60: 1px solid var(--color-alt-2-60);
  --border-alt-2-50: 1px solid var(--color-alt-2-50);
  --border-alt-2-40: 1px solid var(--color-alt-2-40);
  --border-alt-2-30: 1px solid var(--color-alt-2-30);
  --border-alt-2-20: 1px solid var(--color-alt-2-20);
  --border-alt-2-10: 1px solid var(--color-alt-2-10);
  --border-alt-3: 1px solid var(--color-alt-3);
  --border-alt-3-90: 1px solid var(--color-alt-3-90);
  --border-alt-3-80: 1px solid var(--color-alt-3-80);
  --border-alt-3-70: 1px solid var(--color-alt-3-70);
  --border-alt-3-60: 1px solid var(--color-alt-3-60);
  --border-alt-3-50: 1px solid var(--color-alt-3-50);
  --border-alt-3-40: 1px solid var(--color-alt-3-40);
  --border-alt-3-30: 1px solid var(--color-alt-3-30);
  --border-alt-3-20: 1px solid var(--color-alt-3-20);
  --border-alt-3-10: 1px solid var(--color-alt-3-10);
  --border-alt-4: 1px solid var(--color-alt-4);
  --border-alt-4-90: 1px solid var(--color-alt-4-90);
  --border-alt-4-80: 1px solid var(--color-alt-4-80);
  --border-alt-4-70: 1px solid var(--color-alt-4-70);
  --border-alt-4-60: 1px solid var(--color-alt-4-60);
  --border-alt-4-50: 1px solid var(--color-alt-4-50);
  --border-alt-4-40: 1px solid var(--color-alt-4-40);
  --border-alt-4-30: 1px solid var(--color-alt-4-30);
  --border-alt-4-20: 1px solid var(--color-alt-4-20);
  --border-alt-4-10: 1px solid var(--color-alt-4-10);
  --border-radius-xxsmall: 0.1rem;
  --border-radius-xsmall: 0.2rem;
  --border-radius-small: 0.3rem;
  --border-radius-medium: 0.4rem;
  --border-radius-large: 0.5rem;
  --border-radius-xlarge: 0.6rem;
  --border-radius-xxlarge: 0.7rem;
  --font-family-primary: system-ui, sans-serif;
  --font-family-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 
  --font-size-xsmall: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.80rem);
  --font-size-small: clamp(0.94rem, calc(0.92rem + 0.11vw), 1.00rem);
  --font-size-medium: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  --font-size-large: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
  --font-size-xlarge: clamp(1.62rem, calc(1.50rem + 0.58vw), 1.95rem);
  --font-size-xxlarge: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
  --font-size-xxxlarge: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
  --font-size-xxxxlarge: clamp(2.80rem, calc(2.45rem + 1.77vw), 3.82rem);
  --margin-xxsmall: var(--padding-xxsmall);
  --margin-xsmall:  var(--padding-xsmall);
  --margin-small:  var(--padding-small);
  --margin-medium: var(--padding-medium);
  --margin-large: var(--padding-large);
  --margin-xlarge: var(--padding-xlarge);
  --margin-xxlarge: var(--padding-xxlarge);
  --padding-xxsmall: 0.1rem;
  --padding-xsmall: 0.3rem;
  --padding-small: 0.4rem;
  --padding-medium: 0.6rem;
  --padding-large: 1.2rem;
  --padding-xlarge: 3.1rem;
  --padding-xxlarge: 5.2rem;
  --width-xxsmall: min(100vw - 1.4rem, 9rem);
  --width-xsmall: min(100vw - 1.4rem, 19rem);
  --width-small: min(100vw - 1.4rem, 29rem);
  --width-medium: min(100vw - 1.4rem, 39rem);
  --width-large: min(100vw - 1.4rem, 50rem);
  --width-xlarge: min(100vw - 1.4rem, 60rem);
  --width-full: calc(100vw - 1.4rem);
}


*, 
*::before, 
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

::marker {
  color: var(--color-primary);
}

a {
  text-decoration: none;
  color: var(--color-alt-4);
}

a:hover, a:focus {
  color: var(--color-alt-2);
}

.background-color-primary { background-color: var(--color-primary); }
.background-color-primary-90 { background-color: var(--color-primary-90); }
.background-color-primary-80 { background-color: var(--color-primary-80); }
.background-color-primary-70 { background-color: var(--color-primary-70); }
.background-color-primary-60 { background-color: var(--color-primary-60); }
.background-color-primary-50 { background-color: var(--color-primary-50); }
.background-color-primary-40 { background-color: var(--color-primary-40); }
.background-color-primary-30 { background-color: var(--color-primary-30); }
.background-color-primary-20 { background-color: var(--color-primary-20); }
.background-color-primary-10 { background-color: var(--color-primary-10); }
.background-color-secondary { background-color: var(--color-secondary); }
.background-color-secondary-90 { background-color: var(--color-secondary-90); }
.background-color-secondary-80 { background-color: var(--color-secondary-80); }
.background-color-secondary-70 { background-color: var(--color-secondary-70); }
.background-color-secondary-60 { background-color: var(--color-secondary-60); }
.background-color-secondary-50 { background-color: var(--color-secondary-50); }
.background-color-secondary-40 { background-color: var(--color-secondary-40); }
.background-color-secondary-30 { background-color: var(--color-secondary-30); }
.background-color-secondary-20 { background-color: var(--color-secondary-20); }
.background-color-secondary-10 { background-color: var(--color-secondary-10); }
.background-color-alt-1 { background-color: var(--color-alt-1); }
.background-color-alt-1-90 { background-color: var(--color-alt-1-90); }
.background-color-alt-1-80 { background-color: var(--color-alt-1-80); }
.background-color-alt-1-70 { background-color: var(--color-alt-1-70); }
.background-color-alt-1-60 { background-color: var(--color-alt-1-60); }
.background-color-alt-1-50 { background-color: var(--color-alt-1-50); }
.background-color-alt-1-40 { background-color: var(--color-alt-1-40); }
.background-color-alt-1-30 { background-color: var(--color-alt-1-30); }
.background-color-alt-1-20 { background-color: var(--color-alt-1-20); }
.background-color-alt-1-10 { background-color: var(--color-alt-1-10); }
.background-color-alt-2 { background-color: var(--color-alt-2); }
.background-color-alt-2-90 { background-color: var(--color-alt-2-90); }
.background-color-alt-2-80 { background-color: var(--color-alt-2-80); }
.background-color-alt-2-70 { background-color: var(--color-alt-2-70); }
.background-color-alt-2-60 { background-color: var(--color-alt-2-60); }
.background-color-alt-2-50 { background-color: var(--color-alt-2-50); }
.background-color-alt-2-40 { background-color: var(--color-alt-2-40); }
.background-color-alt-2-30 { background-color: var(--color-alt-2-30); }
.background-color-alt-2-20 { background-color: var(--color-alt-2-20); }
.background-color-alt-2-10 { background-color: var(--color-alt-2-10); }
.background-color-alt-3 { background-color: var(--color-alt-3); }
.background-color-alt-3-90 { background-color: var(--color-alt-3-90); }
.background-color-alt-3-80 { background-color: var(--color-alt-3-80); }
.background-color-alt-3-70 { background-color: var(--color-alt-3-70); }
.background-color-alt-3-60 { background-color: var(--color-alt-3-60); }
.background-color-alt-3-50 { background-color: var(--color-alt-3-50); }
.background-color-alt-3-40 { background-color: var(--color-alt-3-40); }
.background-color-alt-3-30 { background-color: var(--color-alt-3-30); }
.background-color-alt-3-20 { background-color: var(--color-alt-3-20); }
.background-color-alt-3-10 { background-color: var(--color-alt-3-10); }
.background-color-alt-4 { background-color: var(--color-alt-4); }
.background-color-alt-4-90 { background-color: var(--color-alt-4-90); }
.background-color-alt-4-80 { background-color: var(--color-alt-4-80); }
.background-color-alt-4-70 { background-color: var(--color-alt-4-70); }
.background-color-alt-4-60 { background-color: var(--color-alt-4-60); }
.background-color-alt-4-50 { background-color: var(--color-alt-4-50); }
.background-color-alt-4-40 { background-color: var(--color-alt-4-40); }
.background-color-alt-4-30 { background-color: var(--color-alt-4-30); }
.background-color-alt-4-20 { background-color: var(--color-alt-4-20); }
.background-color-alt-4-10 { background-color: var(--color-alt-4-10); }

body {
  background-color: var(--color-background);
  color: var(--color-primary);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-medium);
  line-height: 1.5; 
}

.border-color-primary { border: 1px solid var(--color-primary); }
.border-color-primary-90 { border: 1px solid var(--color-primary-90); }
.border-color-primary-80 { border: 1px solid var(--color-primary-80); }
.border-color-primary-70 { border: 1px solid var(--color-primary-70); }
.border-color-primary-60 { border: 1px solid var(--color-primary-60); }
.border-color-primary-50 { border: 1px solid var(--color-primary-50); }
.border-color-primary-40 { border: 1px solid var(--color-primary-40); }
.border-color-primary-30 { border: 1px solid var(--color-primary-30); }
.border-color-primary-20 { border: 1px solid var(--color-primary-20); }
.border-color-primary-10 { border: 1px solid var(--color-primary-10); }
.border-bottom-color-primary { border-bottom: 1px solid var(--color-primary); }
.border-bottom-color-primary-90 { border-bottom: 1px solid var(--color-primary-90); }
.border-bottom-color-primary-80 { border-bottom: 1px solid var(--color-primary-80); }
.border-bottom-color-primary-70 { border-bottom: 1px solid var(--color-primary-70); }
.border-bottom-color-primary-60 { border-bottom: 1px solid var(--color-primary-60); }
.border-bottom-color-primary-50 { border-bottom: 1px solid var(--color-primary-50); }
.border-bottom-color-primary-40 { border-bottom: 1px solid var(--color-primary-40); }
.border-bottom-color-primary-30 { border-bottom: 1px solid var(--color-primary-30); }
.border-bottom-color-primary-20 { border-bottom: 1px solid var(--color-primary-20); }
.border-bottom-color-primary-10 { border-bottom: 1px solid var(--color-primary-10); }
.border-left-color-primary { border-left: 1px solid var(--color-primary); }
.border-left-color-primary-90 { border-left: 1px solid var(--color-primary-90); }
.border-left-color-primary-80 { border-left: 1px solid var(--color-primary-80); }
.border-left-color-primary-70 { border-left: 1px solid var(--color-primary-70); }
.border-left-color-primary-60 { border-left: 1px solid var(--color-primary-60); }
.border-left-color-primary-50 { border-left: 1px solid var(--color-primary-50); }
.border-left-color-primary-40 { border-left: 1px solid var(--color-primary-40); }
.border-left-color-primary-30 { border-left: 1px solid var(--color-primary-30); }
.border-left-color-primary-20 { border-left: 1px solid var(--color-primary-20); }
.border-left-color-primary-10 { border-left: 1px solid var(--color-primary-10); }
.border-right-color-primary { border-right: 1px solid var(--color-primary); }
.border-right-color-primary-90 { border-right: 1px solid var(--color-primary-90); }
.border-right-color-primary-80 { border-right: 1px solid var(--color-primary-80); }
.border-right-color-primary-70 { border-right: 1px solid var(--color-primary-70); }
.border-right-color-primary-60 { border-right: 1px solid var(--color-primary-60); }
.border-right-color-primary-50 { border-right: 1px solid var(--color-primary-50); }
.border-right-color-primary-40 { border-right: 1px solid var(--color-primary-40); }
.border-right-color-primary-30 { border-right: 1px solid var(--color-primary-30); }
.border-right-color-primary-20 { border-right: 1px solid var(--color-primary-20); }
.border-right-color-primary-10 { border-right: 1px solid var(--color-primary-10); }
.border-top-color-primary { border-top: 1px solid var(--color-primary); }
.border-top-color-primary-90 { border-top: 1px solid var(--color-primary-90); }
.border-top-color-primary-80 { border-top: 1px solid var(--color-primary-80); }
.border-top-color-primary-70 { border-top: 1px solid var(--color-primary-70); }
.border-top-color-primary-60 { border-top: 1px solid var(--color-primary-60); }
.border-top-color-primary-50 { border-top: 1px solid var(--color-primary-50); }
.border-top-color-primary-40 { border-top: 1px solid var(--color-primary-40); }
.border-top-color-primary-30 { border-top: 1px solid var(--color-primary-30); }
.border-top-color-primary-20 { border-top: 1px solid var(--color-primary-20); }
.border-top-color-primary-10 { border-top: 1px solid var(--color-primary-10); }
.border-color-secondary { border: 1px solid var(--color-secondary); }
.border-color-secondary-90 { border: 1px solid var(--color-secondary-90); }
.border-color-secondary-80 { border: 1px solid var(--color-secondary-80); }
.border-color-secondary-70 { border: 1px solid var(--color-secondary-70); }
.border-color-secondary-60 { border: 1px solid var(--color-secondary-60); }
.border-color-secondary-50 { border: 1px solid var(--color-secondary-50); }
.border-color-secondary-40 { border: 1px solid var(--color-secondary-40); }
.border-color-secondary-30 { border: 1px solid var(--color-secondary-30); }
.border-color-secondary-20 { border: 1px solid var(--color-secondary-20); }
.border-color-secondary-10 { border: 1px solid var(--color-secondary-10); }
.border-bottom-color-secondary { border-bottom: 1px solid var(--color-secondary); }
.border-bottom-color-secondary-90 { border-bottom: 1px solid var(--color-secondary-90); }
.border-bottom-color-secondary-80 { border-bottom: 1px solid var(--color-secondary-80); }
.border-bottom-color-secondary-70 { border-bottom: 1px solid var(--color-secondary-70); }
.border-bottom-color-secondary-60 { border-bottom: 1px solid var(--color-secondary-60); }
.border-bottom-color-secondary-50 { border-bottom: 1px solid var(--color-secondary-50); }
.border-bottom-color-secondary-40 { border-bottom: 1px solid var(--color-secondary-40); }
.border-bottom-color-secondary-30 { border-bottom: 1px solid var(--color-secondary-30); }
.border-bottom-color-secondary-20 { border-bottom: 1px solid var(--color-secondary-20); }
.border-bottom-color-secondary-10 { border-bottom: 1px solid var(--color-secondary-10); }
.border-left-color-secondary { border-left: 1px solid var(--color-secondary); }
.border-left-color-secondary-90 { border-left: 1px solid var(--color-secondary-90); }
.border-left-color-secondary-80 { border-left: 1px solid var(--color-secondary-80); }
.border-left-color-secondary-70 { border-left: 1px solid var(--color-secondary-70); }
.border-left-color-secondary-60 { border-left: 1px solid var(--color-secondary-60); }
.border-left-color-secondary-50 { border-left: 1px solid var(--color-secondary-50); }
.border-left-color-secondary-40 { border-left: 1px solid var(--color-secondary-40); }
.border-left-color-secondary-30 { border-left: 1px solid var(--color-secondary-30); }
.border-left-color-secondary-20 { border-left: 1px solid var(--color-secondary-20); }
.border-left-color-secondary-10 { border-left: 1px solid var(--color-secondary-10); }
.border-right-color-secondary { border-right: 1px solid var(--color-secondary); }
.border-right-color-secondary-90 { border-right: 1px solid var(--color-secondary-90); }
.border-right-color-secondary-80 { border-right: 1px solid var(--color-secondary-80); }
.border-right-color-secondary-70 { border-right: 1px solid var(--color-secondary-70); }
.border-right-color-secondary-60 { border-right: 1px solid var(--color-secondary-60); }
.border-right-color-secondary-50 { border-right: 1px solid var(--color-secondary-50); }
.border-right-color-secondary-40 { border-right: 1px solid var(--color-secondary-40); }
.border-right-color-secondary-30 { border-right: 1px solid var(--color-secondary-30); }
.border-right-color-secondary-20 { border-right: 1px solid var(--color-secondary-20); }
.border-right-color-secondary-10 { border-right: 1px solid var(--color-secondary-10); }
.border-top-color-secondary { border-top: 1px solid var(--color-secondary); }
.border-top-color-secondary-90 { border-top: 1px solid var(--color-secondary-90); }
.border-top-color-secondary-80 { border-top: 1px solid var(--color-secondary-80); }
.border-top-color-secondary-70 { border-top: 1px solid var(--color-secondary-70); }
.border-top-color-secondary-60 { border-top: 1px solid var(--color-secondary-60); }
.border-top-color-secondary-50 { border-top: 1px solid var(--color-secondary-50); }
.border-top-color-secondary-40 { border-top: 1px solid var(--color-secondary-40); }
.border-top-color-secondary-30 { border-top: 1px solid var(--color-secondary-30); }
.border-top-color-secondary-20 { border-top: 1px solid var(--color-secondary-20); }
.border-top-color-secondary-10 { border-top: 1px solid var(--color-secondary-10); }
.border-color-alt-1 { border: 1px solid var(--color-alt-1); }
.border-color-alt-1-90 { border: 1px solid var(--color-alt-1-90); }
.border-color-alt-1-80 { border: 1px solid var(--color-alt-1-80); }
.border-color-alt-1-70 { border: 1px solid var(--color-alt-1-70); }
.border-color-alt-1-60 { border: 1px solid var(--color-alt-1-60); }
.border-color-alt-1-50 { border: 1px solid var(--color-alt-1-50); }
.border-color-alt-1-40 { border: 1px solid var(--color-alt-1-40); }
.border-color-alt-1-30 { border: 1px solid var(--color-alt-1-30); }
.border-color-alt-1-20 { border: 1px solid var(--color-alt-1-20); }
.border-color-alt-1-10 { border: 1px solid var(--color-alt-1-10); }
.border-bottom-color-alt-1 { border-bottom: 1px solid var(--color-alt-1); }
.border-bottom-color-alt-1-90 { border-bottom: 1px solid var(--color-alt-1-90); }
.border-bottom-color-alt-1-80 { border-bottom: 1px solid var(--color-alt-1-80); }
.border-bottom-color-alt-1-70 { border-bottom: 1px solid var(--color-alt-1-70); }
.border-bottom-color-alt-1-60 { border-bottom: 1px solid var(--color-alt-1-60); }
.border-bottom-color-alt-1-50 { border-bottom: 1px solid var(--color-alt-1-50); }
.border-bottom-color-alt-1-40 { border-bottom: 1px solid var(--color-alt-1-40); }
.border-bottom-color-alt-1-30 { border-bottom: 1px solid var(--color-alt-1-30); }
.border-bottom-color-alt-1-20 { border-bottom: 1px solid var(--color-alt-1-20); }
.border-bottom-color-alt-1-10 { border-bottom: 1px solid var(--color-alt-1-10); }
.border-left-color-alt-1 { border-left: 1px solid var(--color-alt-1); }
.border-left-color-alt-1-90 { border-left: 1px solid var(--color-alt-1-90); }
.border-left-color-alt-1-80 { border-left: 1px solid var(--color-alt-1-80); }
.border-left-color-alt-1-70 { border-left: 1px solid var(--color-alt-1-70); }
.border-left-color-alt-1-60 { border-left: 1px solid var(--color-alt-1-60); }
.border-left-color-alt-1-50 { border-left: 1px solid var(--color-alt-1-50); }
.border-left-color-alt-1-40 { border-left: 1px solid var(--color-alt-1-40); }
.border-left-color-alt-1-30 { border-left: 1px solid var(--color-alt-1-30); }
.border-left-color-alt-1-20 { border-left: 1px solid var(--color-alt-1-20); }
.border-left-color-alt-1-10 { border-left: 1px solid var(--color-alt-1-10); }
.border-right-color-alt-1 { border-right: 1px solid var(--color-alt-1); }
.border-right-color-alt-1-90 { border-right: 1px solid var(--color-alt-1-90); }
.border-right-color-alt-1-80 { border-right: 1px solid var(--color-alt-1-80); }
.border-right-color-alt-1-70 { border-right: 1px solid var(--color-alt-1-70); }
.border-right-color-alt-1-60 { border-right: 1px solid var(--color-alt-1-60); }
.border-right-color-alt-1-50 { border-right: 1px solid var(--color-alt-1-50); }
.border-right-color-alt-1-40 { border-right: 1px solid var(--color-alt-1-40); }
.border-right-color-alt-1-30 { border-right: 1px solid var(--color-alt-1-30); }
.border-right-color-alt-1-20 { border-right: 1px solid var(--color-alt-1-20); }
.border-right-color-alt-1-10 { border-right: 1px solid var(--color-alt-1-10); }
.border-top-color-alt-1 { border-top: 1px solid var(--color-alt-1); }
.border-top-color-alt-1-90 { border-top: 1px solid var(--color-alt-1-90); }
.border-top-color-alt-1-80 { border-top: 1px solid var(--color-alt-1-80); }
.border-top-color-alt-1-70 { border-top: 1px solid var(--color-alt-1-70); }
.border-top-color-alt-1-60 { border-top: 1px solid var(--color-alt-1-60); }
.border-top-color-alt-1-50 { border-top: 1px solid var(--color-alt-1-50); }
.border-top-color-alt-1-40 { border-top: 1px solid var(--color-alt-1-40); }
.border-top-color-alt-1-30 { border-top: 1px solid var(--color-alt-1-30); }
.border-top-color-alt-1-20 { border-top: 1px solid var(--color-alt-1-20); }
.border-top-color-alt-1-10 { border-top: 1px solid var(--color-alt-1-10); }
.border-color-alt-2 { border: 1px solid var(--color-alt-2); }
.border-color-alt-2-90 { border: 1px solid var(--color-alt-2-90); }
.border-color-alt-2-80 { border: 1px solid var(--color-alt-2-80); }
.border-color-alt-2-70 { border: 1px solid var(--color-alt-2-70); }
.border-color-alt-2-60 { border: 1px solid var(--color-alt-2-60); }
.border-color-alt-2-50 { border: 1px solid var(--color-alt-2-50); }
.border-color-alt-2-40 { border: 1px solid var(--color-alt-2-40); }
.border-color-alt-2-30 { border: 1px solid var(--color-alt-2-30); }
.border-color-alt-2-20 { border: 1px solid var(--color-alt-2-20); }
.border-color-alt-2-10 { border: 1px solid var(--color-alt-2-10); }
.border-bottom-color-alt-2 { border-bottom: 1px solid var(--color-alt-2); }
.border-bottom-color-alt-2-90 { border-bottom: 1px solid var(--color-alt-2-90); }
.border-bottom-color-alt-2-80 { border-bottom: 1px solid var(--color-alt-2-80); }
.border-bottom-color-alt-2-70 { border-bottom: 1px solid var(--color-alt-2-70); }
.border-bottom-color-alt-2-60 { border-bottom: 1px solid var(--color-alt-2-60); }
.border-bottom-color-alt-2-50 { border-bottom: 1px solid var(--color-alt-2-50); }
.border-bottom-color-alt-2-40 { border-bottom: 1px solid var(--color-alt-2-40); }
.border-bottom-color-alt-2-30 { border-bottom: 1px solid var(--color-alt-2-30); }
.border-bottom-color-alt-2-20 { border-bottom: 1px solid var(--color-alt-2-20); }
.border-bottom-color-alt-2-10 { border-bottom: 1px solid var(--color-alt-2-10); }
.border-left-color-alt-2 { border-left: 1px solid var(--color-alt-2); }
.border-left-color-alt-2-90 { border-left: 1px solid var(--color-alt-2-90); }
.border-left-color-alt-2-80 { border-left: 1px solid var(--color-alt-2-80); }
.border-left-color-alt-2-70 { border-left: 1px solid var(--color-alt-2-70); }
.border-left-color-alt-2-60 { border-left: 1px solid var(--color-alt-2-60); }
.border-left-color-alt-2-50 { border-left: 1px solid var(--color-alt-2-50); }
.border-left-color-alt-2-40 { border-left: 1px solid var(--color-alt-2-40); }
.border-left-color-alt-2-30 { border-left: 1px solid var(--color-alt-2-30); }
.border-left-color-alt-2-20 { border-left: 1px solid var(--color-alt-2-20); }
.border-left-color-alt-2-10 { border-left: 1px solid var(--color-alt-2-10); }
.border-right-color-alt-2 { border-right: 1px solid var(--color-alt-2); }
.border-right-color-alt-2-90 { border-right: 1px solid var(--color-alt-2-90); }
.border-right-color-alt-2-80 { border-right: 1px solid var(--color-alt-2-80); }
.border-right-color-alt-2-70 { border-right: 1px solid var(--color-alt-2-70); }
.border-right-color-alt-2-60 { border-right: 1px solid var(--color-alt-2-60); }
.border-right-color-alt-2-50 { border-right: 1px solid var(--color-alt-2-50); }
.border-right-color-alt-2-40 { border-right: 1px solid var(--color-alt-2-40); }
.border-right-color-alt-2-30 { border-right: 1px solid var(--color-alt-2-30); }
.border-right-color-alt-2-20 { border-right: 1px solid var(--color-alt-2-20); }
.border-right-color-alt-2-10 { border-right: 1px solid var(--color-alt-2-10); }
.border-top-color-alt-2 { border-top: 1px solid var(--color-alt-2); }
.border-top-color-alt-2-90 { border-top: 1px solid var(--color-alt-2-90); }
.border-top-color-alt-2-80 { border-top: 1px solid var(--color-alt-2-80); }
.border-top-color-alt-2-70 { border-top: 1px solid var(--color-alt-2-70); }
.border-top-color-alt-2-60 { border-top: 1px solid var(--color-alt-2-60); }
.border-top-color-alt-2-50 { border-top: 1px solid var(--color-alt-2-50); }
.border-top-color-alt-2-40 { border-top: 1px solid var(--color-alt-2-40); }
.border-top-color-alt-2-30 { border-top: 1px solid var(--color-alt-2-30); }
.border-top-color-alt-2-20 { border-top: 1px solid var(--color-alt-2-20); }
.border-top-color-alt-2-10 { border-top: 1px solid var(--color-alt-2-10); }
.border-color-alt-3 { border: 1px solid var(--color-alt-3); }
.border-color-alt-3-90 { border: 1px solid var(--color-alt-3-90); }
.border-color-alt-3-80 { border: 1px solid var(--color-alt-3-80); }
.border-color-alt-3-70 { border: 1px solid var(--color-alt-3-70); }
.border-color-alt-3-60 { border: 1px solid var(--color-alt-3-60); }
.border-color-alt-3-50 { border: 1px solid var(--color-alt-3-50); }
.border-color-alt-3-40 { border: 1px solid var(--color-alt-3-40); }
.border-color-alt-3-30 { border: 1px solid var(--color-alt-3-30); }
.border-color-alt-3-20 { border: 1px solid var(--color-alt-3-20); }
.border-color-alt-3-10 { border: 1px solid var(--color-alt-3-10); }
.border-bottom-color-alt-3 { border-bottom: 1px solid var(--color-alt-3); }
.border-bottom-color-alt-3-90 { border-bottom: 1px solid var(--color-alt-3-90); }
.border-bottom-color-alt-3-80 { border-bottom: 1px solid var(--color-alt-3-80); }
.border-bottom-color-alt-3-70 { border-bottom: 1px solid var(--color-alt-3-70); }
.border-bottom-color-alt-3-60 { border-bottom: 1px solid var(--color-alt-3-60); }
.border-bottom-color-alt-3-50 { border-bottom: 1px solid var(--color-alt-3-50); }
.border-bottom-color-alt-3-40 { border-bottom: 1px solid var(--color-alt-3-40); }
.border-bottom-color-alt-3-30 { border-bottom: 1px solid var(--color-alt-3-30); }
.border-bottom-color-alt-3-20 { border-bottom: 1px solid var(--color-alt-3-20); }
.border-bottom-color-alt-3-10 { border-bottom: 1px solid var(--color-alt-3-10); }
.border-left-color-alt-3 { border-left: 1px solid var(--color-alt-3); }
.border-left-color-alt-3-90 { border-left: 1px solid var(--color-alt-3-90); }
.border-left-color-alt-3-80 { border-left: 1px solid var(--color-alt-3-80); }
.border-left-color-alt-3-70 { border-left: 1px solid var(--color-alt-3-70); }
.border-left-color-alt-3-60 { border-left: 1px solid var(--color-alt-3-60); }
.border-left-color-alt-3-50 { border-left: 1px solid var(--color-alt-3-50); }
.border-left-color-alt-3-40 { border-left: 1px solid var(--color-alt-3-40); }
.border-left-color-alt-3-30 { border-left: 1px solid var(--color-alt-3-30); }
.border-left-color-alt-3-20 { border-left: 1px solid var(--color-alt-3-20); }
.border-left-color-alt-3-10 { border-left: 1px solid var(--color-alt-3-10); }
.border-right-color-alt-3 { border-right: 1px solid var(--color-alt-3); }
.border-right-color-alt-3-90 { border-right: 1px solid var(--color-alt-3-90); }
.border-right-color-alt-3-80 { border-right: 1px solid var(--color-alt-3-80); }
.border-right-color-alt-3-70 { border-right: 1px solid var(--color-alt-3-70); }
.border-right-color-alt-3-60 { border-right: 1px solid var(--color-alt-3-60); }
.border-right-color-alt-3-50 { border-right: 1px solid var(--color-alt-3-50); }
.border-right-color-alt-3-40 { border-right: 1px solid var(--color-alt-3-40); }
.border-right-color-alt-3-30 { border-right: 1px solid var(--color-alt-3-30); }
.border-right-color-alt-3-20 { border-right: 1px solid var(--color-alt-3-20); }
.border-right-color-alt-3-10 { border-right: 1px solid var(--color-alt-3-10); }
.border-top-color-alt-3 { border-top: 1px solid var(--color-alt-3); }
.border-top-color-alt-3-90 { border-top: 1px solid var(--color-alt-3-90); }
.border-top-color-alt-3-80 { border-top: 1px solid var(--color-alt-3-80); }
.border-top-color-alt-3-70 { border-top: 1px solid var(--color-alt-3-70); }
.border-top-color-alt-3-60 { border-top: 1px solid var(--color-alt-3-60); }
.border-top-color-alt-3-50 { border-top: 1px solid var(--color-alt-3-50); }
.border-top-color-alt-3-40 { border-top: 1px solid var(--color-alt-3-40); }
.border-top-color-alt-3-30 { border-top: 1px solid var(--color-alt-3-30); }
.border-top-color-alt-3-20 { border-top: 1px solid var(--color-alt-3-20); }
.border-top-color-alt-3-10 { border-top: 1px solid var(--color-alt-3-10); }
.border-color-alt-4 { border: 1px solid var(--color-alt-4); }
.border-color-alt-4-90 { border: 1px solid var(--color-alt-4-90); }
.border-color-alt-4-80 { border: 1px solid var(--color-alt-4-80); }
.border-color-alt-4-70 { border: 1px solid var(--color-alt-4-70); }
.border-color-alt-4-60 { border: 1px solid var(--color-alt-4-60); }
.border-color-alt-4-50 { border: 1px solid var(--color-alt-4-50); }
.border-color-alt-4-40 { border: 1px solid var(--color-alt-4-40); }
.border-color-alt-4-30 { border: 1px solid var(--color-alt-4-30); }
.border-color-alt-4-20 { border: 1px solid var(--color-alt-4-20); }
.border-color-alt-4-10 { border: 1px solid var(--color-alt-4-10); }
.border-bottom-color-alt-4 { border-bottom: 1px solid var(--color-alt-4); }
.border-bottom-color-alt-4-90 { border-bottom: 1px solid var(--color-alt-4-90); }
.border-bottom-color-alt-4-80 { border-bottom: 1px solid var(--color-alt-4-80); }
.border-bottom-color-alt-4-70 { border-bottom: 1px solid var(--color-alt-4-70); }
.border-bottom-color-alt-4-60 { border-bottom: 1px solid var(--color-alt-4-60); }
.border-bottom-color-alt-4-50 { border-bottom: 1px solid var(--color-alt-4-50); }
.border-bottom-color-alt-4-40 { border-bottom: 1px solid var(--color-alt-4-40); }
.border-bottom-color-alt-4-30 { border-bottom: 1px solid var(--color-alt-4-30); }
.border-bottom-color-alt-4-20 { border-bottom: 1px solid var(--color-alt-4-20); }
.border-bottom-color-alt-4-10 { border-bottom: 1px solid var(--color-alt-4-10); }
.border-left-color-alt-4 { border-left: 1px solid var(--color-alt-4); }
.border-left-color-alt-4-90 { border-left: 1px solid var(--color-alt-4-90); }
.border-left-color-alt-4-80 { border-left: 1px solid var(--color-alt-4-80); }
.border-left-color-alt-4-70 { border-left: 1px solid var(--color-alt-4-70); }
.border-left-color-alt-4-60 { border-left: 1px solid var(--color-alt-4-60); }
.border-left-color-alt-4-50 { border-left: 1px solid var(--color-alt-4-50); }
.border-left-color-alt-4-40 { border-left: 1px solid var(--color-alt-4-40); }
.border-left-color-alt-4-30 { border-left: 1px solid var(--color-alt-4-30); }
.border-left-color-alt-4-20 { border-left: 1px solid var(--color-alt-4-20); }
.border-left-color-alt-4-10 { border-left: 1px solid var(--color-alt-4-10); }
.border-right-color-alt-4 { border-right: 1px solid var(--color-alt-4); }
.border-right-color-alt-4-90 { border-right: 1px solid var(--color-alt-4-90); }
.border-right-color-alt-4-80 { border-right: 1px solid var(--color-alt-4-80); }
.border-right-color-alt-4-70 { border-right: 1px solid var(--color-alt-4-70); }
.border-right-color-alt-4-60 { border-right: 1px solid var(--color-alt-4-60); }
.border-right-color-alt-4-50 { border-right: 1px solid var(--color-alt-4-50); }
.border-right-color-alt-4-40 { border-right: 1px solid var(--color-alt-4-40); }
.border-right-color-alt-4-30 { border-right: 1px solid var(--color-alt-4-30); }
.border-right-color-alt-4-20 { border-right: 1px solid var(--color-alt-4-20); }
.border-right-color-alt-4-10 { border-right: 1px solid var(--color-alt-4-10); }
.border-top-color-alt-4 { border-top: 1px solid var(--color-alt-4); }
.border-top-color-alt-4-90 { border-top: 1px solid var(--color-alt-4-90); }
.border-top-color-alt-4-80 { border-top: 1px solid var(--color-alt-4-80); }
.border-top-color-alt-4-70 { border-top: 1px solid var(--color-alt-4-70); }
.border-top-color-alt-4-60 { border-top: 1px solid var(--color-alt-4-60); }
.border-top-color-alt-4-50 { border-top: 1px solid var(--color-alt-4-50); }
.border-top-color-alt-4-40 { border-top: 1px solid var(--color-alt-4-40); }
.border-top-color-alt-4-30 { border-top: 1px solid var(--color-alt-4-30); }
.border-top-color-alt-4-20 { border-top: 1px solid var(--color-alt-4-20); }
.border-top-color-alt-4-10 { border-top: 1px solid var(--color-alt-4-10); }

.border-color-3-primary { border: 3px solid var(--color-primary); }
.border-color-3-primary-90 { border: 3px solid var(--color-primary-90); }
.border-color-3-primary-80 { border: 3px solid var(--color-primary-80); }
.border-color-3-primary-70 { border: 3px solid var(--color-primary-70); }
.border-color-3-primary-60 { border: 3px solid var(--color-primary-60); }
.border-color-3-primary-50 { border: 3px solid var(--color-primary-50); }
.border-color-3-primary-40 { border: 3px solid var(--color-primary-40); }
.border-color-3-primary-30 { border: 3px solid var(--color-primary-30); }
.border-color-3-primary-20 { border: 3px solid var(--color-primary-20); }
.border-color-3-primary-10 { border: 3px solid var(--color-primary-10); }
.border-bottom-3-color-primary { border-bottom: 3px solid var(--color-primary); }
.border-bottom-3-color-primary-90 { border-bottom: 3px solid var(--color-primary-90); }
.border-bottom-3-color-primary-80 { border-bottom: 3px solid var(--color-primary-80); }
.border-bottom-3-color-primary-70 { border-bottom: 3px solid var(--color-primary-70); }
.border-bottom-3-color-primary-60 { border-bottom: 3px solid var(--color-primary-60); }
.border-bottom-3-color-primary-50 { border-bottom: 3px solid var(--color-primary-50); }
.border-bottom-3-color-primary-40 { border-bottom: 3px solid var(--color-primary-40); }
.border-bottom-3-color-primary-30 { border-bottom: 3px solid var(--color-primary-30); }
.border-bottom-3-color-primary-20 { border-bottom: 3px solid var(--color-primary-20); }
.border-bottom-3-color-primary-10 { border-bottom: 3px solid var(--color-primary-10); }
.border-left-3-color-primary { border-left: 3px solid var(--color-primary); }
.border-left-3-color-primary-90 { border-left: 3px solid var(--color-primary-90); }
.border-left-3-color-primary-80 { border-left: 3px solid var(--color-primary-80); }
.border-left-3-color-primary-70 { border-left: 3px solid var(--color-primary-70); }
.border-left-3-color-primary-60 { border-left: 3px solid var(--color-primary-60); }
.border-left-3-color-primary-50 { border-left: 3px solid var(--color-primary-50); }
.border-left-3-color-primary-40 { border-left: 3px solid var(--color-primary-40); }
.border-left-3-color-primary-30 { border-left: 3px solid var(--color-primary-30); }
.border-left-3-color-primary-20 { border-left: 3px solid var(--color-primary-20); }
.border-left-3-color-primary-10 { border-left: 3px solid var(--color-primary-10); }
.border-right-3-color-primary { border-right: 3px solid var(--color-primary); }
.border-right-3-color-primary-90 { border-right: 3px solid var(--color-primary-90); }
.border-right-3-color-primary-80 { border-right: 3px solid var(--color-primary-80); }
.border-right-3-color-primary-70 { border-right: 3px solid var(--color-primary-70); }
.border-right-3-color-primary-60 { border-right: 3px solid var(--color-primary-60); }
.border-right-3-color-primary-50 { border-right: 3px solid var(--color-primary-50); }
.border-right-3-color-primary-40 { border-right: 3px solid var(--color-primary-40); }
.border-right-3-color-primary-30 { border-right: 3px solid var(--color-primary-30); }
.border-right-3-color-primary-20 { border-right: 3px solid var(--color-primary-20); }
.border-right-3-color-primary-10 { border-right: 3px solid var(--color-primary-10); }
.border-top-3-color-primary { border-top: 3px solid var(--color-primary); }
.border-top-3-color-primary-90 { border-top: 3px solid var(--color-primary-90); }
.border-top-3-color-primary-80 { border-top: 3px solid var(--color-primary-80); }
.border-top-3-color-primary-70 { border-top: 3px solid var(--color-primary-70); }
.border-top-3-color-primary-60 { border-top: 3px solid var(--color-primary-60); }
.border-top-3-color-primary-50 { border-top: 3px solid var(--color-primary-50); }
.border-top-3-color-primary-40 { border-top: 3px solid var(--color-primary-40); }
.border-top-3-color-primary-30 { border-top: 3px solid var(--color-primary-30); }
.border-top-3-color-primary-20 { border-top: 3px solid var(--color-primary-20); }
.border-top-3-color-primary-10 { border-top: 3px solid var(--color-primary-10); }
.border-color-3-secondary { border: 3px solid var(--color-secondary); }
.border-color-3-secondary-90 { border: 3px solid var(--color-secondary-90); }
.border-color-3-secondary-80 { border: 3px solid var(--color-secondary-80); }
.border-color-3-secondary-70 { border: 3px solid var(--color-secondary-70); }
.border-color-3-secondary-60 { border: 3px solid var(--color-secondary-60); }
.border-color-3-secondary-50 { border: 3px solid var(--color-secondary-50); }
.border-color-3-secondary-40 { border: 3px solid var(--color-secondary-40); }
.border-color-3-secondary-30 { border: 3px solid var(--color-secondary-30); }
.border-color-3-secondary-20 { border: 3px solid var(--color-secondary-20); }
.border-color-3-secondary-10 { border: 3px solid var(--color-secondary-10); }
.border-bottom-3-color-secondary { border-bottom: 3px solid var(--color-secondary); }
.border-bottom-3-color-secondary-90 { border-bottom: 3px solid var(--color-secondary-90); }
.border-bottom-3-color-secondary-80 { border-bottom: 3px solid var(--color-secondary-80); }
.border-bottom-3-color-secondary-70 { border-bottom: 3px solid var(--color-secondary-70); }
.border-bottom-3-color-secondary-60 { border-bottom: 3px solid var(--color-secondary-60); }
.border-bottom-3-color-secondary-50 { border-bottom: 3px solid var(--color-secondary-50); }
.border-bottom-3-color-secondary-40 { border-bottom: 3px solid var(--color-secondary-40); }
.border-bottom-3-color-secondary-30 { border-bottom: 3px solid var(--color-secondary-30); }
.border-bottom-3-color-secondary-20 { border-bottom: 3px solid var(--color-secondary-20); }
.border-bottom-3-color-secondary-10 { border-bottom: 3px solid var(--color-secondary-10); }
.border-left-3-color-secondary { border-left: 3px solid var(--color-secondary); }
.border-left-3-color-secondary-90 { border-left: 3px solid var(--color-secondary-90); }
.border-left-3-color-secondary-80 { border-left: 3px solid var(--color-secondary-80); }
.border-left-3-color-secondary-70 { border-left: 3px solid var(--color-secondary-70); }
.border-left-3-color-secondary-60 { border-left: 3px solid var(--color-secondary-60); }
.border-left-3-color-secondary-50 { border-left: 3px solid var(--color-secondary-50); }
.border-left-3-color-secondary-40 { border-left: 3px solid var(--color-secondary-40); }
.border-left-3-color-secondary-30 { border-left: 3px solid var(--color-secondary-30); }
.border-left-3-color-secondary-20 { border-left: 3px solid var(--color-secondary-20); }
.border-left-3-color-secondary-10 { border-left: 3px solid var(--color-secondary-10); }
.border-right-3-color-secondary { border-right: 3px solid var(--color-secondary); }
.border-right-3-color-secondary-90 { border-right: 3px solid var(--color-secondary-90); }
.border-right-3-color-secondary-80 { border-right: 3px solid var(--color-secondary-80); }
.border-right-3-color-secondary-70 { border-right: 3px solid var(--color-secondary-70); }
.border-right-3-color-secondary-60 { border-right: 3px solid var(--color-secondary-60); }
.border-right-3-color-secondary-50 { border-right: 3px solid var(--color-secondary-50); }
.border-right-3-color-secondary-40 { border-right: 3px solid var(--color-secondary-40); }
.border-right-3-color-secondary-30 { border-right: 3px solid var(--color-secondary-30); }
.border-right-3-color-secondary-20 { border-right: 3px solid var(--color-secondary-20); }
.border-right-3-color-secondary-10 { border-right: 3px solid var(--color-secondary-10); }
.border-top-3-color-secondary { border-top: 3px solid var(--color-secondary); }
.border-top-3-color-secondary-90 { border-top: 3px solid var(--color-secondary-90); }
.border-top-3-color-secondary-80 { border-top: 3px solid var(--color-secondary-80); }
.border-top-3-color-secondary-70 { border-top: 3px solid var(--color-secondary-70); }
.border-top-3-color-secondary-60 { border-top: 3px solid var(--color-secondary-60); }
.border-top-3-color-secondary-50 { border-top: 3px solid var(--color-secondary-50); }
.border-top-3-color-secondary-40 { border-top: 3px solid var(--color-secondary-40); }
.border-top-3-color-secondary-30 { border-top: 3px solid var(--color-secondary-30); }
.border-top-3-color-secondary-20 { border-top: 3px solid var(--color-secondary-20); }
.border-top-3-color-secondary-10 { border-top: 3px solid var(--color-secondary-10); }
.border-color-3-alt-1 { border: 3px solid var(--color-alt-1); }
.border-color-3-alt-1-90 { border: 3px solid var(--color-alt-1-90); }
.border-color-3-alt-1-80 { border: 3px solid var(--color-alt-1-80); }
.border-color-3-alt-1-70 { border: 3px solid var(--color-alt-1-70); }
.border-color-3-alt-1-60 { border: 3px solid var(--color-alt-1-60); }
.border-color-3-alt-1-50 { border: 3px solid var(--color-alt-1-50); }
.border-color-3-alt-1-40 { border: 3px solid var(--color-alt-1-40); }
.border-color-3-alt-1-30 { border: 3px solid var(--color-alt-1-30); }
.border-color-3-alt-1-20 { border: 3px solid var(--color-alt-1-20); }
.border-color-3-alt-1-10 { border: 3px solid var(--color-alt-1-10); }
.border-bottom-3-color-alt-1 { border-bottom: 3px solid var(--color-alt-1); }
.border-bottom-3-color-alt-1-90 { border-bottom: 3px solid var(--color-alt-1-90); }
.border-bottom-3-color-alt-1-80 { border-bottom: 3px solid var(--color-alt-1-80); }
.border-bottom-3-color-alt-1-70 { border-bottom: 3px solid var(--color-alt-1-70); }
.border-bottom-3-color-alt-1-60 { border-bottom: 3px solid var(--color-alt-1-60); }
.border-bottom-3-color-alt-1-50 { border-bottom: 3px solid var(--color-alt-1-50); }
.border-bottom-3-color-alt-1-40 { border-bottom: 3px solid var(--color-alt-1-40); }
.border-bottom-3-color-alt-1-30 { border-bottom: 3px solid var(--color-alt-1-30); }
.border-bottom-3-color-alt-1-20 { border-bottom: 3px solid var(--color-alt-1-20); }
.border-bottom-3-color-alt-1-10 { border-bottom: 3px solid var(--color-alt-1-10); }
.border-left-3-color-alt-1 { border-left: 3px solid var(--color-alt-1); }
.border-left-3-color-alt-1-90 { border-left: 3px solid var(--color-alt-1-90); }
.border-left-3-color-alt-1-80 { border-left: 3px solid var(--color-alt-1-80); }
.border-left-3-color-alt-1-70 { border-left: 3px solid var(--color-alt-1-70); }
.border-left-3-color-alt-1-60 { border-left: 3px solid var(--color-alt-1-60); }
.border-left-3-color-alt-1-50 { border-left: 3px solid var(--color-alt-1-50); }
.border-left-3-color-alt-1-40 { border-left: 3px solid var(--color-alt-1-40); }
.border-left-3-color-alt-1-30 { border-left: 3px solid var(--color-alt-1-30); }
.border-left-3-color-alt-1-20 { border-left: 3px solid var(--color-alt-1-20); }
.border-left-3-color-alt-1-10 { border-left: 3px solid var(--color-alt-1-10); }
.border-right-3-color-alt-1 { border-right: 3px solid var(--color-alt-1); }
.border-right-3-color-alt-1-90 { border-right: 3px solid var(--color-alt-1-90); }
.border-right-3-color-alt-1-80 { border-right: 3px solid var(--color-alt-1-80); }
.border-right-3-color-alt-1-70 { border-right: 3px solid var(--color-alt-1-70); }
.border-right-3-color-alt-1-60 { border-right: 3px solid var(--color-alt-1-60); }
.border-right-3-color-alt-1-50 { border-right: 3px solid var(--color-alt-1-50); }
.border-right-3-color-alt-1-40 { border-right: 3px solid var(--color-alt-1-40); }
.border-right-3-color-alt-1-30 { border-right: 3px solid var(--color-alt-1-30); }
.border-right-3-color-alt-1-20 { border-right: 3px solid var(--color-alt-1-20); }
.border-right-3-color-alt-1-10 { border-right: 3px solid var(--color-alt-1-10); }
.border-top-3-color-alt-1 { border-top: 3px solid var(--color-alt-1); }
.border-top-3-color-alt-1-90 { border-top: 3px solid var(--color-alt-1-90); }
.border-top-3-color-alt-1-80 { border-top: 3px solid var(--color-alt-1-80); }
.border-top-3-color-alt-1-70 { border-top: 3px solid var(--color-alt-1-70); }
.border-top-3-color-alt-1-60 { border-top: 3px solid var(--color-alt-1-60); }
.border-top-3-color-alt-1-50 { border-top: 3px solid var(--color-alt-1-50); }
.border-top-3-color-alt-1-40 { border-top: 3px solid var(--color-alt-1-40); }
.border-top-3-color-alt-1-30 { border-top: 3px solid var(--color-alt-1-30); }
.border-top-3-color-alt-1-20 { border-top: 3px solid var(--color-alt-1-20); }
.border-top-3-color-alt-1-10 { border-top: 3px solid var(--color-alt-1-10); }
.border-color-3-alt-2 { border: 3px solid var(--color-alt-2); }
.border-color-3-alt-2-90 { border: 3px solid var(--color-alt-2-90); }
.border-color-3-alt-2-80 { border: 3px solid var(--color-alt-2-80); }
.border-color-3-alt-2-70 { border: 3px solid var(--color-alt-2-70); }
.border-color-3-alt-2-60 { border: 3px solid var(--color-alt-2-60); }
.border-color-3-alt-2-50 { border: 3px solid var(--color-alt-2-50); }
.border-color-3-alt-2-40 { border: 3px solid var(--color-alt-2-40); }
.border-color-3-alt-2-30 { border: 3px solid var(--color-alt-2-30); }
.border-color-3-alt-2-20 { border: 3px solid var(--color-alt-2-20); }
.border-color-3-alt-2-10 { border: 3px solid var(--color-alt-2-10); }
.border-bottom-3-color-alt-2 { border-bottom: 3px solid var(--color-alt-2); }
.border-bottom-3-color-alt-2-90 { border-bottom: 3px solid var(--color-alt-2-90); }
.border-bottom-3-color-alt-2-80 { border-bottom: 3px solid var(--color-alt-2-80); }
.border-bottom-3-color-alt-2-70 { border-bottom: 3px solid var(--color-alt-2-70); }
.border-bottom-3-color-alt-2-60 { border-bottom: 3px solid var(--color-alt-2-60); }
.border-bottom-3-color-alt-2-50 { border-bottom: 3px solid var(--color-alt-2-50); }
.border-bottom-3-color-alt-2-40 { border-bottom: 3px solid var(--color-alt-2-40); }
.border-bottom-3-color-alt-2-30 { border-bottom: 3px solid var(--color-alt-2-30); }
.border-bottom-3-color-alt-2-20 { border-bottom: 3px solid var(--color-alt-2-20); }
.border-bottom-3-color-alt-2-10 { border-bottom: 3px solid var(--color-alt-2-10); }
.border-left-3-color-alt-2 { border-left: 3px solid var(--color-alt-2); }
.border-left-3-color-alt-2-90 { border-left: 3px solid var(--color-alt-2-90); }
.border-left-3-color-alt-2-80 { border-left: 3px solid var(--color-alt-2-80); }
.border-left-3-color-alt-2-70 { border-left: 3px solid var(--color-alt-2-70); }
.border-left-3-color-alt-2-60 { border-left: 3px solid var(--color-alt-2-60); }
.border-left-3-color-alt-2-50 { border-left: 3px solid var(--color-alt-2-50); }
.border-left-3-color-alt-2-40 { border-left: 3px solid var(--color-alt-2-40); }
.border-left-3-color-alt-2-30 { border-left: 3px solid var(--color-alt-2-30); }
.border-left-3-color-alt-2-20 { border-left: 3px solid var(--color-alt-2-20); }
.border-left-3-color-alt-2-10 { border-left: 3px solid var(--color-alt-2-10); }
.border-right-3-color-alt-2 { border-right: 3px solid var(--color-alt-2); }
.border-right-3-color-alt-2-90 { border-right: 3px solid var(--color-alt-2-90); }
.border-right-3-color-alt-2-80 { border-right: 3px solid var(--color-alt-2-80); }
.border-right-3-color-alt-2-70 { border-right: 3px solid var(--color-alt-2-70); }
.border-right-3-color-alt-2-60 { border-right: 3px solid var(--color-alt-2-60); }
.border-right-3-color-alt-2-50 { border-right: 3px solid var(--color-alt-2-50); }
.border-right-3-color-alt-2-40 { border-right: 3px solid var(--color-alt-2-40); }
.border-right-3-color-alt-2-30 { border-right: 3px solid var(--color-alt-2-30); }
.border-right-3-color-alt-2-20 { border-right: 3px solid var(--color-alt-2-20); }
.border-right-3-color-alt-2-10 { border-right: 3px solid var(--color-alt-2-10); }
.border-top-3-color-alt-2 { border-top: 3px solid var(--color-alt-2); }
.border-top-3-color-alt-2-90 { border-top: 3px solid var(--color-alt-2-90); }
.border-top-3-color-alt-2-80 { border-top: 3px solid var(--color-alt-2-80); }
.border-top-3-color-alt-2-70 { border-top: 3px solid var(--color-alt-2-70); }
.border-top-3-color-alt-2-60 { border-top: 3px solid var(--color-alt-2-60); }
.border-top-3-color-alt-2-50 { border-top: 3px solid var(--color-alt-2-50); }
.border-top-3-color-alt-2-40 { border-top: 3px solid var(--color-alt-2-40); }
.border-top-3-color-alt-2-30 { border-top: 3px solid var(--color-alt-2-30); }
.border-top-3-color-alt-2-20 { border-top: 3px solid var(--color-alt-2-20); }
.border-top-3-color-alt-2-10 { border-top: 3px solid var(--color-alt-2-10); }
.border-color-3-alt-3 { border: 3px solid var(--color-alt-3); }
.border-color-3-alt-3-90 { border: 3px solid var(--color-alt-3-90); }
.border-color-3-alt-3-80 { border: 3px solid var(--color-alt-3-80); }
.border-color-3-alt-3-70 { border: 3px solid var(--color-alt-3-70); }
.border-color-3-alt-3-60 { border: 3px solid var(--color-alt-3-60); }
.border-color-3-alt-3-50 { border: 3px solid var(--color-alt-3-50); }
.border-color-3-alt-3-40 { border: 3px solid var(--color-alt-3-40); }
.border-color-3-alt-3-30 { border: 3px solid var(--color-alt-3-30); }
.border-color-3-alt-3-20 { border: 3px solid var(--color-alt-3-20); }
.border-color-3-alt-3-10 { border: 3px solid var(--color-alt-3-10); }
.border-bottom-3-color-alt-3 { border-bottom: 3px solid var(--color-alt-3); }
.border-bottom-3-color-alt-3-90 { border-bottom: 3px solid var(--color-alt-3-90); }
.border-bottom-3-color-alt-3-80 { border-bottom: 3px solid var(--color-alt-3-80); }
.border-bottom-3-color-alt-3-70 { border-bottom: 3px solid var(--color-alt-3-70); }
.border-bottom-3-color-alt-3-60 { border-bottom: 3px solid var(--color-alt-3-60); }
.border-bottom-3-color-alt-3-50 { border-bottom: 3px solid var(--color-alt-3-50); }
.border-bottom-3-color-alt-3-40 { border-bottom: 3px solid var(--color-alt-3-40); }
.border-bottom-3-color-alt-3-30 { border-bottom: 3px solid var(--color-alt-3-30); }
.border-bottom-3-color-alt-3-20 { border-bottom: 3px solid var(--color-alt-3-20); }
.border-bottom-3-color-alt-3-10 { border-bottom: 3px solid var(--color-alt-3-10); }
.border-left-3-color-alt-3 { border-left: 3px solid var(--color-alt-3); }
.border-left-3-color-alt-3-90 { border-left: 3px solid var(--color-alt-3-90); }
.border-left-3-color-alt-3-80 { border-left: 3px solid var(--color-alt-3-80); }
.border-left-3-color-alt-3-70 { border-left: 3px solid var(--color-alt-3-70); }
.border-left-3-color-alt-3-60 { border-left: 3px solid var(--color-alt-3-60); }
.border-left-3-color-alt-3-50 { border-left: 3px solid var(--color-alt-3-50); }
.border-left-3-color-alt-3-40 { border-left: 3px solid var(--color-alt-3-40); }
.border-left-3-color-alt-3-30 { border-left: 3px solid var(--color-alt-3-30); }
.border-left-3-color-alt-3-20 { border-left: 3px solid var(--color-alt-3-20); }
.border-left-3-color-alt-3-10 { border-left: 3px solid var(--color-alt-3-10); }
.border-right-3-color-alt-3 { border-right: 3px solid var(--color-alt-3); }
.border-right-3-color-alt-3-90 { border-right: 3px solid var(--color-alt-3-90); }
.border-right-3-color-alt-3-80 { border-right: 3px solid var(--color-alt-3-80); }
.border-right-3-color-alt-3-70 { border-right: 3px solid var(--color-alt-3-70); }
.border-right-3-color-alt-3-60 { border-right: 3px solid var(--color-alt-3-60); }
.border-right-3-color-alt-3-50 { border-right: 3px solid var(--color-alt-3-50); }
.border-right-3-color-alt-3-40 { border-right: 3px solid var(--color-alt-3-40); }
.border-right-3-color-alt-3-30 { border-right: 3px solid var(--color-alt-3-30); }
.border-right-3-color-alt-3-20 { border-right: 3px solid var(--color-alt-3-20); }
.border-right-3-color-alt-3-10 { border-right: 3px solid var(--color-alt-3-10); }
.border-top-3-color-alt-3 { border-top: 3px solid var(--color-alt-3); }
.border-top-3-color-alt-3-90 { border-top: 3px solid var(--color-alt-3-90); }
.border-top-3-color-alt-3-80 { border-top: 3px solid var(--color-alt-3-80); }
.border-top-3-color-alt-3-70 { border-top: 3px solid var(--color-alt-3-70); }
.border-top-3-color-alt-3-60 { border-top: 3px solid var(--color-alt-3-60); }
.border-top-3-color-alt-3-50 { border-top: 3px solid var(--color-alt-3-50); }
.border-top-3-color-alt-3-40 { border-top: 3px solid var(--color-alt-3-40); }
.border-top-3-color-alt-3-30 { border-top: 3px solid var(--color-alt-3-30); }
.border-top-3-color-alt-3-20 { border-top: 3px solid var(--color-alt-3-20); }
.border-top-3-color-alt-3-10 { border-top: 3px solid var(--color-alt-3-10); }
.border-color-3-alt-4 { border: 3px solid var(--color-alt-4); }
.border-color-3-alt-4-90 { border: 3px solid var(--color-alt-4-90); }
.border-color-3-alt-4-80 { border: 3px solid var(--color-alt-4-80); }
.border-color-3-alt-4-70 { border: 3px solid var(--color-alt-4-70); }
.border-color-3-alt-4-60 { border: 3px solid var(--color-alt-4-60); }
.border-color-3-alt-4-50 { border: 3px solid var(--color-alt-4-50); }
.border-color-3-alt-4-40 { border: 3px solid var(--color-alt-4-40); }
.border-color-3-alt-4-30 { border: 3px solid var(--color-alt-4-30); }
.border-color-3-alt-4-20 { border: 3px solid var(--color-alt-4-20); }
.border-color-3-alt-4-10 { border: 3px solid var(--color-alt-4-10); }
.border-bottom-3-color-alt-4 { border-bottom: 3px solid var(--color-alt-4); }
.border-bottom-3-color-alt-4-90 { border-bottom: 3px solid var(--color-alt-4-90); }
.border-bottom-3-color-alt-4-80 { border-bottom: 3px solid var(--color-alt-4-80); }
.border-bottom-3-color-alt-4-70 { border-bottom: 3px solid var(--color-alt-4-70); }
.border-bottom-3-color-alt-4-60 { border-bottom: 3px solid var(--color-alt-4-60); }
.border-bottom-3-color-alt-4-50 { border-bottom: 3px solid var(--color-alt-4-50); }
.border-bottom-3-color-alt-4-40 { border-bottom: 3px solid var(--color-alt-4-40); }
.border-bottom-3-color-alt-4-30 { border-bottom: 3px solid var(--color-alt-4-30); }
.border-bottom-3-color-alt-4-20 { border-bottom: 3px solid var(--color-alt-4-20); }
.border-bottom-3-color-alt-4-10 { border-bottom: 3px solid var(--color-alt-4-10); }
.border-left-3-color-alt-4 { border-left: 3px solid var(--color-alt-4); }
.border-left-3-color-alt-4-90 { border-left: 3px solid var(--color-alt-4-90); }
.border-left-3-color-alt-4-80 { border-left: 3px solid var(--color-alt-4-80); }
.border-left-3-color-alt-4-70 { border-left: 3px solid var(--color-alt-4-70); }
.border-left-3-color-alt-4-60 { border-left: 3px solid var(--color-alt-4-60); }
.border-left-3-color-alt-4-50 { border-left: 3px solid var(--color-alt-4-50); }
.border-left-3-color-alt-4-40 { border-left: 3px solid var(--color-alt-4-40); }
.border-left-3-color-alt-4-30 { border-left: 3px solid var(--color-alt-4-30); }
.border-left-3-color-alt-4-20 { border-left: 3px solid var(--color-alt-4-20); }
.border-left-3-color-alt-4-10 { border-left: 3px solid var(--color-alt-4-10); }
.border-right-3-color-alt-4 { border-right: 3px solid var(--color-alt-4); }
.border-right-3-color-alt-4-90 { border-right: 3px solid var(--color-alt-4-90); }
.border-right-3-color-alt-4-80 { border-right: 3px solid var(--color-alt-4-80); }
.border-right-3-color-alt-4-70 { border-right: 3px solid var(--color-alt-4-70); }
.border-right-3-color-alt-4-60 { border-right: 3px solid var(--color-alt-4-60); }
.border-right-3-color-alt-4-50 { border-right: 3px solid var(--color-alt-4-50); }
.border-right-3-color-alt-4-40 { border-right: 3px solid var(--color-alt-4-40); }
.border-right-3-color-alt-4-30 { border-right: 3px solid var(--color-alt-4-30); }
.border-right-3-color-alt-4-20 { border-right: 3px solid var(--color-alt-4-20); }
.border-right-3-color-alt-4-10 { border-right: 3px solid var(--color-alt-4-10); }
.border-top-3-color-alt-4 { border-top: 3px solid var(--color-alt-4); }
.border-top-3-color-alt-4-90 { border-top: 3px solid var(--color-alt-4-90); }
.border-top-3-color-alt-4-80 { border-top: 3px solid var(--color-alt-4-80); }
.border-top-3-color-alt-4-70 { border-top: 3px solid var(--color-alt-4-70); }
.border-top-3-color-alt-4-60 { border-top: 3px solid var(--color-alt-4-60); }
.border-top-3-color-alt-4-50 { border-top: 3px solid var(--color-alt-4-50); }
.border-top-3-color-alt-4-40 { border-top: 3px solid var(--color-alt-4-40); }
.border-top-3-color-alt-4-30 { border-top: 3px solid var(--color-alt-4-30); }
.border-top-3-color-alt-4-20 { border-top: 3px solid var(--color-alt-4-20); }
.border-top-3-color-alt-4-10 { border-top: 3px solid var(--color-alt-4-10); }

canvas {
  display: block;
  max-width: 100%;
}

code {
  font-family: var(--font-family-monospace);
  font-size: var(--font-size-small);
  color: var(--color-secondary-50);
}

.color-primary {color: var(--color-primary);}
.color-primary-10 {color: var(--color-primary-10);}
.color-primary-20 {color: var(--color-primary-20);}
.color-primary-30 {color: var(--color-primary-30);}
.color-primary-40 {color: var(--color-primary-40);}
.color-primary-50 {color: var(--color-primary-50);}
.color-primary-60 {color: var(--color-primary-60);}
.color-primary-70 {color: var(--color-primary-70);}
.color-primary-80 {color: var(--color-primary-80);}
.color-primary-90 {color: var(--color-primary-90);}
.color-secondary {color: var(--color-secondary);}
.color-secondary-10 {color: var(--color-secondary-10);}
.color-secondary-20 {color: var(--color-secondary-20);}
.color-secondary-30 {color: var(--color-secondary-30);}
.color-secondary-40 {color: var(--color-secondary-40);}
.color-secondary-50 {color: var(--color-secondary-50);}
.color-secondary-60 {color: var(--color-secondary-60);}
.color-secondary-70 {color: var(--color-secondary-70);}
.color-secondary-80 {color: var(--color-secondary-80);}
.color-secondary-90 {color: var(--color-secondary-90);}
.color-alt-1 {color: var(--color-alt-1);}
.color-alt-1-10 {color: var(--color-alt-1-10);}
.color-alt-1-20 {color: var(--color-alt-1-20);}
.color-alt-1-30 {color: var(--color-alt-1-30);}
.color-alt-1-40 {color: var(--color-alt-1-40);}
.color-alt-1-50 {color: var(--color-alt-1-50);}
.color-alt-1-60 {color: var(--color-alt-1-60);}
.color-alt-1-70 {color: var(--color-alt-1-70);}
.color-alt-1-80 {color: var(--color-alt-1-80);}
.color-alt-1-90 {color: var(--color-alt-1-90);}
.color-alt-2 {color: var(--color-alt-2);}
.color-alt-2-10 {color: var(--color-alt-2-10);}
.color-alt-2-20 {color: var(--color-alt-2-20);}
.color-alt-2-30 {color: var(--color-alt-2-30);}
.color-alt-2-40 {color: var(--color-alt-2-40);}
.color-alt-2-50 {color: var(--color-alt-2-50);}
.color-alt-2-60 {color: var(--color-alt-2-60);}
.color-alt-2-70 {color: var(--color-alt-2-70);}
.color-alt-2-80 {color: var(--color-alt-2-80);}
.color-alt-2-90 {color: var(--color-alt-2-90);}
.color-alt-3 {color: var(--color-alt-3);}
.color-alt-3-10 {color: var(--color-alt-3-10);}
.color-alt-3-20 {color: var(--color-alt-3-20);}
.color-alt-3-30 {color: var(--color-alt-3-30);}
.color-alt-3-40 {color: var(--color-alt-3-40);}
.color-alt-3-50 {color: var(--color-alt-3-50);}
.color-alt-3-60 {color: var(--color-alt-3-60);}
.color-alt-3-70 {color: var(--color-alt-3-70);}
.color-alt-3-80 {color: var(--color-alt-3-80);}
.color-alt-3-90 {color: var(--color-alt-3-90);}
.color-alt-4 {color: var(--color-alt-4);}
.color-alt-4-10 {color: var(--color-alt-4-10);}
.color-alt-4-20 {color: var(--color-alt-4-20);}
.color-alt-4-30 {color: var(--color-alt-4-30);}
.color-alt-4-40 {color: var(--color-alt-4-40);}
.color-alt-4-50 {color: var(--color-alt-4-50);}
.color-alt-4-60 {color: var(--color-alt-4-60);}
.color-alt-4-70 {color: var(--color-alt-4-70);}
.color-alt-4-80 {color: var(--color-alt-4-80);}
.color-alt-4-90 {color: var(--color-alt-4-90);}

.flow > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.font-size-xsmall { font-size: var(--font-size-xsmall); }
.font-size-small { font-size: var(--font-size-small); }
.font-size-medium { font-size: var(--font-size-medium); }
.font-size-large { font-size: var(--font-size-large); }
.font-size-xlarge { font-size: var(--font-size-xlarge); }
.font-size-xxlarge { font-size: var(--font-size-xxlarge); }
.font-size-xxxlarge { font-size: var(--font-size-xxxlarge); }

footer {
  border-top: var(--border-alt-4-20);
  color: var(--color-primary-40); 
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: var(--font-size-small);
  margin-inline: auto;
  margin-bottom: var(--margin-small);
  margin-top: var(--margin-xlarge);
  padding: var(--padding-large);
  width: var(--width-medium);
}


h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
  color: var(--color-secondary);
  text-wrap: balance;
}

h1 {
  border-bottom: var(--border-alt-1-30);
  font-size: var(--font-size-xxxlarge);
  margin-top: 1em;
}

h2 {
  border-bottom: var(--border-alt-2-20);
  font-size: var(--font-size-xxlarge);
  --flow-space: 1.3em;
}

h3 {
  font-size: var(--font-size-xlarge);
  --flow-space: 1.0em;
}

h4 {
  font-size: var(--font-size-large);
  --flow-space: 1.0em;
}

h5 {
  font-size: var(--font-size-medium);
  --flow-space: 1.0em;
}

h6 {
  font-size: var(--font-size-small);
  --flow-space: 1.0em;
}

iframe {
  max-width: 100%;
  display: block;
}

img {
  max-width: 100%;
  display: block;
}

input {
  margin-inline: var(--margin-xxsmall);
}

kbd {
  background-color: var(--color-alt-secondary-20);
  border: var(--border-primary);
  border-radius: var(--border-radius-xxsmall);
  padding-inline: var(--padding-xxsmall);
}

li > :where(:not(:first-child)) {
  margin-top: 1em;
}

.margin-xxsmall {margin: var(--margin-xxsmall);}
.margin-xsmall {margin: var(--margin-xsmall);}
.margin-small {margin: var(--margin-small);}
.margin-medium {margin: var(--margin-medium);}
.margin-large {margin: var(--margin-large);}
.margin-xlarge {margin: var(--margin-xlarge);}
.margin-xxlarge {margin: var(--margin-xxlarge);}
.margin-block-xxsmall {margin-block: var(--margin-xxsmall);}
.margin-block-xsmall {margin-block: var(--margin-xsmall);}
.margin-block-small {margin-block: var(--margin-small);}
.margin-block-medium {margin-block: var(--margin-medium);}
.margin-block-large {margin-block: var(--margin-large);}
.margin-block-xlarge {margin-block: var(--margin-xlarge);}
.margin-block-xxlarge {margin-block: var(--margin-xxlarge);}
.margin-bottom-xxsmall {margin-bottom: var(--margin-xxsmall);}
.margin-bottom-xsmall {margin-bottom: var(--margin-xsmall);}
.margin-bottom-small {margin-bottom: var(--margin-small);}
.margin-bottom-medium {margin-bottom: var(--margin-medium);}
.margin-bottom-large {margin-bottom: var(--margin-large);}
.margin-bottom-xlarge {margin-bottom: var(--margin-xlarge);}
.margin-bottom-xxlarge {margin-bottom: var(--margin-xxlarge);}
.margin-inline-xxsmall {margin-inline: var(--margin-xxsmall);}
.margin-inline-xsmall {margin-inline: var(--margin-xsmall);}
.margin-inline-small {margin-inline: var(--margin-small);}
.margin-inline-medium {margin-inline: var(--margin-medium);}
.margin-inline-large {margin-inline: var(--margin-large);}
.margin-inline-xlarge {margin-inline: var(--margin-xlarge);}
.margin-inline-xxlarge {margin-inline: var(--margin-xxlarge);}
.margin-top-xxsmall {margin-top: var(--margin-xxsmall);}
.margin-top-xsmall {margin-top: var(--margin-xsmall);}
.margin-top-small {margin-top: var(--margin-small);}
.margin-top-medium {margin-top: var(--margin-medium);}
.margin-top-large {margin-top: var(--margin-large);}
.margin-top-xlarge {margin-top: var(--margin-xlarge);}
.margin-top-xxlarge {margin-top: var(--margin-xxlarge);}

ol > :where(:not(:first-child)) {
  margin-top: 1em;
}

.padding-xxsmall {padding: var(--padding-xxsmall);}
.padding-xsmall {padding: var(--padding-xsmall);}
.padding-small {padding: var(--padding-small);}
.padding-medium {padding: var(--padding-medium);}
.padding-large {padding: var(--padding-large);}
.padding-xlarge {padding: var(--padding-xlarge);}
.padding-xxlarge {padding: var(--padding-xxlarge);}
.padding-block-xxsmall {padding-block: var(--padding-xxsmall);}
.padding-block-xsmall {padding-block: var(--padding-xsmall);}
.padding-block-small {padding-block: var(--padding-small);}
.padding-block-medium {padding-block: var(--padding-medium);}
.padding-block-large {padding-block: var(--padding-large);}
.padding-block-xlarge {padding-block: var(--padding-xlarge);}
.padding-block-xxlarge {padding-block: var(--padding-xxlarge);}
.padding-bottom-xxsmall {padding-bottom: var(--padding-xxsmall);}
.padding-bottom-xsmall {padding-bottom: var(--padding-xsmall);}
.padding-bottom-small {padding-bottom: var(--padding-small);}
.padding-bottom-medium {padding-bottom: var(--padding-medium);}
.padding-bottom-large {padding-bottom: var(--padding-large);}
.padding-bottom-xlarge {padding-bottom: var(--padding-xlarge);}
.padding-bottom-xxlarge {padding-bottom: var(--padding-xxlarge);}
.padding-inline-xxsmall {padding-inline: var(--padding-xxsmall);}
.padding-inline-xsmall {padding-inline: var(--padding-xsmall);}
.padding-inline-small {padding-inline: var(--padding-small);}
.padding-inline-medium {padding-inline: var(--padding-medium);}
.padding-inline-large {padding-inline: var(--padding-large);}
.padding-inline-xlarge {padding-inline: var(--padding-xlarge);}
.padding-inline-xxlarge {padding-inline: var(--padding-xxlarge);}
.padding-top-xxsmall {padding-top: var(--padding-xxsmall);}
.padding-top-xsmall {padding-top: var(--padding-xsmall);}
.padding-top-small {padding-top: var(--padding-small);}
.padding-top-medium {padding-top: var(--padding-medium);}
.padding-top-large {padding-top: var(--padding-large);}
.padding-top-xlarge {padding-top: var(--padding-xlarge);}
.padding-top-xxlarge {padding-top: var(--padding-xxlarge);}

picture {
  max-width: 100%;
  display: block;
}

svg {
  max-width: 100%;
  display: block;
}

.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }

ul > :where(:not(:first-child)) {
  margin-top: 1em;
}

.vertical-align-top {
  vertical-align: baseline;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.vertical-align-middle {
  vertical-align: middle ;
}

.vertical-align-sub {
  vertical-align: sub;
}

.vertical-align-super {
  vertical-align: super;
}

.vertical-align-text-top {
  vertical-align: text-top;
}

.vertical-align-text-bottom {
  vertical-align: text-bottom;
}

.vertical-align-top {
  vertical-align: top;
}


video {
  max-width: 100%;
  display: block;
}

.width-xxsmall {
  width: var(--width-xxsmall);
}

.width-xsmall {
  width: var(--width-xsmall);
}

.width-small {
  width: var(--width-small);
}

.width-medium{
  width: var(--width-medium);
}

.width-large{
  width: var(--width-large);
}

.width-xlarge{
  width: var(--width-xlarge);
}

.width-full{
  width: var(--width-full);
}

.wrapper-xxsmall {
  width: var(--width-xxsmall);
  margin-inline: auto;
}

.wrapper-xxsmall > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-xsmall {
  width: var(--width-xsmall);
  margin-inline: auto;
}

.wrapper-xsmall > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-small {
  width: var(--width-small);
  margin-inline: auto;
}

.wrapper-small > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-medium {
  width: var(--width-medium);
  margin-inline: auto;
}

.wrapper-medium > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-large {
  width: var(--width-large);
  margin-inline: auto;
}

.wrapper-large > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-xlarge {
  width: var(--width-xlarge);
  margin-inline: auto;
}

.wrapper-xlarge > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

.wrapper-full {
  width: var(--width-full);
  margin-inline: auto;
}

.wrapper-full > :where(:not(:first-child)) {
  margin-top: var(--flow-space, 1em);
}

Going With The Flow

The .flow approach came from Kevin Powell's How to make a nice site with less CSS video. I've been using it for everything I do since learning about it.

-a

-- end of line --

Endnotes

Quick script to help generate stuff

sizes = [
  'xsmall', 'small', 'medium', 'large', 
  'xlarge', 'xxlarge', 'xxxlarge' 
]

for size in sizes:
  print(f".font-size-{size} {{ font-size: var(--font-size-{size}); }}")

Output:

.font-size-xsmall { font-size: var(--font-size-xsmall); }
.font-size-small { font-size: var(--font-size-small); }
.font-size-medium { font-size: var(--font-size-medium); }
.font-size-large { font-size: var(--font-size-large); }
.font-size-xlarge { font-size: var(--font-size-xlarge); }
.font-size-xxlarge { font-size: var(--font-size-xxlarge); }
.font-size-xxxlarge { font-size: var(--font-size-xxxlarge); }

References

color-scheme

prefers-color-scheme

Footnotes

1 ⤴

For example, at least half the ones on my projects/link page are hand built.