:root {
  /* Text Size Variables */
  --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
  --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
  --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
  --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
  --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);
  --text-2xl: clamp(1.42rem, 0.87vw + 1.25rem, 1.94rem);

  /* Heading Size Variables */
  --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
  --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
  --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
  --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
  --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
  --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
  --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);

  /* Color Variables */
  --color-primary: #44c2b2;
  --color-secondary: #717271;
  --color-light: #daf3f0;
  --color-dark: #0e2724;
  --color-muted: #a2e1d9;

  --text-dark: #212121;
  --text-medium: #616161;
  --text-light: #9e9e9e;
  --text-info: #00b0f4;
  --text-success: #11b76b;
  --text-warning: #ffa100;
  --text-danger: #fa4362;

  --bg-info: #e5f3ff;
  --bg-success: #e6f6ed;
  --bg-warning: #fff2d7;
  --bg-danger: #ffe6ec;
  --bg-dark: #143a35;
  --bg-light: #ecf9f7;

  --border-color: #dddedf;
  --tooltip-bg: #23282d;
  --tooltip-text: #eaecef;

  /* Border Radius */
  --border-radius: 0.25rem;
}

:root {
  --bricks-color-primary: var(--color-primary);
  --bricks-color-secondary: var(--color-secondary);
  --bricks-text-dark: var(--text-dark);
  --bricks-text-medium: var(--text-medium);
  --bricks-text-light: var(--text-light);
  --bricks-text-info: var(--text-info);
  --bricks-text-success: var(--text-success);
  --bricks-text-warning: var(--text-warning);
  --bricks-text-danger: var(--text-danger);
  --bricks-bg-info: var(--bg-info);
  --bricks-bg-success: var(--bg-success);
  --bricks-bg-warning: var(--bg-warning);
  --bricks-bg-danger: var(--bg-danger);
  --bricks-bg-dark: var(--bg-dark);
  --bricks-bg-light: var(--bg-light);
  --bricks-border-color: var(--border-color);
  --bricks-border-radius: var(--border-radius);
  --bricks-tooltip-bg: var(--tooltip-bg);
  --bricks-tooltip-text: var(--tooltip-text);
}

/* Text Size Utilities */
.text-xs {
  font-size: var(--text-xs);
}
.text-s {
  font-size: var(--text-s);
}
.text-m {
  font-size: var(--text-m);
}
.text-l {
  font-size: var(--text-l);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}

/* Heading Size Utilities */
.h6 {
  font-size: var(--h6);
}
.h5 {
  font-size: var(--h5);
}
.h4 {
  font-size: var(--h4);
}
.h3 {
  font-size: var(--h3);
}
.h2 {
  font-size: var(--h2);
}
.h1 {
  font-size: var(--h1);
}
.h-title {
  font-size: var(--h-title);
}

/* Color Utilities */
.text-primary {
  color: var(--color-primary);
}
.text-secondary {
  color: var(--color-secondary);
}
.text-light {
  color: var(--color-light);
}
.text-dark {
  color: var(--color-dark);
}
.text-muted {
  color: var(--color-muted);
}

.bg-info {
  background-color: var(--bg-info);
}
.bg-success {
  background-color: var(--bg-success);
}
.bg-warning {
  background-color: var(--bg-warning);
}
.bg-danger {
  background-color: var(--bg-danger);
}
.bg-dark {
  background-color: var(--bg-dark);
}
.bg-light {
  background-color: var(--bg-light);
}