/* Utilities */
/* Font Family */
.ff\:base {
  font-family: var(--font-base);
}

.ff\:subbase {
  font-family: var(--font-subbase);
}

.ff\:title {
  font-family: var(--font-title);
}

.ff\:subtitle {
  font-family: var(--font-subtitle);
}

/* Font Weight */
.fw\:100 {
  font-weight: 100;
}

.fw\:200 {
  font-weight: 200;
}

.fw\:300 {
  font-weight: 300;
}

.fw\:350 {
  font-weight: 350;
}

.fw\:400 {
  font-weight: 400;
}

.fw\:500 {
  font-weight: 500;
}

.fw\:600 {
  font-weight: 600;
}

.fw\:700 {
  font-weight: 700;
}

.fw\:750 {
  font-weight: 750;
}

.fw\:800 {
  font-weight: 800;
}

.fw\:900 {
  font-weight: 900;
}

.fw\:950 {
  font-weight: 950;
}

.fw\:normal {
  font-weight: normal;
}

.fw\:bold {
  font-weight: bold;
}

/* Font Style */
.fst\:normal {
  font-style: normal;
}

.fst\:italic {
  font-style: italic;
}

.fst\:oblique {
  font-style: oblique;
}

/* Font Size */
.fsz\:15 {
  font-size: clamp(14px, 13.7157px + 0.0669vw, 15px);
}

.fsz\:16 {
  font-size: clamp(15px, 14.7157px + 0.0669vw, 16px);
}

.fsz\:18 {
  font-size: clamp(16px, 15.4314px + 0.1338vw, 18px);
}

.fsz\:30 {
  font-size: clamp(24px, 22.2943px + 0.4013vw, 30px);
}

.fsz\:40 {
  font-size: clamp(27px, 23.3043px + 0.8696vw, 40px);
}

/* Line Height */
.leading\:tightest {
  line-height: 1;
}

.leading\:tight {
  line-height: 1.25;
}

.leading\:normal {
  line-height: 1.5;
}

.leading\:relaxed {
  line-height: 1.75;
}

.leading\:loose {
  line-height: 2;
}

.leading\:huge {
  line-height: 2.25;
}

.leading\:gigantic {
  line-height: 2.5;
}

/* Text Colors */
.text\:primary {
  color: var(--text-primary);
}

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

.text\:muted {
  color: var(--text-muted);
}

.text\:disabled {
  color: var(--text-disabled);
}

.text\:highlight {
  color: var(--text-highlight);
}

.text\:black {
  color: var(--text-black);
}

.text\:white {
  color: var(--text-white);
}

/* Theme Colors */
.text\:theme-brand {
  color: var(--theme-brand);
}

.bg\:theme-brand {
  background-color: var(--theme-brand);
}

.text\:theme-brand-light {
  color: var(--theme-brand-light);
}

.bg\:theme-brand-light {
  background-color: var(--theme-brand-light);
}

.text\:theme-accent {
  color: var(--theme-accent);
}

.bg\:theme-accent {
  background-color: var(--theme-accent);
}

.text\:theme-highlight {
  color: var(--theme-highlight);
}

.bg\:theme-highlight {
  background-color: var(--theme-highlight);
}

/* Gradients */
.text-gradent {
  display: table;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-background-clip: text;
          background-clip: text;
}

.gradient\:theme-vertical {
  background-image: var(--theme-gradient-vertical);
}
.gradient\:theme-horizontal {
  background-image: var(--theme-gradient-horizontal);
}
.gradient\:theme-reverse {
  background-image: var(--theme-gradient-reverse);
}
.gradient\:theme-inverted {
  background-image: var(--theme-gradient-inverted);
}

/* Section Spacing */
.py\:20 {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-block: 20px;
}

.my\:20 {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-block: 20px;
}

.py\:30 {
  padding-top: 30px;
  padding-bottom: 30px;
  padding-block: 30px;
}

.my\:30 {
  margin-top: 30px;
  margin-bottom: 30px;
  margin-block: 30px;
}

.py\:40 {
  padding-top: 40px;
  padding-bottom: 40px;
  padding-block: 40px;
}

.my\:40 {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-block: 40px;
}

.py\:50 {
  padding-top: 50px;
  padding-bottom: 50px;
  padding-block: 50px;
}

.my\:50 {
  margin-top: 50px;
  margin-bottom: 50px;
  margin-block: 50px;
}

.py\:60 {
  padding-top: 60px;
  padding-bottom: 60px;
  padding-block: 60px;
}

.my\:60 {
  margin-top: 60px;
  margin-bottom: 60px;
  margin-block: 60px;
}

.py\:70 {
  padding-top: 70px;
  padding-bottom: 70px;
  padding-block: 70px;
}

.my\:70 {
  margin-top: 70px;
  margin-bottom: 70px;
  margin-block: 70px;
}

.py\:80 {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-block: 80px;
}

.my\:80 {
  margin-top: 80px;
  margin-bottom: 80px;
  margin-block: 80px;
}

.py\:90 {
  padding-top: 90px;
  padding-bottom: 90px;
  padding-block: 90px;
}

.my\:90 {
  margin-top: 90px;
  margin-bottom: 90px;
  margin-block: 90px;
}

.py\:100 {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-block: 100px;
}

.my\:100 {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-block: 100px;
}

/* Margin Bottom */
.mb\:0\.5rem {
  margin-bottom: 0.5rem;
}
.mb\:1rem {
  margin-bottom: 1rem;
}
.mb\:1\.5rem {
  margin-bottom: 1.5rem;
}
.mb\:2rem {
  margin-bottom: 2rem;
}
.mb\:2\.5rem {
  margin-bottom: 2.5rem;
}

/* Quick Responsive */
.xl\:visible[class*=xl][class*=":visible"] {
  display: none;
}

.lg\:visible[class*=lg][class*=":visible"] {
  display: none;
}

.md\:visible[class*=md][class*=":visible"] {
  display: none;
}

.sm\:visible[class*=sm][class*=":visible"] {
  display: none;
}