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

:root {
  /* 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-light: var(--color-mono-blue-50); /* light shade for background */
  --color-background: var(--color-mono-blue-200); /* using mono for background */
  --color-background-dark: var(--color-mono-blue-300); /* dark shade for background */

  --color-foreground-light: var(--color-mono-blue-700); /* light shade for foreground */
  --color-foreground: var(--color-mono-blue-900); /* using mono for foreground */
  --color-foreground-dark: var(--color-mono-blue-900); /* dark shade for foreground */

  /* spacing scale */
  --space-xxs: 0.25rem; /* ~4px  */
  --space-2xxs: 0.375rem; /* ~6px between xxs and xs */
  --space-xs: 0.5rem; /* 8px   */
  --space-2xs: 0.75rem; /* 12px between xs and md */
  --space-md: 1rem; /* 16px  */
  --space-2md: 1.5rem; /* 24px between md and lg */
  --space-lg: 2rem; /* 32px  */
  --space-2lg: 3rem; /* 48px between lg and xl */
  --space-xl: 4rem; /* 64px  */
  --space-2xl: 6rem; /* 96px between xl and xxl */
  --space-xxl: 8rem; /* 128px */

  /* 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(--defuss-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-light: var(--color-mono-blue-950);
  --color-background: var(--color-mono-blue-900);
  --color-background-dark: var(--color-mono-blue-800);

  --color-foreground-light: var(--color-mono-blue-50);
  --color-foreground: var(--color-mono-blue-100);
  --color-foreground-dark: var(--color-mono-blue-200);
}

/* 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-foreground-light {
  color: var(--color-foreground-light);
}
.text-foreground {
  color: var(--color-foreground);
}
.text-foreground-dark {
  color: var(--color-foreground-dark);
}

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

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

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

/* 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(--font-size-xxs);
}
.text-2xxs {
  font-size: var(--font-size-2xxs);
}
.text-xs {
  font-size: var(--font-size-xs);
}
.text-2xs {
  font-size: var(--font-size-2xs);
}
.text-base {
  font-size: var(--font-size-base);
}
.text-2base {
  font-size: var(--font-size-2base);
}
.text-md {
  font-size: var(--font-size-md);
}
.text-2md {
  font-size: var(--font-size-2md);
}
.text-lg {
  font-size: var(--font-size-lg);
}
.text-2lg {
  font-size: var(--font-size-2lg);
}
.text-xl {
  font-size: var(--font-size-xl);
}
.text-2xl {
  font-size: var(--font-size-2xl);
}
.text-22xl {
  font-size: var(--font-size-22xl);
}
.text-3xl {
  font-size: var(--font-size-3xl);
}

/* 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 {
  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-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-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) */
.px-xxs {
  padding-left: var(--space-xxs);
  padding-right: var(--space-xxs);
}
.px-2xxs {
  padding-left: var(--space-2xxs);
  padding-right: var(--space-2xxs);
}
.px-xs {
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}
.px-2xs {
  padding-left: var(--space-2xs);
  padding-right: var(--space-2xs);
}
.px-md {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}
.px-2md {
  padding-left: var(--space-2md);
  padding-right: var(--space-2md);
}
.px-lg {
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}
.px-2lg {
  padding-left: var(--space-2lg);
  padding-right: var(--space-2lg);
}
.px-xl {
  padding-left: var(--space-xl);
  padding-right: var(--space-xl);
}
.px-2xl {
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.px-xxl {
  padding-left: var(--space-xxl);
  padding-right: var(--space-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;
}

/* 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 */