:root {
  --spacing: 0.25rem;
  --breakpoint-2xl: 96rem;

  /* Container */
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;

  /* Text */
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --text-sm: 0.875rem;
  --text-sm--line-height: calc(1.25 / 0.875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;

  /* Font Weight */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Tracking */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-widest: 0.1em;

  /* Leading */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Ease */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --blur-sm: 8px;
  --aspect-video: 16 / 9;
  --default-transition-duration: 0.15s;
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  /* Font Family */
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);

    /* Radius */
    --radius-xs: 0.125rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --radius-2xl: calc(var(--radius) + 8px);
    --radius-full: 50%;

  /* Shadow */
  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

}

.shadow-2xs {
  box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */
}
.shadow-xs {
  box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */
}
.shadow-sm {
  box-shadow: var(
    --shadow-sm
  ); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */
}
.shadow-md {
  box-shadow: var(
    --shadow-md
  ); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */
}
.shadow-lg {
  box-shadow: var(
    --shadow-lg
  ); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */
}
.shadow-xl {
  box-shadow: var(
    --shadow-xl
  ); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */
}
.shadow-2xl {
  box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */
}
.shadow-none {
  box-shadow: 0 0 #0000;
}
.rounded-xs {
  border-radius: var(--radius-xs); /* 0.125rem (2px) */
}
.rounded-sm {
  border-radius: var(--radius-sm); /* 0.25rem (4px) */
}
.rounded-md {
  border-radius: var(--radius-md); /* 0.375rem (6px) */
}
.rounded-lg {
  border-radius: var(--radius-lg); /* 0.5rem (8px) */
}
.rounded-xl {
  border-radius: var(--radius-xl); /* 0.75rem (12px) */
}
.rounded-2xl {
  border-radius: var(--radius-2xl); /* 1rem (16px) */
}
.rounded-3xl {
  border-radius: var(--radius-3xl); /* 1.5rem (24px) */
}
.rounded-4xl {
  border-radius: var(--radius-4xl); /* 2rem (32px) */
}
.rounded-none {
  border-radius: 0;
}
.rounded-full {
  border-radius: calc(infinity * 1px);
}
.font-weight-light {
  font-weight: var(--font-weight-light);
}
.font-weight-normal {
  font-weight: var(--font-weight-normal);
}
.font-weight-medium {
  font-weight: var(--font-weight-medium);
}
.font-weight-semibold {
  font-weight: var(--font-weight-semibold);
}
.font-weight-bold {
  font-weight: var(--font-weight-bold);
}
.font-weight-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.text-base {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
}
.text-lg {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}
.text-xl {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
}
.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
}
.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--tw-leading, var(--text-5xl--line-height));
}
.text-7xl {
  font-size: var(--text-7xl);
  line-height: var(--tw-leading, var(--text-7xl--line-height));
}