@import "defuss-squeezy-reset/reset.css";
@import "palette.css";

:root {
  --debug-color: #ff4b6969;

  /* color system */
  --color-primary-light: var(--color-purple-200); /* light shade for primary */
  --color-primary: var(--color-purple-300); /* using color variant for primary */
  --color-primary-dark: var(--color-purple-400); /* dark shade for primary */

  --color-secondary-light: var(--color-yellow-100); /* light shade for secondary */
  --color-secondary: var(--color-yellow-200); /* using color variant for secondary */
  --color-secondary-dark: var(--color-yellow-300); /* dark shade for secondary */

  --color-background: var(--color-blue-950); /* using mono for background */
  --color-foreground: var(--color-blue-50); /* using mono for foreground */

  /* spacing scale with much wider dynamic viewport scaling */
  --space-xxs: clamp(0.25rem, calc(0.25rem + 16 * var(--squeezy-vw-base)), 1rem); /* ~4px to ~16px */
  --space-2xxs: clamp(
    0.375rem,
    calc(0.375rem + 16 * var(--squeezy-vw-base)),
    1.25rem
  ); /* ~6px to ~20px */
  --space-xs: clamp(0.5rem, calc(0.5rem + 16 * var(--squeezy-vw-base)), 1.5rem); /* ~8px to ~24px */
  --space-2xs: clamp(0.75rem, calc(0.75rem + 16 * var(--squeezy-vw-base)), 2rem); /* ~12px to ~32px */
  --space-md: clamp(1rem, calc(1rem + 16 * var(--squeezy-vw-base)), 2.5rem); /* ~16px to ~40px */
  --space-2md: clamp(1.5rem, calc(1.5rem + 16 * var(--squeezy-vw-base)), 3rem); /* ~24px to ~48px */
  --space-lg: clamp(2rem, calc(2rem + 16 * var(--squeezy-vw-base)), 3.5rem); /* ~32px to ~56px */
  --space-2lg: clamp(3rem, calc(3rem + 16 * var(--squeezy-vw-base)), 4.5rem); /* ~48px to ~72px */
  --space-xl: clamp(4rem, calc(4rem + 16 * var(--squeezy-vw-base)), 5.5rem); /* ~64px to ~88px */
  --space-2xl: clamp(6rem, calc(6rem + 16 * var(--squeezy-vw-base)), 7.5rem); /* ~96px to ~120px */
  --space-xxl: clamp(9.5rem, calc(8rem + 16 * var(--squeezy-vw-base)), 8rem); /* ~152px to ~128px */

  --aspect-ratio-correction-factor: calc(9 / 16);

  /* horizontal spacing scale with extreme dynamic viewport scaling and aspect ratio correction */
  --hspace-xxs: calc(var(--squeezy-font-size--2) + 1 * var(--squeezy-vw-base)); /* ~2px to ~8px */
  --hspace-2xxs: calc(var(--squeezy-font-size--1) + 2 * var(--squeezy-vw-base)); /* ~3px to ~10px */
  --hspace-xs: calc(var(--squeezy-font-size-0) + 4 * var(--squeezy-vw-base)); /* ~4px to ~12px */
  --hspace-2xs: calc(
    var(--squeezy-font-size-0) *
    1.5 +
    8 *
    var(--squeezy-vw-base)
  ); /* ~6px to ~16px */
  --hspace-md: calc(var(--squeezy-font-size-1) + 16 * var(--squeezy-vw-base)); /* ~8px to ~20px */
  --hspace-2md: calc(
    var(--squeezy-font-size-1) *
    1.5 +
    32 *
    var(--squeezy-vw-base)
  ); /* ~12px to ~24px */
  --hspace-lg: calc(var(--squeezy-font-size-2) + 64 * var(--squeezy-vw-base)); /* ~16px to ~28px */
  --hspace-2lg: calc(
    var(--squeezy-font-size-2) *
    1.5 +
    128 *
    var(--squeezy-vw-base)
  ); /* ~24px to ~32px */
  --hspace-xl: calc(var(--squeezy-font-size-3) + 192 * var(--squeezy-vw-base)); /* ~32px to ~36px */
  --hspace-2xl: calc(var(--squeezy-font-size-4) + 256 * var(--squeezy-vw-base)); /* ~48px to ~40px */
  --hspace-xxl: calc(var(--squeezy-font-size-5) + 512 * var(--squeezy-vw-base)); /* ~64px to ~44px */

  /* font family */
  --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
    Roboto, Helvetica, Arial, sans-serif;
  --font-family-serif: Georgia, "Times New Roman", Times, serif;
  --font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;

  /* font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* line heights */
  --line-height-tight: 1.2;
  --line-height-normal: clamp(1.3, var(--squeezy-font-size-0) / 1rem, 1.5);
  --line-height-relaxed: 1.5;
}

.dark {
  --color-primary-light: var(--color-purple-200);
  --color-primary: var(--color-purple-300);
  --color-primary-dark: var(--color-purple-200);

  --color-secondary-light: var(--color-yellow-300);
  --color-secondary: var(--color-yellow-200);
  --color-secondary-dark: var(--color-yellow-100);

  --color-background: var(--color-blue-50);
  --color-foreground: var(--color-blue-950);
}

.link {
  color: var(--color-foreground);
  text-decoration: none;
}

.link:hover {
  color: var(--color-foreground-light);
  text-decoration: none;
  cursor: pointer;
}

/* helper class to identify layout issues quickly */
.debug * {
  outline: 2px dotted var(--debug-color); /* sets a hotpink outline */
  outline-offset: -2px; /* ensures the outline is visible and close to the element */
}

/* layout */

.hbox {
  display: flex; /* enables flexbox layout by default */
  flex-direction: column; /* arranges items in a single column */
  max-width: 100%; /* ensures the container takes full width */
  align-items: stretch; /* stretches items to fill the container's width */
  justify-items: stretch; /* stretches items to fill the container's height */
}

.vbox {
  display: flex; /* enables flexbox layout */
  flex-direction: row; /* arranges items in a column */
  max-height: 100%; /* ensures the maximum height does not exceed 100% */
  align-items: stretch; /* stretches items to fill the container's width */
  justify-items: stretch; /* stretches items to fill the container's height */
}

.fit {
  flex: 1; /* takes up all available space */
}

.static {
  flex: none; /* Prevents flexbox from affecting its size */
  width: max-content; /* Keeps the width based on the content */
  height: max-content; /* Keeps the height based on the content */
  white-space: nowrap; /* Prevents text wrapping */
  overflow: visible; /* Ensures no clipping of content */
}

.nowrap {
  flex-wrap: nowrap; /* prevents items from wrapping */
  white-space: nowrap;
}

/* text color utilities */
.text-primary-light {
  color: var(--color-primary-light);
}
.text-primary {
  color: var(--color-primary);
}
.text-primary-dark {
  color: var(--color-primary-dark);
}

.text-secondary-light {
  color: var(--color-secondary-light);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-secondary-dark {
  color: var(--color-secondary-dark);
}

.text-fg-light {
  color: var(--color-foreground-light);
}
.text-fg {
  color: var(--color-foreground);
}
.text-fg-dark {
  color: var(--color-foreground-dark);
}

.text-bg-light {
  color: var(--color-background-light);
}
.text-bg {
  color: var(--color-background);
}
.text-bg-dark {
  color: var(--color-background-dark);
}

/* reduces the opacity to make the element appear dimmed */
.dim {
  opacity: 0.6;
}

/* layout & display utilities */
.hidden {
  display: none;
}

.shrink-height {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

.shrink-width {
  max-width: 0;
  overflow: hidden;
  transition: max-width 0.5s ease-in-out, opacity 0.3s ease-in-out;
}

/* block & inline utilities */
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

/* flex utilities */
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-no-grow {
  flex-grow: 0;
}
.flex-no-shrink {
  flex-shrink: 0;
}

/* gap utilities for grid and flexbox */
.gap-xxs {
  gap: var(--space-xxs);
}
.gap-2xxs {
  gap: var(--space-2xxs);
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-2xs {
  gap: var(--space-2xs);
}
.gap-md {
  gap: var(--space-md);
}
.gap-2md {
  gap: var(--space-2md);
}
.gap-lg {
  gap: var(--space-lg);
}
.gap-2lg {
  gap: var(--space-2lg);
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.gap-xxl {
  gap: var(--space-xxl);
}

/* grid utilities */
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-rows-7 {
  grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid-rows-8 {
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid-rows-9 {
  grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid-rows-10 {
  grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid-rows-11 {
  grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid-rows-12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

/* Grid Column Gap Utilities */
.col-gap-xxs {
  column-gap: var(--space-xxs);
}
.col-gap-2xxs {
  column-gap: var(--space-2xxs);
}
.col-gap-xs {
  column-gap: var(--space-xs);
}
.col-gap-2xs {
  column-gap: var(--space-2xs);
}
.col-gap-md {
  column-gap: var(--space-md);
}
.col-gap-2md {
  column-gap: var(--space-2md);
}
.col-gap-lg {
  column-gap: var(--space-lg);
}
.col-gap-2lg {
  column-gap: var(--space-2lg);
}
.col-gap-xl {
  column-gap: var(--space-xl);
}
.col-gap-2xl {
  column-gap: var(--space-2xl);
}
.col-gap-xxl {
  column-gap: var(--space-xxl);
}

/* Grid Row Gap Utilities */
.row-gap-xxs {
  row-gap: var(--space-xxs);
}
.row-gap-2xxs {
  row-gap: var(--space-2xxs);
}
.row-gap-xs {
  row-gap: var(--space-xs);
}
.row-gap-2xs {
  row-gap: var(--space-2xs);
}
.row-gap-md {
  row-gap: var(--space-md);
}
.row-gap-2md {
  row-gap: var(--space-2md);
}
.row-gap-lg {
  row-gap: var(--space-lg);
}
.row-gap-2lg {
  row-gap: var(--space-2lg);
}
.row-gap-xl {
  row-gap: var(--space-xl);
}
.row-gap-2xl {
  row-gap: var(--space-2xl);
}
.row-gap-xxl {
  row-gap: var(--space-xxl);
}

/* text alignment */
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

/* font family utilities */
.font-sans {
  font-family: var(--font-family-sans);
}
.font-serif {
  font-family: var(--font-family-serif);
}
.font-mono {
  font-family: var(--font-family-mono);
}

/* font weight utilities */
.font-light {
  font-weight: var(--font-weight-light);
}
.font-normal {
  font-weight: var(--font-weight-normal);
}
.font-medium {
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-bold {
  font-weight: var(--font-weight-bold);
}

/* line height utilities */
.leading-tight {
  line-height: var(--line-height-tight);
}
.leading-normal {
  line-height: var(--line-height-normal);
}
.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

/* typography size utilities */
.text-xxs {
  font-size: var(--squeezy-font-size--2);
}
.text-xs {
  font-size: var(--squeezy-font-size--1);
}
.text-base {
  font-size: var(--squeezy-font-size-0);
}
.text-md {
  font-size: var(--squeezy-font-size-1);
}
.text-lg {
  font-size: var(--squeezy-font-size-2);
}
.text-xl {
  font-size: var(--squeezy-font-size-3);
}
.text-2xl {
  font-size: var(--squeezy-font-size-4);
}
.text-3xl {
  font-size: var(--squeezy-font-size-5);
}
.text-4xl {
  font-size: var(--squeezy-font-size-6);
}

/* color utilities */
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-foreground {
  color: var(--color-foreground);
}

.bg-primary {
  background-color: var(--color-primary);
}
.bg-secondary {
  background-color: var(--color-secondary);
}
.bg {
  background-color: var(--color-background);
}

/* margin and padding utilities
   For each direction and each size step:
   Sizes: xxs, 2xxs, xs, 2xs, md, 2md, lg, 2lg, xl, 2xl, xxl
   Directions: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
*/

/* margin - all sides */
.m-none {
  margin: 0;
}

.m-xxs {
  margin: var(--space-xxs);
}
.m-2xxs {
  margin: var(--space-2xxs);
}
.m-xs {
  margin: var(--space-xs);
}
.m-2xs {
  margin: var(--space-2xs);
}
.m-md {
  margin: var(--space-md);
}
.m-2md {
  margin: var(--space-2md);
}
.m-lg {
  margin: var(--space-lg);
}
.m-2lg {
  margin: var(--space-2lg);
}
.m-xl {
  margin: var(--space-xl);
}
.m-2xl {
  margin: var(--space-2xl);
}
.m-xxl {
  margin: var(--space-xxl);
}

/* margin top */
.mt-xxs {
  margin-top: var(--space-xxs);
}
.mt-2xxs {
  margin-top: var(--space-2xxs);
}
.mt-xs {
  margin-top: var(--space-xs);
}
.mt-2xs {
  margin-top: var(--space-2xs);
}
.mt-md {
  margin-top: var(--space-md);
}
.mt-2md {
  margin-top: var(--space-2md);
}
.mt-lg {
  margin-top: var(--space-lg);
}
.mt-2lg {
  margin-top: var(--space-2lg);
}
.mt-xl {
  margin-top: var(--space-xl);
}
.mt-2xl {
  margin-top: var(--space-2xl);
}
.mt-xxl {
  margin-top: var(--space-xxl);
}

/* margin right */
.mr-xxs {
  margin-right: var(--space-xxs);
}
.mr-2xxs {
  margin-right: var(--space-2xxs);
}
.mr-xs {
  margin-right: var(--space-xs);
}
.mr-2xs {
  margin-right: var(--space-2xs);
}
.mr-md {
  margin-right: var(--space-md);
}
.mr-2md {
  margin-right: var(--space-2md);
}
.mr-lg {
  margin-right: var(--space-lg);
}
.mr-2lg {
  margin-right: var(--space-2lg);
}
.mr-xl {
  margin-right: var(--space-xl);
}
.mr-2xl {
  margin-right: var(--space-2xl);
}
.mr-xxl {
  margin-right: var(--space-xxl);
}

/* margin bottom */
.mb-xxs {
  margin-bottom: var(--space-xxs);
}
.mb-2xxs {
  margin-bottom: var(--space-2xxs);
}
.mb-xs {
  margin-bottom: var(--space-xs);
}
.mb-2xs {
  margin-bottom: var(--space-2xs);
}
.mb-md {
  margin-bottom: var(--space-md);
}
.mb-2md {
  margin-bottom: var(--space-2md);
}
.mb-lg {
  margin-bottom: var(--space-lg);
}
.mb-2lg {
  margin-bottom: var(--space-2lg);
}
.mb-xl {
  margin-bottom: var(--space-xl);
}
.mb-2xl {
  margin-bottom: var(--space-2xl);
}
.mb-xxl {
  margin-bottom: var(--space-xxl);
}

/* margin left */
.ml-xxs {
  margin-left: var(--space-xxs);
}
.ml-2xxs {
  margin-left: var(--space-2xxs);
}
.ml-xs {
  margin-left: var(--space-xs);
}
.ml-2xs {
  margin-left: var(--space-2xs);
}
.ml-md {
  margin-left: var(--space-md);
}
.ml-2md {
  margin-left: var(--space-2md);
}
.ml-lg {
  margin-left: var(--space-lg);
}
.ml-2lg {
  margin-left: var(--space-2lg);
}
.ml-xl {
  margin-left: var(--space-xl);
}
.ml-2xl {
  margin-left: var(--space-2xl);
}
.ml-xxl {
  margin-left: var(--space-xxl);
}

/* margin x (left & right) */
.mx-xxs {
  margin-left: var(--space-xxs);
  margin-right: var(--space-xxs);
}
.mx-2xxs {
  margin-left: var(--space-2xxs);
  margin-right: var(--space-2xxs);
}
.mx-xs {
  margin-left: var(--space-xs);
  margin-right: var(--space-xs);
}
.mx-2xs {
  margin-left: var(--space-2xs);
  margin-right: var(--space-2xs);
}
.mx-md {
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}
.mx-2md {
  margin-left: var(--space-2md);
  margin-right: var(--space-2md);
}
.mx-lg {
  margin-left: var(--space-lg);
  margin-right: var(--space-lg);
}
.mx-2lg {
  margin-left: var(--space-2lg);
  margin-right: var(--space-2lg);
}
.mx-xl {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}
.mx-2xl {
  margin-left: var(--space-2xl);
  margin-right: var(--space-2xl);
}
.mx-xxl {
  margin-left: var(--space-xxl);
  margin-right: var(--space-xxl);
}

/* margin y (top & bottom) */
.my-xxs {
  margin-top: var(--space-xxs);
  margin-bottom: var(--space-xxs);
}
.my-2xxs {
  margin-top: var(--space-2xxs);
  margin-bottom: var(--space-2xxs);
}
.my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.my-2xs {
  margin-top: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}
.my-md {
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}
.my-2md {
  margin-top: var(--space-2md);
  margin-bottom: var(--space-2md);
}
.my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.my-2lg {
  margin-top: var(--space-2lg);
  margin-bottom: var(--space-2lg);
}
.my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
.my-xxl {
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-xxl);
}

/* margin auto (center) horizontal */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* margin auto (center) vertical */
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

/* padding - all sides */
.p-none {
  padding: 0;
}

.p-xxs {
  padding: var(--space-xxs);
}
.p-2xxs {
  padding: var(--space-2xxs);
}
.p-xs {
  padding: var(--space-xs);
}
.p-2xs {
  padding: var(--space-2xs);
}
.p-md {
  padding: var(--space-md);
}
.p-2md {
  padding: var(--space-2md);
}
.p-lg {
  padding: var(--space-lg);
}
.p-2lg {
  padding: var(--space-2lg);
}
.p-xl {
  padding: var(--space-xl);
}
.p-2xl {
  padding: var(--space-2xl);
}
.p-xxl {
  padding: var(--space-xxl);
}

/* padding top */
.pt-xxs {
  padding-top: var(--space-xxs);
}
.pt-2xxs {
  padding-top: var(--space-2xxs);
}
.pt-xs {
  padding-top: var(--space-xs);
}
.pt-2xs {
  padding-top: var(--space-2xs);
}
.pt-md {
  padding-top: var(--space-md);
}
.pt-2md {
  padding-top: var(--space-2md);
}
.pt-lg {
  padding-top: var(--space-lg);
}
.pt-2lg {
  padding-top: var(--space-2lg);
}
.pt-xl {
  padding-top: var(--space-xl);
}
.pt-2xl {
  padding-top: var(--space-2xl);
}
.pt-xxl {
  padding-top: var(--space-xxl);
}

/* padding right */
.pr-xxs {
  padding-right: var(--space-xxs);
}
.pr-2xxs {
  padding-right: var(--space-2xxs);
}
.pr-xs {
  padding-right: var(--space-xs);
}
.pr-2xs {
  padding-right: var(--space-2xs);
}
.pr-md {
  padding-right: var(--space-md);
}
.pr-2md {
  padding-right: var(--space-2md);
}
.pr-lg {
  padding-right: var(--space-lg);
}
.pr-2lg {
  padding-right: var(--space-2lg);
}
.pr-xl {
  padding-right: var(--space-xl);
}
.pr-2xl {
  padding-right: var(--space-2xl);
}
.pr-xxl {
  padding-right: var(--space-xxl);
}

/* padding bottom */
.pb-xxs {
  padding-bottom: var(--space-xxs);
}
.pb-2xxs {
  padding-bottom: var(--space-2xxs);
}
.pb-xs {
  padding-bottom: var(--space-xs);
}
.pb-2xs {
  padding-bottom: var(--space-2xs);
}
.pb-md {
  padding-bottom: var(--space-md);
}
.pb-2md {
  padding-bottom: var(--space-2md);
}
.pb-lg {
  padding-bottom: var(--space-lg);
}
.pb-2lg {
  padding-bottom: var(--space-2lg);
}
.pb-xl {
  padding-bottom: var(--space-xl);
}
.pb-2xl {
  padding-bottom: var(--space-2xl);
}
.pb-xxl {
  padding-bottom: var(--space-xxl);
}

/* padding left */
.pl-xxs {
  padding-left: var(--space-xxs);
}
.pl-2xxs {
  padding-left: var(--space-2xxs);
}
.pl-xs {
  padding-left: var(--space-xs);
}
.pl-2xs {
  padding-left: var(--space-2xs);
}
.pl-md {
  padding-left: var(--space-md);
}
.pl-2md {
  padding-left: var(--space-2md);
}
.pl-lg {
  padding-left: var(--space-lg);
}
.pl-2lg {
  padding-left: var(--space-2lg);
}
.pl-xl {
  padding-left: var(--space-xl);
}
.pl-2xl {
  padding-left: var(--space-2xl);
}
.pl-xxl {
  padding-left: var(--space-xxl);
}

/* padding x (left & right) with correction factor and aspect ratio scaling */
.px-xxs {
  padding-left: var(--hspace-xxs);
  padding-right: var(--hspace-xxs);
}
.px-2xxs {
  padding-left: var(--hspace-2xxs);
  padding-right: var(--hspace-2xxs);
}
.px-xs {
  padding-left: var(--hspace-xs);
  padding-right: var(--hspace-xs);
}
.px-2xs {
  padding-left: var(--hspace-2xs);
  padding-right: var(--hspace-2xs);
}
.px-md {
  padding-left: var(--hspace-md);
  padding-right: var(--hspace-md);
}
.px-2md {
  padding-left: var(--hspace-2md);
  padding-right: var(--hspace-2md);
}
.px-lg {
  padding-left: var(--hspace-lg);
  padding-right: var(--hspace-lg);
}
.px-2lg {
  padding-left: var(--hspace-2lg);
  padding-right: var(--hspace-2lg);
}
.px-xl {
  padding-left: var(--hspace-xl);
  padding-right: var(--hspace-xl);
}
.px-2xl {
  padding-left: var(--hspace-2xl);
  padding-right: var(--hspace-2xl);
}
.px-xxl {
  padding-left: var(--hspace-xxl);
  padding-right: var(--hspace-xxl);
}

/* padding y (top & bottom) */
.py-xxs {
  padding-top: var(--space-xxs);
  padding-bottom: var(--space-xxs);
}
.py-2xxs {
  padding-top: var(--space-2xxs);
  padding-bottom: var(--space-2xxs);
}
.py-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.py-2xs {
  padding-top: var(--space-2xs);
  padding-bottom: var(--space-2xs);
}
.py-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.py-2md {
  padding-top: var(--space-2md);
  padding-bottom: var(--space-2md);
}
.py-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.py-2lg {
  padding-top: var(--space-2lg);
  padding-bottom: var(--space-2lg);
}
.py-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.py-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.py-xxl {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

/* positioning */
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}

.top {
  top: 0;
}
.right {
  right: 0;
}
.bottom {
  bottom: 0;
}
.left {
  left: 0;
}

/* anchor styling */
a {
  color: var(--color-primary); /* default anchor color */
  text-decoration: none; /* remove underline */
  transition: color 0.3s ease; /* smooth color transition */
}

a:hover {
  color: var(--color-secondary); /* change color on hover */
  text-decoration: underline; /* underline on hover */
}

a:focus {
  outline: 2px solid var(--color-primary); /* focus outline for accessibility */
  outline-offset: 2px; /* space between outline and element */
}

/* border radius utilities */
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: 0.125rem;
} /* ~2px */
.rounded {
  border-radius: 0.25rem;
} /* ~4px */
.rounded-md {
  border-radius: 0.375rem;
} /* ~6px */
.rounded-lg {
  border-radius: 0.5rem;
} /* ~8px */
.rounded-xl {
  border-radius: 0.75rem;
} /* ~12px */
.rounded-2xl {
  border-radius: 1rem;
} /* ~16px */
.rounded-full {
  border-radius: 9999px;
} /* fully rounded */

/* shadow utilities */
.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px
    rgba(0, 0, 0, 0.06);
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px
    rgba(0, 0, 0, 0.05);
}
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px
    rgba(0, 0, 0, 0.04);
}
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.shadow-none {
  box-shadow: none;
}

/* border width utilities */
.border-0 {
  border-width: 0;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-8 {
  border-width: 8px;
}

/* border color utilities */
.border-primary {
  border-color: var(--color-primary);
}
.border-secondary {
  border-color: var(--color-secondary);
}
.border-foreground {
  border-color: var(--color-foreground);
}

/* opacity utilities */
.opacity-0 {
  opacity: 0;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-100 {
  opacity: 1;
}

/* width utilities */
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}

/* height utilities */
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}

/* border style utilities */
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-none {
  border-style: none;
}

/* overflow utilities */
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-scroll {
  overflow: scroll;
}

/* position utilities */
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}

/* z-index utilities */
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-60 {
  z-index: 60;
}
.z-70 {
  z-index: 70;
}
.z-80 {
  z-index: 80;
}
.z-90 {
  z-index: 90;
}
.z-100 {
  z-index: 100;
}

/* table utilities */
.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}
.table-header-group {
  display: table-header-group;
}
.table-footer-group {
  display: table-footer-group;
}
.table-row-group {
  display: table-row-group;
}
.table-column {
  display: table-column;
}
.table-column-group {
  display: table-column-group;
}
.table-caption {
  display: table-caption;
}

/* table border utilities */
.table-border-collapse {
  border-collapse: collapse;
}
.table-border-separate {
  border-collapse: separate;
}

/* table layout utilities */
.table-auto {
  table-layout: auto;
}
.table-fixed {
  table-layout: fixed;
}

/* table spacing utilities */
.table-cell-padding {
  padding: var(--space-xs);
}
.table-cell-padding-md {
  padding: var(--space-md);
}
.table-cell-padding-lg {
  padding: var(--space-lg);
}

/* table background utilities */
.table-bg-primary {
  background-color: var(--color-primary);
}
.table-bg-secondary {
  background-color: var(--color-secondary);
}
.table-bg-background {
  background-color: var(--color-background);
}

/* table text utilities */
.table-text-primary {
  color: var(--color-primary);
}
.table-text-secondary {
  color: var(--color-secondary);
}
.table-text-foreground {
  color: var(--color-foreground);
}

/* table border width utilities */
.table-border-0 {
  border-width: 0;
}
.table-border-1 {
  border-width: 1px;
}
.table-border-2 {
  border-width: 2px;
}
.table-border-4 {
  border-width: 4px;
}
.table-border-8 {
  border-width: 8px;
}

/* table border color utilities */
.table-border-primary {
  border-color: var(--color-primary);
}
.table-border-secondary {
  border-color: var(--color-secondary);
}
.table-border-foreground {
  border-color: var(--color-foreground);
}

/* table border style utilities */
.table-border-solid {
  border-style: solid;
}
.table-border-dashed {
  border-style: dashed;
}
.table-border-dotted {
  border-style: dotted;
}

/* table border radius utilities */
.table-rounded-none {
  border-radius: 0;
}
.table-rounded-sm {
  border-radius: 2px;
} /* 0.125rem */
.table-rounded-md {
  border-radius: 6px;
} /* 0.375rem */
.table-rounded-lg {
  border-radius: 8px;
} /* 0.5rem */
.table-rounded-full {
  border-radius: 50%;
} /* 9999px */

/* bg colors */
.bg-red-950 {
  background-color: var(--color-red-950);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-700 {
  background-color: var(--color-red-700);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-400 {
  background-color: var(--color-red-400);
}
.bg-red-300 {
  background-color: var(--color-red-300);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-50 {
  background-color: var(--color-red-50);
}

.bg-brown-950 {
  background-color: var(--color-brown-950);
}
.bg-brown-900 {
  background-color: var(--color-brown-900);
}
.bg-brown-800 {
  background-color: var(--color-brown-800);
}
.bg-brown-700 {
  background-color: var(--color-brown-700);
}
.bg-brown-600 {
  background-color: var(--color-brown-600);
}
.bg-brown-500 {
  background-color: var(--color-brown-500);
}
.bg-brown-400 {
  background-color: var(--color-brown-400);
}
.bg-brown-300 {
  background-color: var(--color-brown-300);
}
.bg-brown-200 {
  background-color: var(--color-brown-200);
}
.bg-brown-100 {
  background-color: var(--color-brown-100);
}
.bg-brown-50 {
  background-color: var(--color-brown-50);
}

.bg-orange-950 {
  background-color: var(--color-orange-950);
}
.bg-orange-900 {
  background-color: var(--color-orange-900);
}
.bg-orange-800 {
  background-color: var(--color-orange-800);
}
.bg-orange-700 {
  background-color: var(--color-orange-700);
}
.bg-orange-600 {
  background-color: var(--color-orange-600);
}
.bg-orange-500 {
  background-color: var(--color-orange-500);
}
.bg-orange-400 {
  background-color: var(--color-orange-400);
}
.bg-orange-300 {
  background-color: var(--color-orange-300);
}
.bg-orange-200 {
  background-color: var(--color-orange-200);
}
.bg-orange-100 {
  background-color: var(--color-orange-100);
}
.bg-orange-50 {
  background-color: var(--color-orange-50);
}

.bg-yellow-950 {
  background-color: var(--color-yellow-950);
}
.bg-yellow-900 {
  background-color: var(--color-yellow-900);
}
.bg-yellow-800 {
  background-color: var(--color-yellow-800);
}
.bg-yellow-700 {
  background-color: var(--color-yellow-700);
}
.bg-yellow-600 {
  background-color: var(--color-yellow-600);
}
.bg-yellow-500 {
  background-color: var(--color-yellow-500);
}
.bg-yellow-400 {
  background-color: var(--color-yellow-400);
}
.bg-yellow-300 {
  background-color: var(--color-yellow-300);
}
.bg-yellow-200 {
  background-color: var(--color-yellow-200);
}
.bg-yellow-100 {
  background-color: var(--color-yellow-100);
}
.bg-yellow-50 {
  background-color: var(--color-yellow-50);
}

.bg-chartreuse-950 {
  background-color: var(--color-chartreuse-950);
}
.bg-chartreuse-900 {
  background-color: var(--color-chartreuse-900);
}
.bg-chartreuse-800 {
  background-color: var(--color-chartreuse-800);
}
.bg-chartreuse-700 {
  background-color: var(--color-chartreuse-700);
}
.bg-chartreuse-600 {
  background-color: var(--color-chartreuse-600);
}
.bg-chartreuse-500 {
  background-color: var(--color-chartreuse-500);
}
.bg-chartreuse-400 {
  background-color: var(--color-chartreuse-400);
}
.bg-chartreuse-300 {
  background-color: var(--color-chartreuse-300);
}
.bg-chartreuse-200 {
  background-color: var(--color-chartreuse-200);
}
.bg-chartreuse-100 {
  background-color: var(--color-chartreuse-100);
}
.bg-chartreuse-50 {
  background-color: var(--color-chartreuse-50);
}

.bg-lime-950 {
  background-color: var(--color-lime-950);
}
.bg-lime-900 {
  background-color: var(--color-lime-900);
}
.bg-lime-800 {
  background-color: var(--color-lime-800);
}
.bg-lime-700 {
  background-color: var(--color-lime-700);
}
.bg-lime-600 {
  background-color: var(--color-lime-600);
}
.bg-lime-500 {
  background-color: var(--color-lime-500);
}
.bg-lime-400 {
  background-color: var(--color-lime-400);
}
.bg-lime-300 {
  background-color: var(--color-lime-300);
}
.bg-lime-200 {
  background-color: var(--color-lime-200);
}
.bg-lime-100 {
  background-color: var(--color-lime-100);
}
.bg-lime-50 {
  background-color: var(--color-lime-50);
}

.bg-green-950 {
  background-color: var(--color-green-950);
}
.bg-green-900 {
  background-color: var(--color-green-900);
}
.bg-green-800 {
  background-color: var(--color-green-800);
}
.bg-green-700 {
  background-color: var(--color-green-700);
}
.bg-green-600 {
  background-color: var(--color-green-600);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-green-400 {
  background-color: var(--color-green-400);
}
.bg-green-300 {
  background-color: var(--color-green-300);
}
.bg-green-200 {
  background-color: var(--color-green-200);
}
.bg-green-100 {
  background-color: var(--color-green-100);
}
.bg-green-50 {
  background-color: var(--color-green-50);
}

.bg-teal-950 {
  background-color: var(--color-teal-950);
}
.bg-teal-900 {
  background-color: var(--color-teal-900);
}
.bg-teal-800 {
  background-color: var(--color-teal-800);
}
.bg-teal-700 {
  background-color: var(--color-teal-700);
}
.bg-teal-600 {
  background-color: var(--color-teal-600);
}
.bg-teal-500 {
  background-color: var(--color-teal-500);
}
.bg-teal-400 {
  background-color: var(--color-teal-400);
}
.bg-teal-300 {
  background-color: var(--color-teal-300);
}
.bg-teal-200 {
  background-color: var(--color-teal-200);
}
.bg-teal-100 {
  background-color: var(--color-teal-100);
}
.bg-teal-50 {
  background-color: var(--color-teal-50);
}

.bg-cyan-950 {
  background-color: var(--color-cyan-950);
}
.bg-cyan-900 {
  background-color: var(--color-cyan-900);
}
.bg-cyan-800 {
  background-color: var(--color-cyan-800);
}
.bg-cyan-700 {
  background-color: var(--color-cyan-700);
}
.bg-cyan-600 {
  background-color: var(--color-cyan-600);
}
.bg-cyan-500 {
  background-color: var(--color-cyan-500);
}
.bg-cyan-400 {
  background-color: var(--color-cyan-400);
}
.bg-cyan-300 {
  background-color: var(--color-cyan-300);
}
.bg-cyan-200 {
  background-color: var(--color-cyan-200);
}
.bg-cyan-100 {
  background-color: var(--color-cyan-100);
}
.bg-cyan-50 {
  background-color: var(--color-cyan-50);
}

.bg-blue-950 {
  background-color: var(--color-blue-950);
}
.bg-blue-900 {
  background-color: var(--color-blue-900);
}
.bg-blue-800 {
  background-color: var(--color-blue-800);
}
.bg-blue-700 {
  background-color: var(--color-blue-700);
}
.bg-blue-600 {
  background-color: var(--color-blue-600);
}
.bg-blue-500 {
  background-color: var(--color-blue-500);
}
.bg-blue-400 {
  background-color: var(--color-blue-400);
}
.bg-blue-300 {
  background-color: var(--color-blue-300);
}
.bg-blue-200 {
  background-color: var(--color-blue-200);
}
.bg-blue-100 {
  background-color: var(--color-blue-100);
}
.bg-blue-50 {
  background-color: var(--color-blue-50);
}

.bg-purple-950 {
  background-color: var(--color-purple-950);
}
.bg-purple-900 {
  background-color: var(--color-purple-900);
}
.bg-purple-800 {
  background-color: var(--color-purple-800);
}
.bg-purple-700 {
  background-color: var(--color-purple-700);
}
.bg-purple-600 {
  background-color: var(--color-purple-600);
}
.bg-purple-500 {
  background-color: var(--color-purple-500);
}
.bg-purple-400 {
  background-color: var(--color-purple-400);
}
.bg-purple-300 {
  background-color: var(--color-purple-300);
}
.bg-purple-200 {
  background-color: var(--color-purple-200);
}
.bg-purple-100 {
  background-color: var(--color-purple-100);
}
.bg-purple-50 {
  background-color: var(--color-purple-50);
}

.bg-pink-950 {
  background-color: var(--color-pink-950);
}
.bg-pink-900 {
  background-color: var(--color-pink-900);
}
.bg-pink-800 {
  background-color: var(--color-pink-800);
}
.bg-pink-700 {
  background-color: var(--color-pink-700);
}
.bg-pink-600 {
  background-color: var(--color-pink-600);
}
.bg-pink-500 {
  background-color: var(--color-pink-500);
}
.bg-pink-400 {
  background-color: var(--color-pink-400);
}
.bg-pink-300 {
  background-color: var(--color-pink-300);
}
.bg-pink-200 {
  background-color: var(--color-pink-200);
}
.bg-pink-100 {
  background-color: var(--color-pink-100);
}
.bg-pink-50 {
  background-color: var(--color-pink-50);
}

/* media breakpoints for hiding elements */
@media (max-width: 639px) {
  .hide-xs {
    display: none;
  }
}

@media (max-width: 767px) {
  .hide-sm {
    display: none;
  }
}

@media (max-width: 1023px) {
  .hide-md {
    display: none;
  }
}

@media (max-width: 1279px) {
  .hide-lg {
    display: none;
  }
}

@media (max-width: 1535px) {
  .hide-xl {
    display: none;
  }
}