/* stylelint-disable color-no-hex */
:root {
  --background: #041515;
  --primary: #476359;
  --secondary: #ffab00;
  --white: #fff;
  --black: #041515;
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,&g=s,l,xl,12 */
:root {
  --spacer-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --spacer-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --spacer-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --spacer-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --spacer-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --spacer-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --spacer-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --spacer-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --spacer-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
  --spacer-4xl: clamp(8rem, 7.6522rem + 1.7391vw, 9rem);
  --spacer-5xl: clamp(9rem, 8.6087rem + 1.9565vw, 10.125rem);
  --spacer-6xl: clamp(10rem, 9.5652rem + 2.1739vw, 11.25rem);
  --spacer-7xl: clamp(15rem, 14.3478rem + 3.2609vw, 16.875rem);
  /* One-up pairs */
  --spacer-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
  --spacer-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
  --spacer-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
  --spacer-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
  --spacer-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
  --spacer-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
  --spacer-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
  --spacer-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
  --spacer-3xl-4xl: clamp(6rem, 4.9565rem + 5.2174vw, 9rem);
  --spacer-4xl-5xl: clamp(8rem, 7.2609rem + 3.6957vw, 10.125rem);
}

my-color {
  display: inline-grid;
  grid-template-areas: "swatch" "name" "hex" "cmyk";
  grid-template-rows: 8rem auto auto auto;
  min-width: 8rem;
  margin: 0.125rem;
  border-radius: 0.25rem 0.25rem 0.5rem 0.5rem;
}
my-color.brand-blue {
  background-color: #00d7f7;
}
my-color.brand-blue::before {
  content: "brand-blue";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-blue::after {
  content: "#00d7f7";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-blue-light {
  background-color: #91f0ff;
}
my-color.brand-blue-light::before {
  content: "brand-blue-light";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-blue-light::after {
  content: "#91f0ff";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-red {
  background-color: #ff5107;
}
my-color.brand-red::before {
  content: "brand-red";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-red::after {
  content: "#ff5107";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-green {
  background-color: #2ae78b;
}
my-color.brand-green::before {
  content: "brand-green";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-green::after {
  content: "#2ae78b";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-green-light {
  background-color: #adffc6;
}
my-color.brand-green-light::before {
  content: "brand-green-light";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-green-light::after {
  content: "#adffc6";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-yellow {
  background-color: #ffd80a;
}
my-color.brand-yellow::before {
  content: "brand-yellow";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-yellow::after {
  content: "#ffd80a";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-yellow-light {
  background-color: #fff0a4;
}
my-color.brand-yellow-light::before {
  content: "brand-yellow-light";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-yellow-light::after {
  content: "#fff0a4";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray {
  background-color: #3d3b34;
}
my-color.brand-gray::before {
  content: "brand-gray";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray::after {
  content: "#3d3b34";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray-1 {
  background-color: #696969;
}
my-color.brand-gray-1::before {
  content: "brand-gray-1";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray-1::after {
  content: "#696969";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray-2 {
  background-color: #939089;
}
my-color.brand-gray-2::before {
  content: "brand-gray-2";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-gray-2::after {
  content: "#939089";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-black {
  background-color: #171715;
}
my-color.brand-black::before {
  content: "brand-black";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-black::after {
  content: "#171715";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-white {
  background-color: #faf8f2;
}
my-color.brand-white::before {
  content: "brand-white";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-white::after {
  content: "#faf8f2";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-white-1 {
  background-color: #ece9de;
}
my-color.brand-white-1::before {
  content: "brand-white-1";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-white-1::after {
  content: "#ece9de";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-sand {
  background-color: #d4cfc5;
}
my-color.brand-sand::before {
  content: "brand-sand";
  display: block;
  grid-area: name;
  padding: 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}
my-color.brand-sand::after {
  content: "#d4cfc5";
  display: block;
  grid-area: hex;
  padding: 0 0.25rem 0.25rem;
  border-radius: 0 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}

.brand-cmyk {
  grid-area: cmyk;
  padding: 0 0.25rem 0.25rem;
  text-align: center;
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}

.my-color-swatches {
  /* stylelint-disable-next-line color-no-hex */
  background-color: #f2f2f2;
}

dl.spacers dt {
  margin-top: 1.5rem;
}
dl.spacers dd {
  width: 100%;
  margin: 0;
  background-color: #2ae78b;
}

:root {
  --spacer-xxs: 0.444rem;
  --spacer-xs: 0.667rem;
  --spacer-sm: 1rem;
  --spacer-md: 1.5rem;
  --spacer-base: 2.25rem;
  --spacer-lg: 3rem;
  --spacer-xl: 3.875rem;
  --spacer-xxl: 8rem;
}