/* ====================== GRADIENT ====================== */
/* ====================== GRADIENT ====================== */
/* ====================== GRADIENT ====================== */

:root {
  --grad-angle: 135deg;
  --grad-from: var(--primary-500);
  --grad-to: var(--secondary-700);
  --grad-fill: var(--bg-c-surface);

  --grad-a1: 0.30;
  --grad-a2: 0.18;
  --grad-a3: 0.00;
}

.cstm-gradient-fill-surface { --grad-fill: var(--bg-c-surface); }
.cstm-gradient-fill-1       { --grad-fill: var(--bg-c-1); }
.cstm-gradient-fill-2       { --grad-fill: var(--bg-c-2); }
.cstm-gradient-fill-3       { --grad-fill: var(--bg-c-3); }

.cstm-gradient-direction-0   { --grad-angle: 0deg; }
.cstm-gradient-direction-30  { --grad-angle: 30deg; }
.cstm-gradient-direction-60  { --grad-angle: 60deg; }
.cstm-gradient-direction-90  { --grad-angle: 90deg; }
.cstm-gradient-direction-120  { --grad-angle: 120deg; }
.cstm-gradient-direction-150  { --grad-angle: 150deg; }
.cstm-gradient-direction-180  { --grad-angle: 180deg; }
.cstm-gradient-direction-210  { --grad-angle: 210deg; }
.cstm-gradient-direction-240  { --grad-angle: 240deg; }
.cstm-gradient-direction-270  { --grad-angle: 270deg; }
.cstm-gradient-direction-300  { --grad-angle: 300deg; }
.cstm-gradient-direction-330  { --grad-angle: 330deg; }

.cstm-gradient-strength-1 { --grad-a1: 0.18; --grad-a2: 0.10; --grad-a3: 0.00; }
.cstm-gradient-strength-2 { --grad-a1: 0.26; --grad-a2: 0.15; --grad-a3: 0.01; }
.cstm-gradient-strength-3 { --grad-a1: 0.34; --grad-a2: 0.20; --grad-a3: 0.02; }
.cstm-gradient-strength-5 { --grad-a1: 1; --grad-a2: 1; --grad-a3: 1; }

.cstm-background-gradient {
  background-image: linear-gradient(
    var(--grad-angle),
    hsla(var(--grad-from) / var(--grad-a1)) 0%,
    hsla(var(--grad-to) / var(--grad-a2)) 55%,
    hsla(var(--grad-to) / var(--grad-a3)) 100%
  );
  background-repeat: no-repeat;
}

.cstm-text-gradient {
  background-image: linear-gradient(
    var(--grad-angle),
    hsl(var(--grad-from)) 0%,
    hsl(var(--grad-to)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.cstm-border-gradient {
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(var(--grad-fill)), hsl(var(--grad-fill))) padding-box,
    linear-gradient(
      var(--grad-angle),
      hsla(var(--grad-from) / 0.95) 0%,
      hsla(var(--grad-to) / 0.75) 100%
    ) border-box;
  background-repeat: no-repeat;
}



/* ====================== GLASS ====================== */
/* ====================== GLASS ====================== */
/* ====================== GLASS ====================== */

:root{
  --glass-blur: 14px;
  --glass-alpha: 0.68;        /* przezroczystość tła */
  --glass-alpha-2: 0.56;      /* drugi stop w tle */
  --glass-border-alpha: 0.30; /* border glass */
  --glass-shadow-alpha: 0.18; /* shadow */
  --glass-tint-alpha: 0.12;   /* opcjonalny tint */
  --glass-tint: var(--blue-500); /* domyślny tint */
}

.cstm-glass{
  background:
    linear-gradient(
      135deg,
      hsla(var(--bg-c-surface) / var(--glass-alpha)) 0%,
      hsla(var(--bg-c-1) / var(--glass-alpha-2)) 100%
    );
  border: 1px solid hsla(var(--border-c-1) / var(--glass-border-alpha));
  box-shadow: 0 0.75rem 2rem hsla(var(--text-c-emphasis) / var(--glass-shadow-alpha));
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.cstm-glass-soft{
  --glass-blur: 10px;
  --glass-alpha: 0.78;
  --glass-alpha-2: 0.68;
  --glass-border-alpha: 0.26;
  --glass-shadow-alpha: 0.14;
}

.cstm-glass-medium{
  --glass-blur: 14px;
  --glass-alpha: 0.68;
  --glass-alpha-2: 0.56;
  --glass-border-alpha: 0.30;
  --glass-shadow-alpha: 0.18;
}

.cstm-glass-strong{
  --glass-blur: 18px;
  --glass-alpha: 0.58;
  --glass-alpha-2: 0.46;
  --glass-border-alpha: 0.34;
  --glass-shadow-alpha: 0.22;
}

.cstm-glass-tint{
  background:
    linear-gradient(
      135deg,
      hsla(var(--glass-tint) / var(--glass-tint-alpha)) 0%,
      hsla(var(--bg-c-surface) / var(--glass-alpha)) 55%,
      hsla(var(--bg-c-1) / var(--glass-alpha-2)) 100%
    );
}

.cstm-glass-tint-blue   { --glass-tint: var(--blue-500); }
.cstm-glass-tint-indigo { --glass-tint: var(--indigo-500); }
.cstm-glass-tint-purple { --glass-tint: var(--purple-500); }
.cstm-glass-tint-pink   { --glass-tint: var(--pink-500); }
.cstm-glass-tint-red    { --glass-tint: var(--red-500); }
.cstm-glass-tint-orange { --glass-tint: var(--orange-500); }
.cstm-glass-tint-yellow { --glass-tint: var(--yellow-500); }
.cstm-glass-tint-green  { --glass-tint: var(--green-500); }
.cstm-glass-tint-teal   { --glass-tint: var(--teal-500); }
.cstm-glass-tint-cyan   { --glass-tint: var(--cyan-500); }
.cstm-glass-tint-gray   { --glass-tint: var(--gray-500); }



/* ====================== GLOW ====================== */
/* ====================== GLOW ====================== */
/* ====================== GLOW ====================== */

:root{
  --glow-color: var(--blue-500);
  --glow-a: 0.22;     /* alpha */
  --glow-s1: 10px;    /* blur 1 */
  --glow-s2: 24px;    /* blur 2 */
  --glow-y1: 0px;     /* offset y 1 */
  --glow-y2: 8px;     /* offset y 2 */
}

.cstm-glow{
  box-shadow:
    0 var(--glow-y1) var(--glow-s1) hsla(var(--glow-color) / var(--glow-a)),
    0 var(--glow-y2) var(--glow-s2) hsla(var(--glow-color) / calc(var(--glow-a) * 0.70));
}

.cstm-glow-1{ --glow-a: 0.16; --glow-s1: 8px;  --glow-s2: 18px; --glow-y2: 6px; }
.cstm-glow-2{ --glow-a: 0.24; --glow-s1: 10px; --glow-s2: 26px; --glow-y2: 8px; }
.cstm-glow-3{ --glow-a: 0.34; --glow-s1: 14px; --glow-s2: 34px; --glow-y2: 10px; }

.cstm-glow-primary   { --glow-color: var(--primary-500); }
.cstm-glow-secondary   { --glow-color: var(--secondary-500); }
.cstm-glow-blue   { --glow-color: var(--blue-500); }
.cstm-glow-indigo { --glow-color: var(--indigo-500); }
.cstm-glow-purple { --glow-color: var(--purple-500); }
.cstm-glow-pink   { --glow-color: var(--pink-500); }
.cstm-glow-red    { --glow-color: var(--red-500); }
.cstm-glow-orange { --glow-color: var(--orange-500); }
.cstm-glow-yellow { --glow-color: var(--yellow-500); }
.cstm-glow-green  { --glow-color: var(--green-500); }
.cstm-glow-teal   { --glow-color: var(--teal-500); }
.cstm-glow-cyan   { --glow-color: var(--cyan-500); }
.cstm-glow-gray   { --glow-color: var(--gray-500); }




/* =========================
   MESH GRADIENT (CORE)
   - 4 plamy (radial-gradient)
   - sloty domyślnie OFF
   - plama aktywuje się dopiero po klasie cstm-mesh-el-*-*
   ========================= */

.cstm-mesh{
  --mesh-base: transparent;
  /* --mesh-base: hsl(var(--gray-100)); */
  --mesh-a: 0.22;

  /* sloty OFF domyślnie */
  --mesh-on-1: 0; --mesh-hsl-1: var(--gray-900);
  --mesh-on-2: 0; --mesh-hsl-2: var(--gray-900);
  --mesh-on-3: 0; --mesh-hsl-3: var(--gray-900);
  --mesh-on-4: 0; --mesh-hsl-4: var(--gray-900);

  --mesh-size-1: 55%;
  --mesh-size-2: 60%;
  --mesh-size-3: 55%;
  --mesh-size-4: 60%;

  --mesh-x1: 18%; --mesh-y1: 18%;
  --mesh-x2: 82%; --mesh-y2: 12%;
  --mesh-x3: 14%; --mesh-y3: 78%;
  --mesh-x4: 86%; --mesh-y4: 86%;

  background-color: var(--mesh-base);
  background-image:
    radial-gradient(circle at var(--mesh-x1) var(--mesh-y1),
      hsl(var(--mesh-hsl-1) / calc(var(--mesh-a) * 1.00 * var(--mesh-on-1))) 0%,
      hsl(var(--mesh-hsl-1) / 0) var(--mesh-size-1)
    ),
    radial-gradient(circle at var(--mesh-x2) var(--mesh-y2),
      hsl(var(--mesh-hsl-2) / calc(var(--mesh-a) * 0.85 * var(--mesh-on-2))) 0%,
      hsl(var(--mesh-hsl-2) / 0) var(--mesh-size-2)
    ),
    radial-gradient(circle at var(--mesh-x3) var(--mesh-y3),
      hsl(var(--mesh-hsl-3) / calc(var(--mesh-a) * 0.78 * var(--mesh-on-3))) 0%,
      hsl(var(--mesh-hsl-3) / 0) var(--mesh-size-3)
    ),
    radial-gradient(circle at var(--mesh-x4) var(--mesh-y4),
      hsl(var(--mesh-hsl-4) / calc(var(--mesh-a) * 0.70 * var(--mesh-on-4))) 0%,
      hsl(var(--mesh-hsl-4) / 0) var(--mesh-size-4)
    );

  background-repeat: no-repeat;
  background-size: cover;
}

/* =========================
   LAYOUTS (1–5)
   (pozycje + rozmiary plam)
   ========================= */

/* Layout 1: klasyczny diagonal (domyślny vibe) */
.cstm-mesh-1{
  --mesh-x1: 18%; --mesh-y1: 18%;
  --mesh-x2: 82%; --mesh-y2: 12%;
  --mesh-x3: 14%; --mesh-y3: 78%;
  --mesh-x4: 86%; --mesh-y4: 86%;
  --mesh-size-1: 56%;
  --mesh-size-2: 62%;
  --mesh-size-3: 58%;
  --mesh-size-4: 62%;
}

/* Layout 2: bardziej “hero” (góra mocniej, dół spokojniej) */
.cstm-mesh-2{
  --mesh-x1: 24%; --mesh-y1: 10%;
  --mesh-x2: 74%; --mesh-y2: 16%;
  --mesh-x3: 18%; --mesh-y3: 92%;
  --mesh-x4: 88%; --mesh-y4: 78%;
  --mesh-size-1: 60%;
  --mesh-size-2: 64%;
  --mesh-size-3: 52%;
  --mesh-size-4: 58%;
}

/* Layout 3: centralny “halo” (dobry pod sekcje) */
.cstm-mesh-3{
  --mesh-x1: 28%; --mesh-y1: 28%;
  --mesh-x2: 72%; --mesh-y2: 28%;
  --mesh-x3: 30%; --mesh-y3: 72%;
  --mesh-x4: 70%; --mesh-y4: 72%;
  --mesh-size-1: 64%;
  --mesh-size-2: 64%;
  --mesh-size-3: 64%;
  --mesh-size-4: 64%;
}

/* Layout 4: “edge glow” (plamy bardziej przy krawędziach) */
.cstm-mesh-4{
  --mesh-x1: 8%;  --mesh-y1: 42%;
  --mesh-x2: 92%; --mesh-y2: 36%;
  --mesh-x3: 14%; --mesh-y3: 92%;
  --mesh-x4: 86%; --mesh-y4: 8%;
  --mesh-size-1: 62%;
  --mesh-size-2: 62%;
  --mesh-size-3: 54%;
  --mesh-size-4: 54%;
}

/* Layout 5: “spotlight” (jedna mocniejsza plama + reszta miękko) */
.cstm-mesh-5{
  --mesh-x1: 35%; --mesh-y1: 20%;
  --mesh-x2: 85%; --mesh-y2: 25%;
  --mesh-x3: 20%; --mesh-y3: 85%;
  --mesh-x4: 70%; --mesh-y4: 90%;
  --mesh-size-1: 70%;
  --mesh-size-2: 56%;
  --mesh-size-3: 58%;
  --mesh-size-4: 52%;
}

/* =========================
   STRENGTH (1–3)
   ========================= */

.cstm-mesh-strength-1{ --mesh-a: 0.14; }
.cstm-mesh-strength-2{ --mesh-a: 0.22; }
.cstm-mesh-strength-3{ --mesh-a: 0.32; }

/* =========================
   MESH SLOTS (1–4) – THEME PALETTES
   palettes: primary, secondary, success, info, warning, danger
   weights: 100–900
   ========================= */

/* ========== EL-1 ========== */
/* primary */
.cstm-mesh-el-1-primary-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-100); }
.cstm-mesh-el-1-primary-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-200); }
.cstm-mesh-el-1-primary-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-300); }
.cstm-mesh-el-1-primary-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-400); }
.cstm-mesh-el-1-primary-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-500); }
.cstm-mesh-el-1-primary-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-600); }
.cstm-mesh-el-1-primary-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-700); }
.cstm-mesh-el-1-primary-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-800); }
.cstm-mesh-el-1-primary-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--primary-900); }

/* secondary */
.cstm-mesh-el-1-secondary-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-100); }
.cstm-mesh-el-1-secondary-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-200); }
.cstm-mesh-el-1-secondary-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-300); }
.cstm-mesh-el-1-secondary-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-400); }
.cstm-mesh-el-1-secondary-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-500); }
.cstm-mesh-el-1-secondary-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-600); }
.cstm-mesh-el-1-secondary-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-700); }
.cstm-mesh-el-1-secondary-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-800); }
.cstm-mesh-el-1-secondary-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--secondary-900); }

/* success */
.cstm-mesh-el-1-success-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-100); }
.cstm-mesh-el-1-success-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-200); }
.cstm-mesh-el-1-success-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-300); }
.cstm-mesh-el-1-success-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-400); }
.cstm-mesh-el-1-success-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-500); }
.cstm-mesh-el-1-success-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-600); }
.cstm-mesh-el-1-success-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-700); }
.cstm-mesh-el-1-success-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-800); }
.cstm-mesh-el-1-success-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--success-900); }

/* info */
.cstm-mesh-el-1-info-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-100); }
.cstm-mesh-el-1-info-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-200); }
.cstm-mesh-el-1-info-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-300); }
.cstm-mesh-el-1-info-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-400); }
.cstm-mesh-el-1-info-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-500); }
.cstm-mesh-el-1-info-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-600); }
.cstm-mesh-el-1-info-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-700); }
.cstm-mesh-el-1-info-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-800); }
.cstm-mesh-el-1-info-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--info-900); }

/* warning */
.cstm-mesh-el-1-warning-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-100); }
.cstm-mesh-el-1-warning-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-200); }
.cstm-mesh-el-1-warning-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-300); }
.cstm-mesh-el-1-warning-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-400); }
.cstm-mesh-el-1-warning-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-500); }
.cstm-mesh-el-1-warning-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-600); }
.cstm-mesh-el-1-warning-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-700); }
.cstm-mesh-el-1-warning-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-800); }
.cstm-mesh-el-1-warning-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--warning-900); }

/* danger */
.cstm-mesh-el-1-danger-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-100); }
.cstm-mesh-el-1-danger-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-200); }
.cstm-mesh-el-1-danger-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-300); }
.cstm-mesh-el-1-danger-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-400); }
.cstm-mesh-el-1-danger-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-500); }
.cstm-mesh-el-1-danger-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-600); }
.cstm-mesh-el-1-danger-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-700); }
.cstm-mesh-el-1-danger-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-800); }
.cstm-mesh-el-1-danger-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--danger-900); }


/* ========== EL-2 ========== */
/* primary */
.cstm-mesh-el-2-primary-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-100); }
.cstm-mesh-el-2-primary-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-200); }
.cstm-mesh-el-2-primary-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-300); }
.cstm-mesh-el-2-primary-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-400); }
.cstm-mesh-el-2-primary-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-500); }
.cstm-mesh-el-2-primary-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-600); }
.cstm-mesh-el-2-primary-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-700); }
.cstm-mesh-el-2-primary-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-800); }
.cstm-mesh-el-2-primary-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--primary-900); }

/* secondary */
.cstm-mesh-el-2-secondary-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-100); }
.cstm-mesh-el-2-secondary-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-200); }
.cstm-mesh-el-2-secondary-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-300); }
.cstm-mesh-el-2-secondary-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-400); }
.cstm-mesh-el-2-secondary-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-500); }
.cstm-mesh-el-2-secondary-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-600); }
.cstm-mesh-el-2-secondary-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-700); }
.cstm-mesh-el-2-secondary-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-800); }
.cstm-mesh-el-2-secondary-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--secondary-900); }

/* success */
.cstm-mesh-el-2-success-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-100); }
.cstm-mesh-el-2-success-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-200); }
.cstm-mesh-el-2-success-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-300); }
.cstm-mesh-el-2-success-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-400); }
.cstm-mesh-el-2-success-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-500); }
.cstm-mesh-el-2-success-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-600); }
.cstm-mesh-el-2-success-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-700); }
.cstm-mesh-el-2-success-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-800); }
.cstm-mesh-el-2-success-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--success-900); }

/* info */
.cstm-mesh-el-2-info-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-100); }
.cstm-mesh-el-2-info-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-200); }
.cstm-mesh-el-2-info-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-300); }
.cstm-mesh-el-2-info-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-400); }
.cstm-mesh-el-2-info-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-500); }
.cstm-mesh-el-2-info-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-600); }
.cstm-mesh-el-2-info-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-700); }
.cstm-mesh-el-2-info-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-800); }
.cstm-mesh-el-2-info-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--info-900); }

/* warning */
.cstm-mesh-el-2-warning-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-100); }
.cstm-mesh-el-2-warning-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-200); }
.cstm-mesh-el-2-warning-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-300); }
.cstm-mesh-el-2-warning-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-400); }
.cstm-mesh-el-2-warning-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-500); }
.cstm-mesh-el-2-warning-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-600); }
.cstm-mesh-el-2-warning-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-700); }
.cstm-mesh-el-2-warning-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-800); }
.cstm-mesh-el-2-warning-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--warning-900); }

/* danger */
.cstm-mesh-el-2-danger-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-100); }
.cstm-mesh-el-2-danger-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-200); }
.cstm-mesh-el-2-danger-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-300); }
.cstm-mesh-el-2-danger-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-400); }
.cstm-mesh-el-2-danger-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-500); }
.cstm-mesh-el-2-danger-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-600); }
.cstm-mesh-el-2-danger-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-700); }
.cstm-mesh-el-2-danger-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-800); }
.cstm-mesh-el-2-danger-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--danger-900); }


/* ========== EL-3 ========== */
/* primary */
.cstm-mesh-el-3-primary-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-100); }
.cstm-mesh-el-3-primary-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-200); }
.cstm-mesh-el-3-primary-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-300); }
.cstm-mesh-el-3-primary-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-400); }
.cstm-mesh-el-3-primary-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-500); }
.cstm-mesh-el-3-primary-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-600); }
.cstm-mesh-el-3-primary-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-700); }
.cstm-mesh-el-3-primary-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-800); }
.cstm-mesh-el-3-primary-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--primary-900); }

/* secondary */
.cstm-mesh-el-3-secondary-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-100); }
.cstm-mesh-el-3-secondary-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-200); }
.cstm-mesh-el-3-secondary-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-300); }
.cstm-mesh-el-3-secondary-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-400); }
.cstm-mesh-el-3-secondary-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-500); }
.cstm-mesh-el-3-secondary-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-600); }
.cstm-mesh-el-3-secondary-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-700); }
.cstm-mesh-el-3-secondary-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-800); }
.cstm-mesh-el-3-secondary-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--secondary-900); }

/* success */
.cstm-mesh-el-3-success-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-100); }
.cstm-mesh-el-3-success-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-200); }
.cstm-mesh-el-3-success-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-300); }
.cstm-mesh-el-3-success-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-400); }
.cstm-mesh-el-3-success-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-500); }
.cstm-mesh-el-3-success-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-600); }
.cstm-mesh-el-3-success-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-700); }
.cstm-mesh-el-3-success-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-800); }
.cstm-mesh-el-3-success-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--success-900); }

/* info */
.cstm-mesh-el-3-info-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-100); }
.cstm-mesh-el-3-info-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-200); }
.cstm-mesh-el-3-info-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-300); }
.cstm-mesh-el-3-info-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-400); }
.cstm-mesh-el-3-info-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-500); }
.cstm-mesh-el-3-info-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-600); }
.cstm-mesh-el-3-info-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-700); }
.cstm-mesh-el-3-info-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-800); }
.cstm-mesh-el-3-info-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--info-900); }

/* warning */
.cstm-mesh-el-3-warning-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-100); }
.cstm-mesh-el-3-warning-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-200); }
.cstm-mesh-el-3-warning-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-300); }
.cstm-mesh-el-3-warning-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-400); }
.cstm-mesh-el-3-warning-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-500); }
.cstm-mesh-el-3-warning-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-600); }
.cstm-mesh-el-3-warning-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-700); }
.cstm-mesh-el-3-warning-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-800); }
.cstm-mesh-el-3-warning-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--warning-900); }

/* danger */
.cstm-mesh-el-3-danger-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-100); }
.cstm-mesh-el-3-danger-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-200); }
.cstm-mesh-el-3-danger-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-300); }
.cstm-mesh-el-3-danger-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-400); }
.cstm-mesh-el-3-danger-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-500); }
.cstm-mesh-el-3-danger-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-600); }
.cstm-mesh-el-3-danger-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-700); }
.cstm-mesh-el-3-danger-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-800); }
.cstm-mesh-el-3-danger-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--danger-900); }


/* ========== EL-4 ========== */
/* primary */
.cstm-mesh-el-4-primary-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-100); }
.cstm-mesh-el-4-primary-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-200); }
.cstm-mesh-el-4-primary-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-300); }
.cstm-mesh-el-4-primary-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-400); }
.cstm-mesh-el-4-primary-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-500); }
.cstm-mesh-el-4-primary-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-600); }
.cstm-mesh-el-4-primary-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-700); }
.cstm-mesh-el-4-primary-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-800); }
.cstm-mesh-el-4-primary-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--primary-900); }

/* secondary */
.cstm-mesh-el-4-secondary-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-100); }
.cstm-mesh-el-4-secondary-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-200); }
.cstm-mesh-el-4-secondary-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-300); }
.cstm-mesh-el-4-secondary-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-400); }
.cstm-mesh-el-4-secondary-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-500); }
.cstm-mesh-el-4-secondary-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-600); }
.cstm-mesh-el-4-secondary-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-700); }
.cstm-mesh-el-4-secondary-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-800); }
.cstm-mesh-el-4-secondary-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--secondary-900); }

/* success */
.cstm-mesh-el-4-success-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-100); }
.cstm-mesh-el-4-success-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-200); }
.cstm-mesh-el-4-success-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-300); }
.cstm-mesh-el-4-success-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-400); }
.cstm-mesh-el-4-success-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-500); }
.cstm-mesh-el-4-success-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-600); }
.cstm-mesh-el-4-success-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-700); }
.cstm-mesh-el-4-success-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-800); }
.cstm-mesh-el-4-success-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--success-900); }

/* info */
.cstm-mesh-el-4-info-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-100); }
.cstm-mesh-el-4-info-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-200); }
.cstm-mesh-el-4-info-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-300); }
.cstm-mesh-el-4-info-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-400); }
.cstm-mesh-el-4-info-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-500); }
.cstm-mesh-el-4-info-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-600); }
.cstm-mesh-el-4-info-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-700); }
.cstm-mesh-el-4-info-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-800); }
.cstm-mesh-el-4-info-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--info-900); }

/* warning */
.cstm-mesh-el-4-warning-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-100); }
.cstm-mesh-el-4-warning-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-200); }
.cstm-mesh-el-4-warning-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-300); }
.cstm-mesh-el-4-warning-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-400); }
.cstm-mesh-el-4-warning-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-500); }
.cstm-mesh-el-4-warning-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-600); }
.cstm-mesh-el-4-warning-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-700); }
.cstm-mesh-el-4-warning-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-800); }
.cstm-mesh-el-4-warning-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--warning-900); }

/* danger */
.cstm-mesh-el-4-danger-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-100); }
.cstm-mesh-el-4-danger-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-200); }
.cstm-mesh-el-4-danger-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-300); }
.cstm-mesh-el-4-danger-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-400); }
.cstm-mesh-el-4-danger-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-500); }
.cstm-mesh-el-4-danger-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-600); }
.cstm-mesh-el-4-danger-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-700); }
.cstm-mesh-el-4-danger-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-800); }
.cstm-mesh-el-4-danger-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--danger-900); }


/* =========================
   MESH SLOTS (1–4) – PALETTES WITH WEIGHTS
   palettes: blue, indigo, purple, pink, red
   weights: 100–900
   ========================= */

/* =========================================================
   BLUE (100–900)
   ========================================================= */

/* EL-1 */
.cstm-mesh-el-1-blue-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-100); }
.cstm-mesh-el-1-blue-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-200); }
.cstm-mesh-el-1-blue-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-300); }
.cstm-mesh-el-1-blue-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-400); }
.cstm-mesh-el-1-blue-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-500); }
.cstm-mesh-el-1-blue-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-600); }
.cstm-mesh-el-1-blue-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-700); }
.cstm-mesh-el-1-blue-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-800); }
.cstm-mesh-el-1-blue-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--blue-900); }

/* EL-2 */
.cstm-mesh-el-2-blue-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-100); }
.cstm-mesh-el-2-blue-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-200); }
.cstm-mesh-el-2-blue-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-300); }
.cstm-mesh-el-2-blue-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-400); }
.cstm-mesh-el-2-blue-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-500); }
.cstm-mesh-el-2-blue-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-600); }
.cstm-mesh-el-2-blue-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-700); }
.cstm-mesh-el-2-blue-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-800); }
.cstm-mesh-el-2-blue-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--blue-900); }

/* EL-3 */
.cstm-mesh-el-3-blue-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-100); }
.cstm-mesh-el-3-blue-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-200); }
.cstm-mesh-el-3-blue-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-300); }
.cstm-mesh-el-3-blue-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-400); }
.cstm-mesh-el-3-blue-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-500); }
.cstm-mesh-el-3-blue-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-600); }
.cstm-mesh-el-3-blue-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-700); }
.cstm-mesh-el-3-blue-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-800); }
.cstm-mesh-el-3-blue-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--blue-900); }

/* EL-4 */
.cstm-mesh-el-4-blue-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-100); }
.cstm-mesh-el-4-blue-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-200); }
.cstm-mesh-el-4-blue-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-300); }
.cstm-mesh-el-4-blue-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-400); }
.cstm-mesh-el-4-blue-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-500); }
.cstm-mesh-el-4-blue-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-600); }
.cstm-mesh-el-4-blue-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-700); }
.cstm-mesh-el-4-blue-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-800); }
.cstm-mesh-el-4-blue-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--blue-900); }


/* =========================================================
   INDIGO (100–900)
   ========================================================= */

/* EL-1 */
.cstm-mesh-el-1-indigo-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-100); }
.cstm-mesh-el-1-indigo-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-200); }
.cstm-mesh-el-1-indigo-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-300); }
.cstm-mesh-el-1-indigo-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-400); }
.cstm-mesh-el-1-indigo-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-500); }
.cstm-mesh-el-1-indigo-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-600); }
.cstm-mesh-el-1-indigo-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-700); }
.cstm-mesh-el-1-indigo-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-800); }
.cstm-mesh-el-1-indigo-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--indigo-900); }

/* EL-2 */
.cstm-mesh-el-2-indigo-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-100); }
.cstm-mesh-el-2-indigo-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-200); }
.cstm-mesh-el-2-indigo-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-300); }
.cstm-mesh-el-2-indigo-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-400); }
.cstm-mesh-el-2-indigo-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-500); }
.cstm-mesh-el-2-indigo-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-600); }
.cstm-mesh-el-2-indigo-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-700); }
.cstm-mesh-el-2-indigo-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-800); }
.cstm-mesh-el-2-indigo-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--indigo-900); }

/* EL-3 */
.cstm-mesh-el-3-indigo-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-100); }
.cstm-mesh-el-3-indigo-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-200); }
.cstm-mesh-el-3-indigo-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-300); }
.cstm-mesh-el-3-indigo-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-400); }
.cstm-mesh-el-3-indigo-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-500); }
.cstm-mesh-el-3-indigo-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-600); }
.cstm-mesh-el-3-indigo-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-700); }
.cstm-mesh-el-3-indigo-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-800); }
.cstm-mesh-el-3-indigo-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--indigo-900); }

/* EL-4 */
.cstm-mesh-el-4-indigo-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-100); }
.cstm-mesh-el-4-indigo-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-200); }
.cstm-mesh-el-4-indigo-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-300); }
.cstm-mesh-el-4-indigo-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-400); }
.cstm-mesh-el-4-indigo-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-500); }
.cstm-mesh-el-4-indigo-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-600); }
.cstm-mesh-el-4-indigo-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-700); }
.cstm-mesh-el-4-indigo-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-800); }
.cstm-mesh-el-4-indigo-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--indigo-900); }


/* =========================================================
   PURPLE (100–900)
   ========================================================= */

/* EL-1 */
.cstm-mesh-el-1-purple-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-100); }
.cstm-mesh-el-1-purple-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-200); }
.cstm-mesh-el-1-purple-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-300); }
.cstm-mesh-el-1-purple-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-400); }
.cstm-mesh-el-1-purple-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-500); }
.cstm-mesh-el-1-purple-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-600); }
.cstm-mesh-el-1-purple-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-700); }
.cstm-mesh-el-1-purple-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-800); }
.cstm-mesh-el-1-purple-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--purple-900); }

/* EL-2 */
.cstm-mesh-el-2-purple-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-100); }
.cstm-mesh-el-2-purple-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-200); }
.cstm-mesh-el-2-purple-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-300); }
.cstm-mesh-el-2-purple-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-400); }
.cstm-mesh-el-2-purple-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-500); }
.cstm-mesh-el-2-purple-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-600); }
.cstm-mesh-el-2-purple-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-700); }
.cstm-mesh-el-2-purple-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-800); }
.cstm-mesh-el-2-purple-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--purple-900); }

/* EL-3 */
.cstm-mesh-el-3-purple-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-100); }
.cstm-mesh-el-3-purple-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-200); }
.cstm-mesh-el-3-purple-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-300); }
.cstm-mesh-el-3-purple-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-400); }
.cstm-mesh-el-3-purple-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-500); }
.cstm-mesh-el-3-purple-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-600); }
.cstm-mesh-el-3-purple-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-700); }
.cstm-mesh-el-3-purple-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-800); }
.cstm-mesh-el-3-purple-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--purple-900); }

/* EL-4 */
.cstm-mesh-el-4-purple-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-100); }
.cstm-mesh-el-4-purple-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-200); }
.cstm-mesh-el-4-purple-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-300); }
.cstm-mesh-el-4-purple-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-400); }
.cstm-mesh-el-4-purple-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-500); }
.cstm-mesh-el-4-purple-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-600); }
.cstm-mesh-el-4-purple-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-700); }
.cstm-mesh-el-4-purple-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-800); }
.cstm-mesh-el-4-purple-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--purple-900); }


/* =========================================================
   PINK (100–900)
   ========================================================= */

/* EL-1 */
.cstm-mesh-el-1-pink-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-100); }
.cstm-mesh-el-1-pink-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-200); }
.cstm-mesh-el-1-pink-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-300); }
.cstm-mesh-el-1-pink-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-400); }
.cstm-mesh-el-1-pink-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-500); }
.cstm-mesh-el-1-pink-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-600); }
.cstm-mesh-el-1-pink-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-700); }
.cstm-mesh-el-1-pink-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-800); }
.cstm-mesh-el-1-pink-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--pink-900); }

/* EL-2 */
.cstm-mesh-el-2-pink-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-100); }
.cstm-mesh-el-2-pink-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-200); }
.cstm-mesh-el-2-pink-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-300); }
.cstm-mesh-el-2-pink-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-400); }
.cstm-mesh-el-2-pink-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-500); }
.cstm-mesh-el-2-pink-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-600); }
.cstm-mesh-el-2-pink-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-700); }
.cstm-mesh-el-2-pink-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-800); }
.cstm-mesh-el-2-pink-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--pink-900); }

/* EL-3 */
.cstm-mesh-el-3-pink-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-100); }
.cstm-mesh-el-3-pink-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-200); }
.cstm-mesh-el-3-pink-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-300); }
.cstm-mesh-el-3-pink-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-400); }
.cstm-mesh-el-3-pink-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-500); }
.cstm-mesh-el-3-pink-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-600); }
.cstm-mesh-el-3-pink-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-700); }
.cstm-mesh-el-3-pink-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-800); }
.cstm-mesh-el-3-pink-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--pink-900); }

/* EL-4 */
.cstm-mesh-el-4-pink-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-100); }
.cstm-mesh-el-4-pink-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-200); }
.cstm-mesh-el-4-pink-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-300); }
.cstm-mesh-el-4-pink-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-400); }
.cstm-mesh-el-4-pink-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-500); }
.cstm-mesh-el-4-pink-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-600); }
.cstm-mesh-el-4-pink-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-700); }
.cstm-mesh-el-4-pink-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-800); }
.cstm-mesh-el-4-pink-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--pink-900); }


/* =========================================================
   RED (100–900)
   ========================================================= */

/* EL-1 */
.cstm-mesh-el-1-red-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-100); }
.cstm-mesh-el-1-red-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-200); }
.cstm-mesh-el-1-red-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-300); }
.cstm-mesh-el-1-red-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-400); }
.cstm-mesh-el-1-red-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-500); }
.cstm-mesh-el-1-red-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-600); }
.cstm-mesh-el-1-red-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-700); }
.cstm-mesh-el-1-red-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-800); }
.cstm-mesh-el-1-red-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--red-900); }

/* EL-2 */
.cstm-mesh-el-2-red-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-100); }
.cstm-mesh-el-2-red-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-200); }
.cstm-mesh-el-2-red-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-300); }
.cstm-mesh-el-2-red-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-400); }
.cstm-mesh-el-2-red-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-500); }
.cstm-mesh-el-2-red-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-600); }
.cstm-mesh-el-2-red-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-700); }
.cstm-mesh-el-2-red-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-800); }
.cstm-mesh-el-2-red-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--red-900); }

/* EL-3 */
.cstm-mesh-el-3-red-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-100); }
.cstm-mesh-el-3-red-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-200); }
.cstm-mesh-el-3-red-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-300); }
.cstm-mesh-el-3-red-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-400); }
.cstm-mesh-el-3-red-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-500); }
.cstm-mesh-el-3-red-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-600); }
.cstm-mesh-el-3-red-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-700); }
.cstm-mesh-el-3-red-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-800); }
.cstm-mesh-el-3-red-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--red-900); }

/* EL-4 */
.cstm-mesh-el-4-red-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-100); }
.cstm-mesh-el-4-red-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-200); }
.cstm-mesh-el-4-red-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-300); }
.cstm-mesh-el-4-red-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-400); }
.cstm-mesh-el-4-red-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-500); }
.cstm-mesh-el-4-red-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-600); }
.cstm-mesh-el-4-red-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-700); }
.cstm-mesh-el-4-red-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-800); }
.cstm-mesh-el-4-red-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--red-900); }

/* =========================
   ORANGE (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-orange-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-100); }
.cstm-mesh-el-1-orange-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-200); }
.cstm-mesh-el-1-orange-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-300); }
.cstm-mesh-el-1-orange-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-400); }
.cstm-mesh-el-1-orange-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-500); }
.cstm-mesh-el-1-orange-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-600); }
.cstm-mesh-el-1-orange-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-700); }
.cstm-mesh-el-1-orange-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-800); }
.cstm-mesh-el-1-orange-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--orange-900); }

/* EL-2 */
.cstm-mesh-el-2-orange-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-100); }
.cstm-mesh-el-2-orange-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-200); }
.cstm-mesh-el-2-orange-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-300); }
.cstm-mesh-el-2-orange-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-400); }
.cstm-mesh-el-2-orange-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-500); }
.cstm-mesh-el-2-orange-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-600); }
.cstm-mesh-el-2-orange-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-700); }
.cstm-mesh-el-2-orange-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-800); }
.cstm-mesh-el-2-orange-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--orange-900); }

/* EL-3 */
.cstm-mesh-el-3-orange-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-100); }
.cstm-mesh-el-3-orange-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-200); }
.cstm-mesh-el-3-orange-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-300); }
.cstm-mesh-el-3-orange-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-400); }
.cstm-mesh-el-3-orange-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-500); }
.cstm-mesh-el-3-orange-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-600); }
.cstm-mesh-el-3-orange-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-700); }
.cstm-mesh-el-3-orange-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-800); }
.cstm-mesh-el-3-orange-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--orange-900); }

/* EL-4 */
.cstm-mesh-el-4-orange-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-100); }
.cstm-mesh-el-4-orange-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-200); }
.cstm-mesh-el-4-orange-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-300); }
.cstm-mesh-el-4-orange-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-400); }
.cstm-mesh-el-4-orange-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-500); }
.cstm-mesh-el-4-orange-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-600); }
.cstm-mesh-el-4-orange-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-700); }
.cstm-mesh-el-4-orange-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-800); }
.cstm-mesh-el-4-orange-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--orange-900); }


/* =========================
   YELLOW (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-yellow-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-100); }
.cstm-mesh-el-1-yellow-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-200); }
.cstm-mesh-el-1-yellow-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-300); }
.cstm-mesh-el-1-yellow-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-400); }
.cstm-mesh-el-1-yellow-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-500); }
.cstm-mesh-el-1-yellow-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-600); }
.cstm-mesh-el-1-yellow-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-700); }
.cstm-mesh-el-1-yellow-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-800); }
.cstm-mesh-el-1-yellow-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--yellow-900); }

/* EL-2 */
.cstm-mesh-el-2-yellow-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-100); }
.cstm-mesh-el-2-yellow-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-200); }
.cstm-mesh-el-2-yellow-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-300); }
.cstm-mesh-el-2-yellow-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-400); }
.cstm-mesh-el-2-yellow-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-500); }
.cstm-mesh-el-2-yellow-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-600); }
.cstm-mesh-el-2-yellow-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-700); }
.cstm-mesh-el-2-yellow-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-800); }
.cstm-mesh-el-2-yellow-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--yellow-900); }

/* EL-3 */
.cstm-mesh-el-3-yellow-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-100); }
.cstm-mesh-el-3-yellow-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-200); }
.cstm-mesh-el-3-yellow-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-300); }
.cstm-mesh-el-3-yellow-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-400); }
.cstm-mesh-el-3-yellow-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-500); }
.cstm-mesh-el-3-yellow-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-600); }
.cstm-mesh-el-3-yellow-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-700); }
.cstm-mesh-el-3-yellow-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-800); }
.cstm-mesh-el-3-yellow-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--yellow-900); }

/* EL-4 */
.cstm-mesh-el-4-yellow-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-100); }
.cstm-mesh-el-4-yellow-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-200); }
.cstm-mesh-el-4-yellow-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-300); }
.cstm-mesh-el-4-yellow-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-400); }
.cstm-mesh-el-4-yellow-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-500); }
.cstm-mesh-el-4-yellow-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-600); }
.cstm-mesh-el-4-yellow-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-700); }
.cstm-mesh-el-4-yellow-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-800); }
.cstm-mesh-el-4-yellow-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--yellow-900); }


/* =========================
   GREEN (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-green-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-100); }
.cstm-mesh-el-1-green-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-200); }
.cstm-mesh-el-1-green-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-300); }
.cstm-mesh-el-1-green-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-400); }
.cstm-mesh-el-1-green-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-500); }
.cstm-mesh-el-1-green-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-600); }
.cstm-mesh-el-1-green-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-700); }
.cstm-mesh-el-1-green-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-800); }
.cstm-mesh-el-1-green-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--green-900); }

/* EL-2 */
.cstm-mesh-el-2-green-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-100); }
.cstm-mesh-el-2-green-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-200); }
.cstm-mesh-el-2-green-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-300); }
.cstm-mesh-el-2-green-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-400); }
.cstm-mesh-el-2-green-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-500); }
.cstm-mesh-el-2-green-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-600); }
.cstm-mesh-el-2-green-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-700); }
.cstm-mesh-el-2-green-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-800); }
.cstm-mesh-el-2-green-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--green-900); }

/* EL-3 */
.cstm-mesh-el-3-green-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-100); }
.cstm-mesh-el-3-green-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-200); }
.cstm-mesh-el-3-green-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-300); }
.cstm-mesh-el-3-green-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-400); }
.cstm-mesh-el-3-green-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-500); }
.cstm-mesh-el-3-green-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-600); }
.cstm-mesh-el-3-green-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-700); }
.cstm-mesh-el-3-green-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-800); }
.cstm-mesh-el-3-green-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--green-900); }

/* EL-4 */
.cstm-mesh-el-4-green-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-100); }
.cstm-mesh-el-4-green-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-200); }
.cstm-mesh-el-4-green-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-300); }
.cstm-mesh-el-4-green-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-400); }
.cstm-mesh-el-4-green-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-500); }
.cstm-mesh-el-4-green-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-600); }
.cstm-mesh-el-4-green-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-700); }
.cstm-mesh-el-4-green-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-800); }
.cstm-mesh-el-4-green-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--green-900); }


/* =========================
   TEAL (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-teal-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-100); }
.cstm-mesh-el-1-teal-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-200); }
.cstm-mesh-el-1-teal-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-300); }
.cstm-mesh-el-1-teal-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-400); }
.cstm-mesh-el-1-teal-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-500); }
.cstm-mesh-el-1-teal-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-600); }
.cstm-mesh-el-1-teal-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-700); }
.cstm-mesh-el-1-teal-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-800); }
.cstm-mesh-el-1-teal-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--teal-900); }

/* EL-2 */
.cstm-mesh-el-2-teal-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-100); }
.cstm-mesh-el-2-teal-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-200); }
.cstm-mesh-el-2-teal-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-300); }
.cstm-mesh-el-2-teal-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-400); }
.cstm-mesh-el-2-teal-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-500); }
.cstm-mesh-el-2-teal-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-600); }
.cstm-mesh-el-2-teal-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-700); }
.cstm-mesh-el-2-teal-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-800); }
.cstm-mesh-el-2-teal-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--teal-900); }

/* EL-3 */
.cstm-mesh-el-3-teal-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-100); }
.cstm-mesh-el-3-teal-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-200); }
.cstm-mesh-el-3-teal-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-300); }
.cstm-mesh-el-3-teal-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-400); }
.cstm-mesh-el-3-teal-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-500); }
.cstm-mesh-el-3-teal-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-600); }
.cstm-mesh-el-3-teal-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-700); }
.cstm-mesh-el-3-teal-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-800); }
.cstm-mesh-el-3-teal-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--teal-900); }

/* EL-4 */
.cstm-mesh-el-4-teal-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-100); }
.cstm-mesh-el-4-teal-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-200); }
.cstm-mesh-el-4-teal-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-300); }
.cstm-mesh-el-4-teal-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-400); }
.cstm-mesh-el-4-teal-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-500); }
.cstm-mesh-el-4-teal-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-600); }
.cstm-mesh-el-4-teal-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-700); }
.cstm-mesh-el-4-teal-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-800); }
.cstm-mesh-el-4-teal-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--teal-900); }


/* =========================
   CYAN (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-cyan-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-100); }
.cstm-mesh-el-1-cyan-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-200); }
.cstm-mesh-el-1-cyan-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-300); }
.cstm-mesh-el-1-cyan-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-400); }
.cstm-mesh-el-1-cyan-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-500); }
.cstm-mesh-el-1-cyan-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-600); }
.cstm-mesh-el-1-cyan-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-700); }
.cstm-mesh-el-1-cyan-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-800); }
.cstm-mesh-el-1-cyan-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--cyan-900); }

/* EL-2 */
.cstm-mesh-el-2-cyan-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-100); }
.cstm-mesh-el-2-cyan-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-200); }
.cstm-mesh-el-2-cyan-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-300); }
.cstm-mesh-el-2-cyan-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-400); }
.cstm-mesh-el-2-cyan-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-500); }
.cstm-mesh-el-2-cyan-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-600); }
.cstm-mesh-el-2-cyan-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-700); }
.cstm-mesh-el-2-cyan-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-800); }
.cstm-mesh-el-2-cyan-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--cyan-900); }

/* EL-3 */
.cstm-mesh-el-3-cyan-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-100); }
.cstm-mesh-el-3-cyan-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-200); }
.cstm-mesh-el-3-cyan-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-300); }
.cstm-mesh-el-3-cyan-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-400); }
.cstm-mesh-el-3-cyan-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-500); }
.cstm-mesh-el-3-cyan-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-600); }
.cstm-mesh-el-3-cyan-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-700); }
.cstm-mesh-el-3-cyan-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-800); }
.cstm-mesh-el-3-cyan-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--cyan-900); }

/* EL-4 */
.cstm-mesh-el-4-cyan-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-100); }
.cstm-mesh-el-4-cyan-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-200); }
.cstm-mesh-el-4-cyan-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-300); }
.cstm-mesh-el-4-cyan-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-400); }
.cstm-mesh-el-4-cyan-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-500); }
.cstm-mesh-el-4-cyan-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-600); }
.cstm-mesh-el-4-cyan-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-700); }
.cstm-mesh-el-4-cyan-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-800); }
.cstm-mesh-el-4-cyan-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--cyan-900); }


/* =========================
   GRAY (100–900)
   ========================= */

/* EL-1 */
.cstm-mesh-el-1-gray-100{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-100); }
.cstm-mesh-el-1-gray-200{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-200); }
.cstm-mesh-el-1-gray-300{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-300); }
.cstm-mesh-el-1-gray-400{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-400); }
.cstm-mesh-el-1-gray-500{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-500); }
.cstm-mesh-el-1-gray-600{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-600); }
.cstm-mesh-el-1-gray-700{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-700); }
.cstm-mesh-el-1-gray-800{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-800); }
.cstm-mesh-el-1-gray-900{ --mesh-on-1: 1; --mesh-hsl-1: var(--gray-900); }

/* EL-2 */
.cstm-mesh-el-2-gray-100{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-100); }
.cstm-mesh-el-2-gray-200{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-200); }
.cstm-mesh-el-2-gray-300{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-300); }
.cstm-mesh-el-2-gray-400{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-400); }
.cstm-mesh-el-2-gray-500{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-500); }
.cstm-mesh-el-2-gray-600{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-600); }
.cstm-mesh-el-2-gray-700{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-700); }
.cstm-mesh-el-2-gray-800{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-800); }
.cstm-mesh-el-2-gray-900{ --mesh-on-2: 1; --mesh-hsl-2: var(--gray-900); }

/* EL-3 */
.cstm-mesh-el-3-gray-100{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-100); }
.cstm-mesh-el-3-gray-200{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-200); }
.cstm-mesh-el-3-gray-300{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-300); }
.cstm-mesh-el-3-gray-400{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-400); }
.cstm-mesh-el-3-gray-500{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-500); }
.cstm-mesh-el-3-gray-600{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-600); }
.cstm-mesh-el-3-gray-700{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-700); }
.cstm-mesh-el-3-gray-800{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-800); }
.cstm-mesh-el-3-gray-900{ --mesh-on-3: 1; --mesh-hsl-3: var(--gray-900); }

/* EL-4 */
.cstm-mesh-el-4-gray-100{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-100); }
.cstm-mesh-el-4-gray-200{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-200); }
.cstm-mesh-el-4-gray-300{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-300); }
.cstm-mesh-el-4-gray-400{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-400); }
.cstm-mesh-el-4-gray-500{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-500); }
.cstm-mesh-el-4-gray-600{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-600); }
.cstm-mesh-el-4-gray-700{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-700); }
.cstm-mesh-el-4-gray-800{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-800); }
.cstm-mesh-el-4-gray-900{ --mesh-on-4: 1; --mesh-hsl-4: var(--gray-900); }












/* ====================== GRADIENT UTILS ====================== */
/* ====================== GRADIENT UTILS ====================== */
/* ====================== GRADIENT UTILS ====================== */

/* =========================
   GRADIENT FROM CLASSES
========================= */

/* PRIMARY */
.cstm-gradient-from-primary-100 { --grad-from: var(--primary-100); }
.cstm-gradient-from-primary-200 { --grad-from: var(--primary-200); }
.cstm-gradient-from-primary-300 { --grad-from: var(--primary-300); }
.cstm-gradient-from-primary-400 { --grad-from: var(--primary-400); }
.cstm-gradient-from-primary-500 { --grad-from: var(--primary-500); }
.cstm-gradient-from-primary-600 { --grad-from: var(--primary-600); }
.cstm-gradient-from-primary-700 { --grad-from: var(--primary-700); }
.cstm-gradient-from-primary-800 { --grad-from: var(--primary-800); }
.cstm-gradient-from-primary-900 { --grad-from: var(--primary-900); }

/* SECONDARY */
.cstm-gradient-from-secondary-100 { --grad-from: var(--secondary-100); }
.cstm-gradient-from-secondary-200 { --grad-from: var(--secondary-200); }
.cstm-gradient-from-secondary-300 { --grad-from: var(--secondary-300); }
.cstm-gradient-from-secondary-400 { --grad-from: var(--secondary-400); }
.cstm-gradient-from-secondary-500 { --grad-from: var(--secondary-500); }
.cstm-gradient-from-secondary-600 { --grad-from: var(--secondary-600); }
.cstm-gradient-from-secondary-700 { --grad-from: var(--secondary-700); }
.cstm-gradient-from-secondary-800 { --grad-from: var(--secondary-800); }
.cstm-gradient-from-secondary-900 { --grad-from: var(--secondary-900); }

/* SUCCESS */
.cstm-gradient-from-success-100 { --grad-from: var(--success-100); }
.cstm-gradient-from-success-200 { --grad-from: var(--success-200); }
.cstm-gradient-from-success-300 { --grad-from: var(--success-300); }
.cstm-gradient-from-success-400 { --grad-from: var(--success-400); }
.cstm-gradient-from-success-500 { --grad-from: var(--success-500); }
.cstm-gradient-from-success-600 { --grad-from: var(--success-600); }
.cstm-gradient-from-success-700 { --grad-from: var(--success-700); }
.cstm-gradient-from-success-800 { --grad-from: var(--success-800); }
.cstm-gradient-from-success-900 { --grad-from: var(--success-900); }

/* INFO */
.cstm-gradient-from-info-100 { --grad-from: var(--info-100); }
.cstm-gradient-from-info-200 { --grad-from: var(--info-200); }
.cstm-gradient-from-info-300 { --grad-from: var(--info-300); }
.cstm-gradient-from-info-400 { --grad-from: var(--info-400); }
.cstm-gradient-from-info-500 { --grad-from: var(--info-500); }
.cstm-gradient-from-info-600 { --grad-from: var(--info-600); }
.cstm-gradient-from-info-700 { --grad-from: var(--info-700); }
.cstm-gradient-from-info-800 { --grad-from: var(--info-800); }
.cstm-gradient-from-info-900 { --grad-from: var(--info-900); }

/* WARNING */
.cstm-gradient-from-warning-100 { --grad-from: var(--warning-100); }
.cstm-gradient-from-warning-200 { --grad-from: var(--warning-200); }
.cstm-gradient-from-warning-300 { --grad-from: var(--warning-300); }
.cstm-gradient-from-warning-400 { --grad-from: var(--warning-400); }
.cstm-gradient-from-warning-500 { --grad-from: var(--warning-500); }
.cstm-gradient-from-warning-600 { --grad-from: var(--warning-600); }
.cstm-gradient-from-warning-700 { --grad-from: var(--warning-700); }
.cstm-gradient-from-warning-800 { --grad-from: var(--warning-800); }
.cstm-gradient-from-warning-900 { --grad-from: var(--warning-900); }

/* DANGER */
.cstm-gradient-from-danger-100 { --grad-from: var(--danger-100); }
.cstm-gradient-from-danger-200 { --grad-from: var(--danger-200); }
.cstm-gradient-from-danger-300 { --grad-from: var(--danger-300); }
.cstm-gradient-from-danger-400 { --grad-from: var(--danger-400); }
.cstm-gradient-from-danger-500 { --grad-from: var(--danger-500); }
.cstm-gradient-from-danger-600 { --grad-from: var(--danger-600); }
.cstm-gradient-from-danger-700 { --grad-from: var(--danger-700); }
.cstm-gradient-from-danger-800 { --grad-from: var(--danger-800); }
.cstm-gradient-from-danger-900 { --grad-from: var(--danger-900); }

/* BLUE */
.cstm-gradient-from-blue-100 { --grad-from: var(--blue-100); }
.cstm-gradient-from-blue-200 { --grad-from: var(--blue-200); }
.cstm-gradient-from-blue-300 { --grad-from: var(--blue-300); }
.cstm-gradient-from-blue-400 { --grad-from: var(--blue-400); }
.cstm-gradient-from-blue-500 { --grad-from: var(--blue-500); }
.cstm-gradient-from-blue-600 { --grad-from: var(--blue-600); }
.cstm-gradient-from-blue-700 { --grad-from: var(--blue-700); }
.cstm-gradient-from-blue-800 { --grad-from: var(--blue-800); }
.cstm-gradient-from-blue-900 { --grad-from: var(--blue-900); }

/* INDIGO */
.cstm-gradient-from-indigo-100 { --grad-from: var(--indigo-100); }
.cstm-gradient-from-indigo-200 { --grad-from: var(--indigo-200); }
.cstm-gradient-from-indigo-300 { --grad-from: var(--indigo-300); }
.cstm-gradient-from-indigo-400 { --grad-from: var(--indigo-400); }
.cstm-gradient-from-indigo-500 { --grad-from: var(--indigo-500); }
.cstm-gradient-from-indigo-600 { --grad-from: var(--indigo-600); }
.cstm-gradient-from-indigo-700 { --grad-from: var(--indigo-700); }
.cstm-gradient-from-indigo-800 { --grad-from: var(--indigo-800); }
.cstm-gradient-from-indigo-900 { --grad-from: var(--indigo-900); }

/* PURPLE */
.cstm-gradient-from-purple-100 { --grad-from: var(--purple-100); }
.cstm-gradient-from-purple-200 { --grad-from: var(--purple-200); }
.cstm-gradient-from-purple-300 { --grad-from: var(--purple-300); }
.cstm-gradient-from-purple-400 { --grad-from: var(--purple-400); }
.cstm-gradient-from-purple-500 { --grad-from: var(--purple-500); }
.cstm-gradient-from-purple-600 { --grad-from: var(--purple-600); }
.cstm-gradient-from-purple-700 { --grad-from: var(--purple-700); }
.cstm-gradient-from-purple-800 { --grad-from: var(--purple-800); }
.cstm-gradient-from-purple-900 { --grad-from: var(--purple-900); }

/* PINK */
.cstm-gradient-from-pink-100 { --grad-from: var(--pink-100); }
.cstm-gradient-from-pink-200 { --grad-from: var(--pink-200); }
.cstm-gradient-from-pink-300 { --grad-from: var(--pink-300); }
.cstm-gradient-from-pink-400 { --grad-from: var(--pink-400); }
.cstm-gradient-from-pink-500 { --grad-from: var(--pink-500); }
.cstm-gradient-from-pink-600 { --grad-from: var(--pink-600); }
.cstm-gradient-from-pink-700 { --grad-from: var(--pink-700); }
.cstm-gradient-from-pink-800 { --grad-from: var(--pink-800); }
.cstm-gradient-from-pink-900 { --grad-from: var(--pink-900); }

/* RED */
.cstm-gradient-from-red-100 { --grad-from: var(--red-100); }
.cstm-gradient-from-red-200 { --grad-from: var(--red-200); }
.cstm-gradient-from-red-300 { --grad-from: var(--red-300); }
.cstm-gradient-from-red-400 { --grad-from: var(--red-400); }
.cstm-gradient-from-red-500 { --grad-from: var(--red-500); }
.cstm-gradient-from-red-600 { --grad-from: var(--red-600); }
.cstm-gradient-from-red-700 { --grad-from: var(--red-700); }
.cstm-gradient-from-red-800 { --grad-from: var(--red-800); }
.cstm-gradient-from-red-900 { --grad-from: var(--red-900); }

/* ORANGE */
.cstm-gradient-from-orange-100 { --grad-from: var(--orange-100); }
.cstm-gradient-from-orange-200 { --grad-from: var(--orange-200); }
.cstm-gradient-from-orange-300 { --grad-from: var(--orange-300); }
.cstm-gradient-from-orange-400 { --grad-from: var(--orange-400); }
.cstm-gradient-from-orange-500 { --grad-from: var(--orange-500); }
.cstm-gradient-from-orange-600 { --grad-from: var(--orange-600); }
.cstm-gradient-from-orange-700 { --grad-from: var(--orange-700); }
.cstm-gradient-from-orange-800 { --grad-from: var(--orange-800); }
.cstm-gradient-from-orange-900 { --grad-from: var(--orange-900); }

/* YELLOW */
.cstm-gradient-from-yellow-100 { --grad-from: var(--yellow-100); }
.cstm-gradient-from-yellow-200 { --grad-from: var(--yellow-200); }
.cstm-gradient-from-yellow-300 { --grad-from: var(--yellow-300); }
.cstm-gradient-from-yellow-400 { --grad-from: var(--yellow-400); }
.cstm-gradient-from-yellow-500 { --grad-from: var(--yellow-500); }
.cstm-gradient-from-yellow-600 { --grad-from: var(--yellow-600); }
.cstm-gradient-from-yellow-700 { --grad-from: var(--yellow-700); }
.cstm-gradient-from-yellow-800 { --grad-from: var(--yellow-800); }
.cstm-gradient-from-yellow-900 { --grad-from: var(--yellow-900); }

/* GREEN */
.cstm-gradient-from-green-100 { --grad-from: var(--green-100); }
.cstm-gradient-from-green-200 { --grad-from: var(--green-200); }
.cstm-gradient-from-green-300 { --grad-from: var(--green-300); }
.cstm-gradient-from-green-400 { --grad-from: var(--green-400); }
.cstm-gradient-from-green-500 { --grad-from: var(--green-500); }
.cstm-gradient-from-green-600 { --grad-from: var(--green-600); }
.cstm-gradient-from-green-700 { --grad-from: var(--green-700); }
.cstm-gradient-from-green-800 { --grad-from: var(--green-800); }
.cstm-gradient-from-green-900 { --grad-from: var(--green-900); }

/* TEAL */
.cstm-gradient-from-teal-100 { --grad-from: var(--teal-100); }
.cstm-gradient-from-teal-200 { --grad-from: var(--teal-200); }
.cstm-gradient-from-teal-300 { --grad-from: var(--teal-300); }
.cstm-gradient-from-teal-400 { --grad-from: var(--teal-400); }
.cstm-gradient-from-teal-500 { --grad-from: var(--teal-500); }
.cstm-gradient-from-teal-600 { --grad-from: var(--teal-600); }
.cstm-gradient-from-teal-700 { --grad-from: var(--teal-700); }
.cstm-gradient-from-teal-800 { --grad-from: var(--teal-800); }
.cstm-gradient-from-teal-900 { --grad-from: var(--teal-900); }

/* CYAN */
.cstm-gradient-from-cyan-100 { --grad-from: var(--cyan-100); }
.cstm-gradient-from-cyan-200 { --grad-from: var(--cyan-200); }
.cstm-gradient-from-cyan-300 { --grad-from: var(--cyan-300); }
.cstm-gradient-from-cyan-400 { --grad-from: var(--cyan-400); }
.cstm-gradient-from-cyan-500 { --grad-from: var(--cyan-500); }
.cstm-gradient-from-cyan-600 { --grad-from: var(--cyan-600); }
.cstm-gradient-from-cyan-700 { --grad-from: var(--cyan-700); }
.cstm-gradient-from-cyan-800 { --grad-from: var(--cyan-800); }
.cstm-gradient-from-cyan-900 { --grad-from: var(--cyan-900); }

/* GRAY */
.cstm-gradient-from-gray-100 { --grad-from: var(--gray-100); }
.cstm-gradient-from-gray-200 { --grad-from: var(--gray-200); }
.cstm-gradient-from-gray-300 { --grad-from: var(--gray-300); }
.cstm-gradient-from-gray-400 { --grad-from: var(--gray-400); }
.cstm-gradient-from-gray-500 { --grad-from: var(--gray-500); }
.cstm-gradient-from-gray-600 { --grad-from: var(--gray-600); }
.cstm-gradient-from-gray-700 { --grad-from: var(--gray-700); }
.cstm-gradient-from-gray-800 { --grad-from: var(--gray-800); }
.cstm-gradient-from-gray-900 { --grad-from: var(--gray-900); }

/* =========================
   GRADIENT TO CLASSES
   ========================= */

/* PRIMARY */
.cstm-gradient-to-primary-100 { --grad-to: var(--primary-100); }
.cstm-gradient-to-primary-200 { --grad-to: var(--primary-200); }
.cstm-gradient-to-primary-300 { --grad-to: var(--primary-300); }
.cstm-gradient-to-primary-400 { --grad-to: var(--primary-400); }
.cstm-gradient-to-primary-500 { --grad-to: var(--primary-500); }
.cstm-gradient-to-primary-600 { --grad-to: var(--primary-600); }
.cstm-gradient-to-primary-700 { --grad-to: var(--primary-700); }
.cstm-gradient-to-primary-800 { --grad-to: var(--primary-800); }
.cstm-gradient-to-primary-900 { --grad-to: var(--primary-900); }

/* SECONDARY */
.cstm-gradient-to-secondary-100 { --grad-to: var(--secondary-100); }
.cstm-gradient-to-secondary-200 { --grad-to: var(--secondary-200); }
.cstm-gradient-to-secondary-300 { --grad-to: var(--secondary-300); }
.cstm-gradient-to-secondary-400 { --grad-to: var(--secondary-400); }
.cstm-gradient-to-secondary-500 { --grad-to: var(--secondary-500); }
.cstm-gradient-to-secondary-600 { --grad-to: var(--secondary-600); }
.cstm-gradient-to-secondary-700 { --grad-to: var(--secondary-700); }
.cstm-gradient-to-secondary-800 { --grad-to: var(--secondary-800); }
.cstm-gradient-to-secondary-900 { --grad-to: var(--secondary-900); }

/* SUCCESS */
.cstm-gradient-to-success-100 { --grad-to: var(--success-100); }
.cstm-gradient-to-success-200 { --grad-to: var(--success-200); }
.cstm-gradient-to-success-300 { --grad-to: var(--success-300); }
.cstm-gradient-to-success-400 { --grad-to: var(--success-400); }
.cstm-gradient-to-success-500 { --grad-to: var(--success-500); }
.cstm-gradient-to-success-600 { --grad-to: var(--success-600); }
.cstm-gradient-to-success-700 { --grad-to: var(--success-700); }
.cstm-gradient-to-success-800 { --grad-to: var(--success-800); }
.cstm-gradient-to-success-900 { --grad-to: var(--success-900); }

/* INFO */
.cstm-gradient-to-info-100 { --grad-to: var(--info-100); }
.cstm-gradient-to-info-200 { --grad-to: var(--info-200); }
.cstm-gradient-to-info-300 { --grad-to: var(--info-300); }
.cstm-gradient-to-info-400 { --grad-to: var(--info-400); }
.cstm-gradient-to-info-500 { --grad-to: var(--info-500); }
.cstm-gradient-to-info-600 { --grad-to: var(--info-600); }
.cstm-gradient-to-info-700 { --grad-to: var(--info-700); }
.cstm-gradient-to-info-800 { --grad-to: var(--info-800); }
.cstm-gradient-to-info-900 { --grad-to: var(--info-900); }

/* WARNING */
.cstm-gradient-to-warning-100 { --grad-to: var(--warning-100); }
.cstm-gradient-to-warning-200 { --grad-to: var(--warning-200); }
.cstm-gradient-to-warning-300 { --grad-to: var(--warning-300); }
.cstm-gradient-to-warning-400 { --grad-to: var(--warning-400); }
.cstm-gradient-to-warning-500 { --grad-to: var(--warning-500); }
.cstm-gradient-to-warning-600 { --grad-to: var(--warning-600); }
.cstm-gradient-to-warning-700 { --grad-to: var(--warning-700); }
.cstm-gradient-to-warning-800 { --grad-to: var(--warning-800); }
.cstm-gradient-to-warning-900 { --grad-to: var(--warning-900); }

/* DANGER */
.cstm-gradient-to-danger-100 { --grad-to: var(--danger-100); }
.cstm-gradient-to-danger-200 { --grad-to: var(--danger-200); }
.cstm-gradient-to-danger-300 { --grad-to: var(--danger-300); }
.cstm-gradient-to-danger-400 { --grad-to: var(--danger-400); }
.cstm-gradient-to-danger-500 { --grad-to: var(--danger-500); }
.cstm-gradient-to-danger-600 { --grad-to: var(--danger-600); }
.cstm-gradient-to-danger-700 { --grad-to: var(--danger-700); }
.cstm-gradient-to-danger-800 { --grad-to: var(--danger-800); }
.cstm-gradient-to-danger-900 { --grad-to: var(--danger-900); }

/* BLUE */
.cstm-gradient-to-blue-100 { --grad-to: var(--blue-100); }
.cstm-gradient-to-blue-200 { --grad-to: var(--blue-200); }
.cstm-gradient-to-blue-300 { --grad-to: var(--blue-300); }
.cstm-gradient-to-blue-400 { --grad-to: var(--blue-400); }
.cstm-gradient-to-blue-500 { --grad-to: var(--blue-500); }
.cstm-gradient-to-blue-600 { --grad-to: var(--blue-600); }
.cstm-gradient-to-blue-700 { --grad-to: var(--blue-700); }
.cstm-gradient-to-blue-800 { --grad-to: var(--blue-800); }
.cstm-gradient-to-blue-900 { --grad-to: var(--blue-900); }

/* INDIGO */
.cstm-gradient-to-indigo-100 { --grad-to: var(--indigo-100); }
.cstm-gradient-to-indigo-200 { --grad-to: var(--indigo-200); }
.cstm-gradient-to-indigo-300 { --grad-to: var(--indigo-300); }
.cstm-gradient-to-indigo-400 { --grad-to: var(--indigo-400); }
.cstm-gradient-to-indigo-500 { --grad-to: var(--indigo-500); }
.cstm-gradient-to-indigo-600 { --grad-to: var(--indigo-600); }
.cstm-gradient-to-indigo-700 { --grad-to: var(--indigo-700); }
.cstm-gradient-to-indigo-800 { --grad-to: var(--indigo-800); }
.cstm-gradient-to-indigo-900 { --grad-to: var(--indigo-900); }

/* PURPLE */
.cstm-gradient-to-purple-100 { --grad-to: var(--purple-100); }
.cstm-gradient-to-purple-200 { --grad-to: var(--purple-200); }
.cstm-gradient-to-purple-300 { --grad-to: var(--purple-300); }
.cstm-gradient-to-purple-400 { --grad-to: var(--purple-400); }
.cstm-gradient-to-purple-500 { --grad-to: var(--purple-500); }
.cstm-gradient-to-purple-600 { --grad-to: var(--purple-600); }
.cstm-gradient-to-purple-700 { --grad-to: var(--purple-700); }
.cstm-gradient-to-purple-800 { --grad-to: var(--purple-800); }
.cstm-gradient-to-purple-900 { --grad-to: var(--purple-900); }

/* PINK */
.cstm-gradient-to-pink-100 { --grad-to: var(--pink-100); }
.cstm-gradient-to-pink-200 { --grad-to: var(--pink-200); }
.cstm-gradient-to-pink-300 { --grad-to: var(--pink-300); }
.cstm-gradient-to-pink-400 { --grad-to: var(--pink-400); }
.cstm-gradient-to-pink-500 { --grad-to: var(--pink-500); }
.cstm-gradient-to-pink-600 { --grad-to: var(--pink-600); }
.cstm-gradient-to-pink-700 { --grad-to: var(--pink-700); }
.cstm-gradient-to-pink-800 { --grad-to: var(--pink-800); }
.cstm-gradient-to-pink-900 { --grad-to: var(--pink-900); }

/* RED */
.cstm-gradient-to-red-100 { --grad-to: var(--red-100); }
.cstm-gradient-to-red-200 { --grad-to: var(--red-200); }
.cstm-gradient-to-red-300 { --grad-to: var(--red-300); }
.cstm-gradient-to-red-400 { --grad-to: var(--red-400); }
.cstm-gradient-to-red-500 { --grad-to: var(--red-500); }
.cstm-gradient-to-red-600 { --grad-to: var(--red-600); }
.cstm-gradient-to-red-700 { --grad-to: var(--red-700); }
.cstm-gradient-to-red-800 { --grad-to: var(--red-800); }
.cstm-gradient-to-red-900 { --grad-to: var(--red-900); }

/* ORANGE */
.cstm-gradient-to-orange-100 { --grad-to: var(--orange-100); }
.cstm-gradient-to-orange-200 { --grad-to: var(--orange-200); }
.cstm-gradient-to-orange-300 { --grad-to: var(--orange-300); }
.cstm-gradient-to-orange-400 { --grad-to: var(--orange-400); }
.cstm-gradient-to-orange-500 { --grad-to: var(--orange-500); }
.cstm-gradient-to-orange-600 { --grad-to: var(--orange-600); }
.cstm-gradient-to-orange-700 { --grad-to: var(--orange-700); }
.cstm-gradient-to-orange-800 { --grad-to: var(--orange-800); }
.cstm-gradient-to-orange-900 { --grad-to: var(--orange-900); }

/* YELLOW */
.cstm-gradient-to-yellow-100 { --grad-to: var(--yellow-100); }
.cstm-gradient-to-yellow-200 { --grad-to: var(--yellow-200); }
.cstm-gradient-to-yellow-300 { --grad-to: var(--yellow-300); }
.cstm-gradient-to-yellow-400 { --grad-to: var(--yellow-400); }
.cstm-gradient-to-yellow-500 { --grad-to: var(--yellow-500); }
.cstm-gradient-to-yellow-600 { --grad-to: var(--yellow-600); }
.cstm-gradient-to-yellow-700 { --grad-to: var(--yellow-700); }
.cstm-gradient-to-yellow-800 { --grad-to: var(--yellow-800); }
.cstm-gradient-to-yellow-900 { --grad-to: var(--yellow-900); }

/* GREEN */
.cstm-gradient-to-green-100 { --grad-to: var(--green-100); }
.cstm-gradient-to-green-200 { --grad-to: var(--green-200); }
.cstm-gradient-to-green-300 { --grad-to: var(--green-300); }
.cstm-gradient-to-green-400 { --grad-to: var(--green-400); }
.cstm-gradient-to-green-500 { --grad-to: var(--green-500); }
.cstm-gradient-to-green-600 { --grad-to: var(--green-600); }
.cstm-gradient-to-green-700 { --grad-to: var(--green-700); }
.cstm-gradient-to-green-800 { --grad-to: var(--green-800); }
.cstm-gradient-to-green-900 { --grad-to: var(--green-900); }

/* TEAL */
.cstm-gradient-to-teal-100 { --grad-to: var(--teal-100); }
.cstm-gradient-to-teal-200 { --grad-to: var(--teal-200); }
.cstm-gradient-to-teal-300 { --grad-to: var(--teal-300); }
.cstm-gradient-to-teal-400 { --grad-to: var(--teal-400); }
.cstm-gradient-to-teal-500 { --grad-to: var(--teal-500); }
.cstm-gradient-to-teal-600 { --grad-to: var(--teal-600); }
.cstm-gradient-to-teal-700 { --grad-to: var(--teal-700); }
.cstm-gradient-to-teal-800 { --grad-to: var(--teal-800); }
.cstm-gradient-to-teal-900 { --grad-to: var(--teal-900); }

/* CYAN */
.cstm-gradient-to-cyan-100 { --grad-to: var(--cyan-100); }
.cstm-gradient-to-cyan-200 { --grad-to: var(--cyan-200); }
.cstm-gradient-to-cyan-300 { --grad-to: var(--cyan-300); }
.cstm-gradient-to-cyan-400 { --grad-to: var(--cyan-400); }
.cstm-gradient-to-cyan-500 { --grad-to: var(--cyan-500); }
.cstm-gradient-to-cyan-600 { --grad-to: var(--cyan-600); }
.cstm-gradient-to-cyan-700 { --grad-to: var(--cyan-700); }
.cstm-gradient-to-cyan-800 { --grad-to: var(--cyan-800); }
.cstm-gradient-to-cyan-900 { --grad-to: var(--cyan-900); }

/* GRAY */
.cstm-gradient-to-gray-100 { --grad-to: var(--gray-100); }
.cstm-gradient-to-gray-200 { --grad-to: var(--gray-200); }
.cstm-gradient-to-gray-300 { --grad-to: var(--gray-300); }
.cstm-gradient-to-gray-400 { --grad-to: var(--gray-400); }
.cstm-gradient-to-gray-500 { --grad-to: var(--gray-500); }
.cstm-gradient-to-gray-600 { --grad-to: var(--gray-600); }
.cstm-gradient-to-gray-700 { --grad-to: var(--gray-700); }
.cstm-gradient-to-gray-800 { --grad-to: var(--gray-800); }
.cstm-gradient-to-gray-900 { --grad-to: var(--gray-900); }

/* =========================
   GRADIENT FROM-TO NEUTRAL CLASSES
========================= */

.gradient-from-neutral-3 {--grad-from: var(--text-c-emphasis-rev); }
.gradient-from-neutral-2 {--grad-from: var(--text-c-1-rev); }
.gradient-from-neutral-1 {--grad-from: var(--text-c-muted-1-rev); }

.gradient-to-neutral-3 {--grad-to: var(--text-c-emphasis-rev); }
.gradient-to-neutral-2 {--grad-to: var(--text-c-1-rev); }
.gradient-to-neutral-1 {--grad-to: var(--text-c-muted-1-rev); }



/* ====================== BACKGROUND TEXT COLOR UTILS ====================== */
/* ====================== BACKGROUND TEXT COLOR UTILS ====================== */
/* ====================== BACKGROUND TEXT COLOR UTILS ====================== */

/* PRIMARY */
.cstm-bg-primary-100 { background-color: hsl(var(--primary-100)) !important; }
.cstm-bg-primary-200 { background-color: hsl(var(--primary-200)) !important; }
.cstm-bg-primary-300 { background-color: hsl(var(--primary-300)) !important; }
.cstm-bg-primary-400 { background-color: hsl(var(--primary-400)) !important; }
.cstm-bg-primary-500 { background-color: hsl(var(--primary-500)) !important; }
.cstm-bg-primary-600 { background-color: hsl(var(--primary-600)) !important; }
.cstm-bg-primary-700 { background-color: hsl(var(--primary-700)) !important; }
.cstm-bg-primary-800 { background-color: hsl(var(--primary-800)) !important; }
.cstm-bg-primary-900 { background-color: hsl(var(--primary-900)) !important; }

.cstm-text-primary-100 { color: hsl(var(--primary-100)) !important; }
.cstm-text-primary-200 { color: hsl(var(--primary-200)) !important; }
.cstm-text-primary-300 { color: hsl(var(--primary-300)) !important; }
.cstm-text-primary-400 { color: hsl(var(--primary-400)) !important; }
.cstm-text-primary-500 { color: hsl(var(--primary-500)) !important; }
.cstm-text-primary-600 { color: hsl(var(--primary-600)) !important; }
.cstm-text-primary-700 { color: hsl(var(--primary-700)) !important; }
.cstm-text-primary-800 { color: hsl(var(--primary-800)) !important; }
.cstm-text-primary-900 { color: hsl(var(--primary-900)) !important; }

.cstm-border-primary-100 { border-color: hsl(var(--primary-100)) !important; }
.cstm-border-primary-200 { border-color: hsl(var(--primary-200)) !important; }
.cstm-border-primary-300 { border-color: hsl(var(--primary-300)) !important; }
.cstm-border-primary-400 { border-color: hsl(var(--primary-400)) !important; }
.cstm-border-primary-500 { border-color: hsl(var(--primary-500)) !important; }
.cstm-border-primary-600 { border-color: hsl(var(--primary-600)) !important; }
.cstm-border-primary-700 { border-color: hsl(var(--primary-700)) !important; }
.cstm-border-primary-800 { border-color: hsl(var(--primary-800)) !important; }
.cstm-border-primary-900 { border-color: hsl(var(--primary-900)) !important; }

/* SECONDARY */
.cstm-bg-secondary-100 { background-color: hsl(var(--secondary-100)) !important; }
.cstm-bg-secondary-200 { background-color: hsl(var(--secondary-200)) !important; }
.cstm-bg-secondary-300 { background-color: hsl(var(--secondary-300)) !important; }
.cstm-bg-secondary-400 { background-color: hsl(var(--secondary-400)) !important; }
.cstm-bg-secondary-500 { background-color: hsl(var(--secondary-500)) !important; }
.cstm-bg-secondary-600 { background-color: hsl(var(--secondary-600)) !important; }
.cstm-bg-secondary-700 { background-color: hsl(var(--secondary-700)) !important; }
.cstm-bg-secondary-800 { background-color: hsl(var(--secondary-800)) !important; }
.cstm-bg-secondary-900 { background-color: hsl(var(--secondary-900)) !important; }

.cstm-text-secondary-100 { color: hsl(var(--secondary-100)) !important; }
.cstm-text-secondary-200 { color: hsl(var(--secondary-200)) !important; }
.cstm-text-secondary-300 { color: hsl(var(--secondary-300)) !important; }
.cstm-text-secondary-400 { color: hsl(var(--secondary-400)) !important; }
.cstm-text-secondary-500 { color: hsl(var(--secondary-500)) !important; }
.cstm-text-secondary-600 { color: hsl(var(--secondary-600)) !important; }
.cstm-text-secondary-700 { color: hsl(var(--secondary-700)) !important; }
.cstm-text-secondary-800 { color: hsl(var(--secondary-800)) !important; }
.cstm-text-secondary-900 { color: hsl(var(--secondary-900)) !important; }

.cstm-border-secondary-100 { border-color: hsl(var(--secondary-100)) !important; }
.cstm-border-secondary-200 { border-color: hsl(var(--secondary-200)) !important; }
.cstm-border-secondary-300 { border-color: hsl(var(--secondary-300)) !important; }
.cstm-border-secondary-400 { border-color: hsl(var(--secondary-400)) !important; }
.cstm-border-secondary-500 { border-color: hsl(var(--secondary-500)) !important; }
.cstm-border-secondary-600 { border-color: hsl(var(--secondary-600)) !important; }
.cstm-border-secondary-700 { border-color: hsl(var(--secondary-700)) !important; }
.cstm-border-secondary-800 { border-color: hsl(var(--secondary-800)) !important; }
.cstm-border-secondary-900 { border-color: hsl(var(--secondary-900)) !important; }

/* SUCCESS */
.cstm-bg-success-100 { background-color: hsl(var(--success-100)) !important; }
.cstm-bg-success-200 { background-color: hsl(var(--success-200)) !important; }
.cstm-bg-success-300 { background-color: hsl(var(--success-300)) !important; }
.cstm-bg-success-400 { background-color: hsl(var(--success-400)) !important; }
.cstm-bg-success-500 { background-color: hsl(var(--success-500)) !important; }
.cstm-bg-success-600 { background-color: hsl(var(--success-600)) !important; }
.cstm-bg-success-700 { background-color: hsl(var(--success-700)) !important; }
.cstm-bg-success-800 { background-color: hsl(var(--success-800)) !important; }
.cstm-bg-success-900 { background-color: hsl(var(--success-900)) !important; }

.cstm-text-success-100 { color: hsl(var(--success-100)) !important; }
.cstm-text-success-200 { color: hsl(var(--success-200)) !important; }
.cstm-text-success-300 { color: hsl(var(--success-300)) !important; }
.cstm-text-success-400 { color: hsl(var(--success-400)) !important; }
.cstm-text-success-500 { color: hsl(var(--success-500)) !important; }
.cstm-text-success-600 { color: hsl(var(--success-600)) !important; }
.cstm-text-success-700 { color: hsl(var(--success-700)) !important; }
.cstm-text-success-800 { color: hsl(var(--success-800)) !important; }
.cstm-text-success-900 { color: hsl(var(--success-900)) !important; }

.cstm-border-success-100 { border-color: hsl(var(--success-100)) !important; }
.cstm-border-success-200 { border-color: hsl(var(--success-200)) !important; }
.cstm-border-success-300 { border-color: hsl(var(--success-300)) !important; }
.cstm-border-success-400 { border-color: hsl(var(--success-400)) !important; }
.cstm-border-success-500 { border-color: hsl(var(--success-500)) !important; }
.cstm-border-success-600 { border-color: hsl(var(--success-600)) !important; }
.cstm-border-success-700 { border-color: hsl(var(--success-700)) !important; }
.cstm-border-success-800 { border-color: hsl(var(--success-800)) !important; }
.cstm-border-success-900 { border-color: hsl(var(--success-900)) !important; }

/* INFO */
.cstm-bg-info-100 { background-color: hsl(var(--info-100)) !important; }
.cstm-bg-info-200 { background-color: hsl(var(--info-200)) !important; }
.cstm-bg-info-300 { background-color: hsl(var(--info-300)) !important; }
.cstm-bg-info-400 { background-color: hsl(var(--info-400)) !important; }
.cstm-bg-info-500 { background-color: hsl(var(--info-500)) !important; }
.cstm-bg-info-600 { background-color: hsl(var(--info-600)) !important; }
.cstm-bg-info-700 { background-color: hsl(var(--info-700)) !important; }
.cstm-bg-info-800 { background-color: hsl(var(--info-800)) !important; }
.cstm-bg-info-900 { background-color: hsl(var(--info-900)) !important; }

.cstm-text-info-100 { color: hsl(var(--info-100)) !important; }
.cstm-text-info-200 { color: hsl(var(--info-200)) !important; }
.cstm-text-info-300 { color: hsl(var(--info-300)) !important; }
.cstm-text-info-400 { color: hsl(var(--info-400)) !important; }
.cstm-text-info-500 { color: hsl(var(--info-500)) !important; }
.cstm-text-info-600 { color: hsl(var(--info-600)) !important; }
.cstm-text-info-700 { color: hsl(var(--info-700)) !important; }
.cstm-text-info-800 { color: hsl(var(--info-800)) !important; }
.cstm-text-info-900 { color: hsl(var(--info-900)) !important; }

.cstm-border-info-100 { border-color: hsl(var(--info-100)) !important; }
.cstm-border-info-200 { border-color: hsl(var(--info-200)) !important; }
.cstm-border-info-300 { border-color: hsl(var(--info-300)) !important; }
.cstm-border-info-400 { border-color: hsl(var(--info-400)) !important; }
.cstm-border-info-500 { border-color: hsl(var(--info-500)) !important; }
.cstm-border-info-600 { border-color: hsl(var(--info-600)) !important; }
.cstm-border-info-700 { border-color: hsl(var(--info-700)) !important; }
.cstm-border-info-800 { border-color: hsl(var(--info-800)) !important; }
.cstm-border-info-900 { border-color: hsl(var(--info-900)) !important; }

/* WARNING */
.cstm-bg-warning-100 { background-color: hsl(var(--warning-100)) !important; }
.cstm-bg-warning-200 { background-color: hsl(var(--warning-200)) !important; }
.cstm-bg-warning-300 { background-color: hsl(var(--warning-300)) !important; }
.cstm-bg-warning-400 { background-color: hsl(var(--warning-400)) !important; }
.cstm-bg-warning-500 { background-color: hsl(var(--warning-500)) !important; }
.cstm-bg-warning-600 { background-color: hsl(var(--warning-600)) !important; }
.cstm-bg-warning-700 { background-color: hsl(var(--warning-700)) !important; }
.cstm-bg-warning-800 { background-color: hsl(var(--warning-800)) !important; }
.cstm-bg-warning-900 { background-color: hsl(var(--warning-900)) !important; }

.cstm-text-warning-100 { color: hsl(var(--warning-100)) !important; }
.cstm-text-warning-200 { color: hsl(var(--warning-200)) !important; }
.cstm-text-warning-300 { color: hsl(var(--warning-300)) !important; }
.cstm-text-warning-400 { color: hsl(var(--warning-400)) !important; }
.cstm-text-warning-500 { color: hsl(var(--warning-500)) !important; }
.cstm-text-warning-600 { color: hsl(var(--warning-600)) !important; }
.cstm-text-warning-700 { color: hsl(var(--warning-700)) !important; }
.cstm-text-warning-800 { color: hsl(var(--warning-800)) !important; }
.cstm-text-warning-900 { color: hsl(var(--warning-900)) !important; }

.cstm-border-warning-100 { border-color: hsl(var(--warning-100)) !important; }
.cstm-border-warning-200 { border-color: hsl(var(--warning-200)) !important; }
.cstm-border-warning-300 { border-color: hsl(var(--warning-300)) !important; }
.cstm-border-warning-400 { border-color: hsl(var(--warning-400)) !important; }
.cstm-border-warning-500 { border-color: hsl(var(--warning-500)) !important; }
.cstm-border-warning-600 { border-color: hsl(var(--warning-600)) !important; }
.cstm-border-warning-700 { border-color: hsl(var(--warning-700)) !important; }
.cstm-border-warning-800 { border-color: hsl(var(--warning-800)) !important; }
.cstm-border-warning-900 { border-color: hsl(var(--warning-900)) !important; }

/* DANGER */
.cstm-bg-danger-100 { background-color: hsl(var(--danger-100)) !important; }
.cstm-bg-danger-200 { background-color: hsl(var(--danger-200)) !important; }
.cstm-bg-danger-300 { background-color: hsl(var(--danger-300)) !important; }
.cstm-bg-danger-400 { background-color: hsl(var(--danger-400)) !important; }
.cstm-bg-danger-500 { background-color: hsl(var(--danger-500)) !important; }
.cstm-bg-danger-600 { background-color: hsl(var(--danger-600)) !important; }
.cstm-bg-danger-700 { background-color: hsl(var(--danger-700)) !important; }
.cstm-bg-danger-800 { background-color: hsl(var(--danger-800)) !important; }
.cstm-bg-danger-900 { background-color: hsl(var(--danger-900)) !important; }

.cstm-text-danger-100 { color: hsl(var(--danger-100)) !important; }
.cstm-text-danger-200 { color: hsl(var(--danger-200)) !important; }
.cstm-text-danger-300 { color: hsl(var(--danger-300)) !important; }
.cstm-text-danger-400 { color: hsl(var(--danger-400)) !important; }
.cstm-text-danger-500 { color: hsl(var(--danger-500)) !important; }
.cstm-text-danger-600 { color: hsl(var(--danger-600)) !important; }
.cstm-text-danger-700 { color: hsl(var(--danger-700)) !important; }
.cstm-text-danger-800 { color: hsl(var(--danger-800)) !important; }
.cstm-text-danger-900 { color: hsl(var(--danger-900)) !important; }

.cstm-border-danger-100 { border-color: hsl(var(--danger-100)) !important; }
.cstm-border-danger-200 { border-color: hsl(var(--danger-200)) !important; }
.cstm-border-danger-300 { border-color: hsl(var(--danger-300)) !important; }
.cstm-border-danger-400 { border-color: hsl(var(--danger-400)) !important; }
.cstm-border-danger-500 { border-color: hsl(var(--danger-500)) !important; }
.cstm-border-danger-600 { border-color: hsl(var(--danger-600)) !important; }
.cstm-border-danger-700 { border-color: hsl(var(--danger-700)) !important; }
.cstm-border-danger-800 { border-color: hsl(var(--danger-800)) !important; }
.cstm-border-danger-900 { border-color: hsl(var(--danger-900)) !important; }

/* =========================
   TOKEN UTILS (PALETTES)
   bg-* / text-* / border-*
   blue / indigo / purple / pink / red / orange / yellow / green / teal / cyan / gray
   ========================= */

/* BLUE */
.cstm-bg-blue-100 { background-color: hsl(var(--blue-100)) !important; }
.cstm-bg-blue-200 { background-color: hsl(var(--blue-200)) !important; }
.cstm-bg-blue-300 { background-color: hsl(var(--blue-300)) !important; }
.cstm-bg-blue-400 { background-color: hsl(var(--blue-400)) !important; }
.cstm-bg-blue-500 { background-color: hsl(var(--blue-500)) !important; }
.cstm-bg-blue-600 { background-color: hsl(var(--blue-600)) !important; }
.cstm-bg-blue-700 { background-color: hsl(var(--blue-700)) !important; }
.cstm-bg-blue-800 { background-color: hsl(var(--blue-800)) !important; }
.cstm-bg-blue-900 { background-color: hsl(var(--blue-900)) !important; }

.cstm-text-blue-100 { color: hsl(var(--blue-100)) !important; }
.cstm-text-blue-200 { color: hsl(var(--blue-200)) !important; }
.cstm-text-blue-300 { color: hsl(var(--blue-300)) !important; }
.cstm-text-blue-400 { color: hsl(var(--blue-400)) !important; }
.cstm-text-blue-500 { color: hsl(var(--blue-500)) !important; }
.cstm-text-blue-600 { color: hsl(var(--blue-600)) !important; }
.cstm-text-blue-700 { color: hsl(var(--blue-700)) !important; }
.cstm-text-blue-800 { color: hsl(var(--blue-800)) !important; }
.cstm-text-blue-900 { color: hsl(var(--blue-900)) !important; }

.cstm-border-blue-100 { border-color: hsl(var(--blue-100)) !important; }
.cstm-border-blue-200 { border-color: hsl(var(--blue-200)) !important; }
.cstm-border-blue-300 { border-color: hsl(var(--blue-300)) !important; }
.cstm-border-blue-400 { border-color: hsl(var(--blue-400)) !important; }
.cstm-border-blue-500 { border-color: hsl(var(--blue-500)) !important; }
.cstm-border-blue-600 { border-color: hsl(var(--blue-600)) !important; }
.cstm-border-blue-700 { border-color: hsl(var(--blue-700)) !important; }
.cstm-border-blue-800 { border-color: hsl(var(--blue-800)) !important; }
.cstm-border-blue-900 { border-color: hsl(var(--blue-900)) !important; }

/* INDIGO */
.cstm-bg-indigo-100 { background-color: hsl(var(--indigo-100)) !important; }
.cstm-bg-indigo-200 { background-color: hsl(var(--indigo-200)) !important; }
.cstm-bg-indigo-300 { background-color: hsl(var(--indigo-300)) !important; }
.cstm-bg-indigo-400 { background-color: hsl(var(--indigo-400)) !important; }
.cstm-bg-indigo-500 { background-color: hsl(var(--indigo-500)) !important; }
.cstm-bg-indigo-600 { background-color: hsl(var(--indigo-600)) !important; }
.cstm-bg-indigo-700 { background-color: hsl(var(--indigo-700)) !important; }
.cstm-bg-indigo-800 { background-color: hsl(var(--indigo-800)) !important; }
.cstm-bg-indigo-900 { background-color: hsl(var(--indigo-900)) !important; }

.cstm-text-indigo-100 { color: hsl(var(--indigo-100)) !important; }
.cstm-text-indigo-200 { color: hsl(var(--indigo-200)) !important; }
.cstm-text-indigo-300 { color: hsl(var(--indigo-300)) !important; }
.cstm-text-indigo-400 { color: hsl(var(--indigo-400)) !important; }
.cstm-text-indigo-500 { color: hsl(var(--indigo-500)) !important; }
.cstm-text-indigo-600 { color: hsl(var(--indigo-600)) !important; }
.cstm-text-indigo-700 { color: hsl(var(--indigo-700)) !important; }
.cstm-text-indigo-800 { color: hsl(var(--indigo-800)) !important; }
.cstm-text-indigo-900 { color: hsl(var(--indigo-900)) !important; }

.cstm-border-indigo-100 { border-color: hsl(var(--indigo-100)) !important; }
.cstm-border-indigo-200 { border-color: hsl(var(--indigo-200)) !important; }
.cstm-border-indigo-300 { border-color: hsl(var(--indigo-300)) !important; }
.cstm-border-indigo-400 { border-color: hsl(var(--indigo-400)) !important; }
.cstm-border-indigo-500 { border-color: hsl(var(--indigo-500)) !important; }
.cstm-border-indigo-600 { border-color: hsl(var(--indigo-600)) !important; }
.cstm-border-indigo-700 { border-color: hsl(var(--indigo-700)) !important; }
.cstm-border-indigo-800 { border-color: hsl(var(--indigo-800)) !important; }
.cstm-border-indigo-900 { border-color: hsl(var(--indigo-900)) !important; }

/* PURPLE */
.cstm-bg-purple-100 { background-color: hsl(var(--purple-100)) !important; }
.cstm-bg-purple-200 { background-color: hsl(var(--purple-200)) !important; }
.cstm-bg-purple-300 { background-color: hsl(var(--purple-300)) !important; }
.cstm-bg-purple-400 { background-color: hsl(var(--purple-400)) !important; }
.cstm-bg-purple-500 { background-color: hsl(var(--purple-500)) !important; }
.cstm-bg-purple-600 { background-color: hsl(var(--purple-600)) !important; }
.cstm-bg-purple-700 { background-color: hsl(var(--purple-700)) !important; }
.cstm-bg-purple-800 { background-color: hsl(var(--purple-800)) !important; }
.cstm-bg-purple-900 { background-color: hsl(var(--purple-900)) !important; }

.cstm-text-purple-100 { color: hsl(var(--purple-100)) !important; }
.cstm-text-purple-200 { color: hsl(var(--purple-200)) !important; }
.cstm-text-purple-300 { color: hsl(var(--purple-300)) !important; }
.cstm-text-purple-400 { color: hsl(var(--purple-400)) !important; }
.cstm-text-purple-500 { color: hsl(var(--purple-500)) !important; }
.cstm-text-purple-600 { color: hsl(var(--purple-600)) !important; }
.cstm-text-purple-700 { color: hsl(var(--purple-700)) !important; }
.cstm-text-purple-800 { color: hsl(var(--purple-800)) !important; }
.cstm-text-purple-900 { color: hsl(var(--purple-900)) !important; }

.cstm-border-purple-100 { border-color: hsl(var(--purple-100)) !important; }
.cstm-border-purple-200 { border-color: hsl(var(--purple-200)) !important; }
.cstm-border-purple-300 { border-color: hsl(var(--purple-300)) !important; }
.cstm-border-purple-400 { border-color: hsl(var(--purple-400)) !important; }
.cstm-border-purple-500 { border-color: hsl(var(--purple-500)) !important; }
.cstm-border-purple-600 { border-color: hsl(var(--purple-600)) !important; }
.cstm-border-purple-700 { border-color: hsl(var(--purple-700)) !important; }
.cstm-border-purple-800 { border-color: hsl(var(--purple-800)) !important; }
.cstm-border-purple-900 { border-color: hsl(var(--purple-900)) !important; }

/* PINK */
.cstm-bg-pink-100 { background-color: hsl(var(--pink-100)) !important; }
.cstm-bg-pink-200 { background-color: hsl(var(--pink-200)) !important; }
.cstm-bg-pink-300 { background-color: hsl(var(--pink-300)) !important; }
.cstm-bg-pink-400 { background-color: hsl(var(--pink-400)) !important; }
.cstm-bg-pink-500 { background-color: hsl(var(--pink-500)) !important; }
.cstm-bg-pink-600 { background-color: hsl(var(--pink-600)) !important; }
.cstm-bg-pink-700 { background-color: hsl(var(--pink-700)) !important; }
.cstm-bg-pink-800 { background-color: hsl(var(--pink-800)) !important; }
.cstm-bg-pink-900 { background-color: hsl(var(--pink-900)) !important; }

.cstm-text-pink-100 { color: hsl(var(--pink-100)) !important; }
.cstm-text-pink-200 { color: hsl(var(--pink-200)) !important; }
.cstm-text-pink-300 { color: hsl(var(--pink-300)) !important; }
.cstm-text-pink-400 { color: hsl(var(--pink-400)) !important; }
.cstm-text-pink-500 { color: hsl(var(--pink-500)) !important; }
.cstm-text-pink-600 { color: hsl(var(--pink-600)) !important; }
.cstm-text-pink-700 { color: hsl(var(--pink-700)) !important; }
.cstm-text-pink-800 { color: hsl(var(--pink-800)) !important; }
.cstm-text-pink-900 { color: hsl(var(--pink-900)) !important; }

.cstm-border-pink-100 { border-color: hsl(var(--pink-100)) !important; }
.cstm-border-pink-200 { border-color: hsl(var(--pink-200)) !important; }
.cstm-border-pink-300 { border-color: hsl(var(--pink-300)) !important; }
.cstm-border-pink-400 { border-color: hsl(var(--pink-400)) !important; }
.cstm-border-pink-500 { border-color: hsl(var(--pink-500)) !important; }
.cstm-border-pink-600 { border-color: hsl(var(--pink-600)) !important; }
.cstm-border-pink-700 { border-color: hsl(var(--pink-700)) !important; }
.cstm-border-pink-800 { border-color: hsl(var(--pink-800)) !important; }
.cstm-border-pink-900 { border-color: hsl(var(--pink-900)) !important; }

/* RED */
.cstm-bg-red-100 { background-color: hsl(var(--red-100)) !important; }
.cstm-bg-red-200 { background-color: hsl(var(--red-200)) !important; }
.cstm-bg-red-300 { background-color: hsl(var(--red-300)) !important; }
.cstm-bg-red-400 { background-color: hsl(var(--red-400)) !important; }
.cstm-bg-red-500 { background-color: hsl(var(--red-500)) !important; }
.cstm-bg-red-600 { background-color: hsl(var(--red-600)) !important; }
.cstm-bg-red-700 { background-color: hsl(var(--red-700)) !important; }
.cstm-bg-red-800 { background-color: hsl(var(--red-800)) !important; }
.cstm-bg-red-900 { background-color: hsl(var(--red-900)) !important; }

.cstm-text-red-100 { color: hsl(var(--red-100)) !important; }
.cstm-text-red-200 { color: hsl(var(--red-200)) !important; }
.cstm-text-red-300 { color: hsl(var(--red-300)) !important; }
.cstm-text-red-400 { color: hsl(var(--red-400)) !important; }
.cstm-text-red-500 { color: hsl(var(--red-500)) !important; }
.cstm-text-red-600 { color: hsl(var(--red-600)) !important; }
.cstm-text-red-700 { color: hsl(var(--red-700)) !important; }
.cstm-text-red-800 { color: hsl(var(--red-800)) !important; }
.cstm-text-red-900 { color: hsl(var(--red-900)) !important; }

.cstm-border-red-100 { border-color: hsl(var(--red-100)) !important; }
.cstm-border-red-200 { border-color: hsl(var(--red-200)) !important; }
.cstm-border-red-300 { border-color: hsl(var(--red-300)) !important; }
.cstm-border-red-400 { border-color: hsl(var(--red-400)) !important; }
.cstm-border-red-500 { border-color: hsl(var(--red-500)) !important; }
.cstm-border-red-600 { border-color: hsl(var(--red-600)) !important; }
.cstm-border-red-700 { border-color: hsl(var(--red-700)) !important; }
.cstm-border-red-800 { border-color: hsl(var(--red-800)) !important; }
.cstm-border-red-900 { border-color: hsl(var(--red-900)) !important; }

/* ORANGE */
.cstm-bg-orange-100 { background-color: hsl(var(--orange-100)) !important; }
.cstm-bg-orange-200 { background-color: hsl(var(--orange-200)) !important; }
.cstm-bg-orange-300 { background-color: hsl(var(--orange-300)) !important; }
.cstm-bg-orange-400 { background-color: hsl(var(--orange-400)) !important; }
.cstm-bg-orange-500 { background-color: hsl(var(--orange-500)) !important; }
.cstm-bg-orange-600 { background-color: hsl(var(--orange-600)) !important; }
.cstm-bg-orange-700 { background-color: hsl(var(--orange-700)) !important; }
.cstm-bg-orange-800 { background-color: hsl(var(--orange-800)) !important; }
.cstm-bg-orange-900 { background-color: hsl(var(--orange-900)) !important; }

.cstm-text-orange-100 { color: hsl(var(--orange-100)) !important; }
.cstm-text-orange-200 { color: hsl(var(--orange-200)) !important; }
.cstm-text-orange-300 { color: hsl(var(--orange-300)) !important; }
.cstm-text-orange-400 { color: hsl(var(--orange-400)) !important; }
.cstm-text-orange-500 { color: hsl(var(--orange-500)) !important; }
.cstm-text-orange-600 { color: hsl(var(--orange-600)) !important; }
.cstm-text-orange-700 { color: hsl(var(--orange-700)) !important; }
.cstm-text-orange-800 { color: hsl(var(--orange-800)) !important; }
.cstm-text-orange-900 { color: hsl(var(--orange-900)) !important; }

.cstm-border-orange-100 { border-color: hsl(var(--orange-100)) !important; }
.cstm-border-orange-200 { border-color: hsl(var(--orange-200)) !important; }
.cstm-border-orange-300 { border-color: hsl(var(--orange-300)) !important; }
.cstm-border-orange-400 { border-color: hsl(var(--orange-400)) !important; }
.cstm-border-orange-500 { border-color: hsl(var(--orange-500)) !important; }
.cstm-border-orange-600 { border-color: hsl(var(--orange-600)) !important; }
.cstm-border-orange-700 { border-color: hsl(var(--orange-700)) !important; }
.cstm-border-orange-800 { border-color: hsl(var(--orange-800)) !important; }
.cstm-border-orange-900 { border-color: hsl(var(--orange-900)) !important; }

/* YELLOW */
.cstm-bg-yellow-100 { background-color: hsl(var(--yellow-100)) !important; }
.cstm-bg-yellow-200 { background-color: hsl(var(--yellow-200)) !important; }
.cstm-bg-yellow-300 { background-color: hsl(var(--yellow-300)) !important; }
.cstm-bg-yellow-400 { background-color: hsl(var(--yellow-400)) !important; }
.cstm-bg-yellow-500 { background-color: hsl(var(--yellow-500)) !important; }
.cstm-bg-yellow-600 { background-color: hsl(var(--yellow-600)) !important; }
.cstm-bg-yellow-700 { background-color: hsl(var(--yellow-700)) !important; }
.cstm-bg-yellow-800 { background-color: hsl(var(--yellow-800)) !important; }
.cstm-bg-yellow-900 { background-color: hsl(var(--yellow-900)) !important; }

.cstm-text-yellow-100 { color: hsl(var(--yellow-100)) !important; }
.cstm-text-yellow-200 { color: hsl(var(--yellow-200)) !important; }
.cstm-text-yellow-300 { color: hsl(var(--yellow-300)) !important; }
.cstm-text-yellow-400 { color: hsl(var(--yellow-400)) !important; }
.cstm-text-yellow-500 { color: hsl(var(--yellow-500)) !important; }
.cstm-text-yellow-600 { color: hsl(var(--yellow-600)) !important; }
.cstm-text-yellow-700 { color: hsl(var(--yellow-700)) !important; }
.cstm-text-yellow-800 { color: hsl(var(--yellow-800)) !important; }
.cstm-text-yellow-900 { color: hsl(var(--yellow-900)) !important; }

.cstm-border-yellow-100 { border-color: hsl(var(--yellow-100)) !important; }
.cstm-border-yellow-200 { border-color: hsl(var(--yellow-200)) !important; }
.cstm-border-yellow-300 { border-color: hsl(var(--yellow-300)) !important; }
.cstm-border-yellow-400 { border-color: hsl(var(--yellow-400)) !important; }
.cstm-border-yellow-500 { border-color: hsl(var(--yellow-500)) !important; }
.cstm-border-yellow-600 { border-color: hsl(var(--yellow-600)) !important; }
.cstm-border-yellow-700 { border-color: hsl(var(--yellow-700)) !important; }
.cstm-border-yellow-800 { border-color: hsl(var(--yellow-800)) !important; }
.cstm-border-yellow-900 { border-color: hsl(var(--yellow-900)) !important; }

/* GREEN */
.cstm-bg-green-100 { background-color: hsl(var(--green-100)) !important; }
.cstm-bg-green-200 { background-color: hsl(var(--green-200)) !important; }
.cstm-bg-green-300 { background-color: hsl(var(--green-300)) !important; }
.cstm-bg-green-400 { background-color: hsl(var(--green-400)) !important; }
.cstm-bg-green-500 { background-color: hsl(var(--green-500)) !important; }
.cstm-bg-green-600 { background-color: hsl(var(--green-600)) !important; }
.cstm-bg-green-700 { background-color: hsl(var(--green-700)) !important; }
.cstm-bg-green-800 { background-color: hsl(var(--green-800)) !important; }
.cstm-bg-green-900 { background-color: hsl(var(--green-900)) !important; }

.cstm-text-green-100 { color: hsl(var(--green-100)) !important; }
.cstm-text-green-200 { color: hsl(var(--green-200)) !important; }
.cstm-text-green-300 { color: hsl(var(--green-300)) !important; }
.cstm-text-green-400 { color: hsl(var(--green-400)) !important; }
.cstm-text-green-500 { color: hsl(var(--green-500)) !important; }
.cstm-text-green-600 { color: hsl(var(--green-600)) !important; }
.cstm-text-green-700 { color: hsl(var(--green-700)) !important; }
.cstm-text-green-800 { color: hsl(var(--green-800)) !important; }
.cstm-text-green-900 { color: hsl(var(--green-900)) !important; }

.cstm-border-green-100 { border-color: hsl(var(--green-100)) !important; }
.cstm-border-green-200 { border-color: hsl(var(--green-200)) !important; }
.cstm-border-green-300 { border-color: hsl(var(--green-300)) !important; }
.cstm-border-green-400 { border-color: hsl(var(--green-400)) !important; }
.cstm-border-green-500 { border-color: hsl(var(--green-500)) !important; }
.cstm-border-green-600 { border-color: hsl(var(--green-600)) !important; }
.cstm-border-green-700 { border-color: hsl(var(--green-700)) !important; }
.cstm-border-green-800 { border-color: hsl(var(--green-800)) !important; }
.cstm-border-green-900 { border-color: hsl(var(--green-900)) !important; }

/* TEAL */
.cstm-bg-teal-100 { background-color: hsl(var(--teal-100)) !important; }
.cstm-bg-teal-200 { background-color: hsl(var(--teal-200)) !important; }
.cstm-bg-teal-300 { background-color: hsl(var(--teal-300)) !important; }
.cstm-bg-teal-400 { background-color: hsl(var(--teal-400)) !important; }
.cstm-bg-teal-500 { background-color: hsl(var(--teal-500)) !important; }
.cstm-bg-teal-600 { background-color: hsl(var(--teal-600)) !important; }
.cstm-bg-teal-700 { background-color: hsl(var(--teal-700)) !important; }
.cstm-bg-teal-800 { background-color: hsl(var(--teal-800)) !important; }
.cstm-bg-teal-900 { background-color: hsl(var(--teal-900)) !important; }

.cstm-text-teal-100 { color: hsl(var(--teal-100)) !important; }
.cstm-text-teal-200 { color: hsl(var(--teal-200)) !important; }
.cstm-text-teal-300 { color: hsl(var(--teal-300)) !important; }
.cstm-text-teal-400 { color: hsl(var(--teal-400)) !important; }
.cstm-text-teal-500 { color: hsl(var(--teal-500)) !important; }
.cstm-text-teal-600 { color: hsl(var(--teal-600)) !important; }
.cstm-text-teal-700 { color: hsl(var(--teal-700)) !important; }
.cstm-text-teal-800 { color: hsl(var(--teal-800)) !important; }
.cstm-text-teal-900 { color: hsl(var(--teal-900)) !important; }

.cstm-border-teal-100 { border-color: hsl(var(--teal-100)) !important; }
.cstm-border-teal-200 { border-color: hsl(var(--teal-200)) !important; }
.cstm-border-teal-300 { border-color: hsl(var(--teal-300)) !important; }
.cstm-border-teal-400 { border-color: hsl(var(--teal-400)) !important; }
.cstm-border-teal-500 { border-color: hsl(var(--teal-500)) !important; }
.cstm-border-teal-600 { border-color: hsl(var(--teal-600)) !important; }
.cstm-border-teal-700 { border-color: hsl(var(--teal-700)) !important; }
.cstm-border-teal-800 { border-color: hsl(var(--teal-800)) !important; }
.cstm-border-teal-900 { border-color: hsl(var(--teal-900)) !important; }

/* CYAN */
.cstm-bg-cyan-100 { background-color: hsl(var(--cyan-100)) !important; }
.cstm-bg-cyan-200 { background-color: hsl(var(--cyan-200)) !important; }
.cstm-bg-cyan-300 { background-color: hsl(var(--cyan-300)) !important; }
.cstm-bg-cyan-400 { background-color: hsl(var(--cyan-400)) !important; }
.cstm-bg-cyan-500 { background-color: hsl(var(--cyan-500)) !important; }
.cstm-bg-cyan-600 { background-color: hsl(var(--cyan-600)) !important; }
.cstm-bg-cyan-700 { background-color: hsl(var(--cyan-700)) !important; }
.cstm-bg-cyan-800 { background-color: hsl(var(--cyan-800)) !important; }
.cstm-bg-cyan-900 { background-color: hsl(var(--cyan-900)) !important; }

.cstm-text-cyan-100 { color: hsl(var(--cyan-100)) !important; }
.cstm-text-cyan-200 { color: hsl(var(--cyan-200)) !important; }
.cstm-text-cyan-300 { color: hsl(var(--cyan-300)) !important; }
.cstm-text-cyan-400 { color: hsl(var(--cyan-400)) !important; }
.cstm-text-cyan-500 { color: hsl(var(--cyan-500)) !important; }
.cstm-text-cyan-600 { color: hsl(var(--cyan-600)) !important; }
.cstm-text-cyan-700 { color: hsl(var(--cyan-700)) !important; }
.cstm-text-cyan-800 { color: hsl(var(--cyan-800)) !important; }
.cstm-text-cyan-900 { color: hsl(var(--cyan-900)) !important; }

.cstm-border-cyan-100 { border-color: hsl(var(--cyan-100)) !important; }
.cstm-border-cyan-200 { border-color: hsl(var(--cyan-200)) !important; }
.cstm-border-cyan-300 { border-color: hsl(var(--cyan-300)) !important; }
.cstm-border-cyan-400 { border-color: hsl(var(--cyan-400)) !important; }
.cstm-border-cyan-500 { border-color: hsl(var(--cyan-500)) !important; }
.cstm-border-cyan-600 { border-color: hsl(var(--cyan-600)) !important; }
.cstm-border-cyan-700 { border-color: hsl(var(--cyan-700)) !important; }
.cstm-border-cyan-800 { border-color: hsl(var(--cyan-800)) !important; }
.cstm-border-cyan-900 { border-color: hsl(var(--cyan-900)) !important; }

/* GRAY */
.cstm-bg-gray-100 { background-color: hsl(var(--gray-100)) !important; }
.cstm-bg-gray-200 { background-color: hsl(var(--gray-200)) !important; }
.cstm-bg-gray-300 { background-color: hsl(var(--gray-300)) !important; }
.cstm-bg-gray-400 { background-color: hsl(var(--gray-400)) !important; }
.cstm-bg-gray-500 { background-color: hsl(var(--gray-500)) !important; }
.cstm-bg-gray-600 { background-color: hsl(var(--gray-600)) !important; }
.cstm-bg-gray-700 { background-color: hsl(var(--gray-700)) !important; }
.cstm-bg-gray-800 { background-color: hsl(var(--gray-800)) !important; }
.cstm-bg-gray-900 { background-color: hsl(var(--gray-900)) !important; }

.cstm-text-gray-100 { color: hsl(var(--gray-100)) !important; }
.cstm-text-gray-200 { color: hsl(var(--gray-200)) !important; }
.cstm-text-gray-300 { color: hsl(var(--gray-300)) !important; }
.cstm-text-gray-400 { color: hsl(var(--gray-400)) !important; }
.cstm-text-gray-500 { color: hsl(var(--gray-500)) !important; }
.cstm-text-gray-600 { color: hsl(var(--gray-600)) !important; }
.cstm-text-gray-700 { color: hsl(var(--gray-700)) !important; }
.cstm-text-gray-800 { color: hsl(var(--gray-800)) !important; }
.cstm-text-gray-900 { color: hsl(var(--gray-900)) !important; }

.cstm-border-gray-100 { border-color: hsl(var(--gray-100)) !important; }
.cstm-border-gray-200 { border-color: hsl(var(--gray-200)) !important; }
.cstm-border-gray-300 { border-color: hsl(var(--gray-300)) !important; }
.cstm-border-gray-400 { border-color: hsl(var(--gray-400)) !important; }
.cstm-border-gray-500 { border-color: hsl(var(--gray-500)) !important; }
.cstm-border-gray-600 { border-color: hsl(var(--gray-600)) !important; }
.cstm-border-gray-700 { border-color: hsl(var(--gray-700)) !important; }
.cstm-border-gray-800 { border-color: hsl(var(--gray-800)) !important; }
.cstm-border-gray-900 { border-color: hsl(var(--gray-900)) !important; }






/* =========================
   CUSTOM FILL UTILITIES
   ========================= */

/* PRIMARY */
.cstm-fill-primary-100 { fill: hsl(var(--primary-100)) !important; }
.cstm-fill-primary-200 { fill: hsl(var(--primary-200)) !important; }
.cstm-fill-primary-300 { fill: hsl(var(--primary-300)) !important; }
.cstm-fill-primary-400 { fill: hsl(var(--primary-400)) !important; }
.cstm-fill-primary-500 { fill: hsl(var(--primary-500)) !important; }
.cstm-fill-primary-600 { fill: hsl(var(--primary-600)) !important; }
.cstm-fill-primary-700 { fill: hsl(var(--primary-700)) !important; }
.cstm-fill-primary-800 { fill: hsl(var(--primary-800)) !important; }
.cstm-fill-primary-900 { fill: hsl(var(--primary-900)) !important; }

/* SECONDARY */
.cstm-fill-secondary-100 { fill: hsl(var(--secondary-100)) !important; }
.cstm-fill-secondary-200 { fill: hsl(var(--secondary-200)) !important; }
.cstm-fill-secondary-300 { fill: hsl(var(--secondary-300)) !important; }
.cstm-fill-secondary-400 { fill: hsl(var(--secondary-400)) !important; }
.cstm-fill-secondary-500 { fill: hsl(var(--secondary-500)) !important; }
.cstm-fill-secondary-600 { fill: hsl(var(--secondary-600)) !important; }
.cstm-fill-secondary-700 { fill: hsl(var(--secondary-700)) !important; }
.cstm-fill-secondary-800 { fill: hsl(var(--secondary-800)) !important; }
.cstm-fill-secondary-900 { fill: hsl(var(--secondary-900)) !important; }

/* SUCCESS */
.cstm-fill-success-100 { fill: hsl(var(--success-100)) !important; }
.cstm-fill-success-200 { fill: hsl(var(--success-200)) !important; }
.cstm-fill-success-300 { fill: hsl(var(--success-300)) !important; }
.cstm-fill-success-400 { fill: hsl(var(--success-400)) !important; }
.cstm-fill-success-500 { fill: hsl(var(--success-500)) !important; }
.cstm-fill-success-600 { fill: hsl(var(--success-600)) !important; }
.cstm-fill-success-700 { fill: hsl(var(--success-700)) !important; }
.cstm-fill-success-800 { fill: hsl(var(--success-800)) !important; }
.cstm-fill-success-900 { fill: hsl(var(--success-900)) !important; }

/* INFO */
.cstm-fill-info-100 { fill: hsl(var(--info-100)) !important; }
.cstm-fill-info-200 { fill: hsl(var(--info-200)) !important; }
.cstm-fill-info-300 { fill: hsl(var(--info-300)) !important; }
.cstm-fill-info-400 { fill: hsl(var(--info-400)) !important; }
.cstm-fill-info-500 { fill: hsl(var(--info-500)) !important; }
.cstm-fill-info-600 { fill: hsl(var(--info-600)) !important; }
.cstm-fill-info-700 { fill: hsl(var(--info-700)) !important; }
.cstm-fill-info-800 { fill: hsl(var(--info-800)) !important; }
.cstm-fill-info-900 { fill: hsl(var(--info-900)) !important; }

/* WARNING */
.cstm-fill-warning-100 { fill: hsl(var(--warning-100)) !important; }
.cstm-fill-warning-200 { fill: hsl(var(--warning-200)) !important; }
.cstm-fill-warning-300 { fill: hsl(var(--warning-300)) !important; }
.cstm-fill-warning-400 { fill: hsl(var(--warning-400)) !important; }
.cstm-fill-warning-500 { fill: hsl(var(--warning-500)) !important; }
.cstm-fill-warning-600 { fill: hsl(var(--warning-600)) !important; }
.cstm-fill-warning-700 { fill: hsl(var(--warning-700)) !important; }
.cstm-fill-warning-800 { fill: hsl(var(--warning-800)) !important; }
.cstm-fill-warning-900 { fill: hsl(var(--warning-900)) !important; }

/* DANGER */
.cstm-fill-danger-100 { fill: hsl(var(--danger-100)) !important; }
.cstm-fill-danger-200 { fill: hsl(var(--danger-200)) !important; }
.cstm-fill-danger-300 { fill: hsl(var(--danger-300)) !important; }
.cstm-fill-danger-400 { fill: hsl(var(--danger-400)) !important; }
.cstm-fill-danger-500 { fill: hsl(var(--danger-500)) !important; }
.cstm-fill-danger-600 { fill: hsl(var(--danger-600)) !important; }
.cstm-fill-danger-700 { fill: hsl(var(--danger-700)) !important; }
.cstm-fill-danger-800 { fill: hsl(var(--danger-800)) !important; }
.cstm-fill-danger-900 { fill: hsl(var(--danger-900)) !important; }

/* BLUE */
.cstm-fill-blue-100 { fill: hsl(var(--blue-100)) !important; }
.cstm-fill-blue-200 { fill: hsl(var(--blue-200)) !important; }
.cstm-fill-blue-300 { fill: hsl(var(--blue-300)) !important; }
.cstm-fill-blue-400 { fill: hsl(var(--blue-400)) !important; }
.cstm-fill-blue-500 { fill: hsl(var(--blue-500)) !important; }
.cstm-fill-blue-600 { fill: hsl(var(--blue-600)) !important; }
.cstm-fill-blue-700 { fill: hsl(var(--blue-700)) !important; }
.cstm-fill-blue-800 { fill: hsl(var(--blue-800)) !important; }
.cstm-fill-blue-900 { fill: hsl(var(--blue-900)) !important; }

/* INDIGO */
.cstm-fill-indigo-100 { fill: hsl(var(--indigo-100)) !important; }
.cstm-fill-indigo-200 { fill: hsl(var(--indigo-200)) !important; }
.cstm-fill-indigo-300 { fill: hsl(var(--indigo-300)) !important; }
.cstm-fill-indigo-400 { fill: hsl(var(--indigo-400)) !important; }
.cstm-fill-indigo-500 { fill: hsl(var(--indigo-500)) !important; }
.cstm-fill-indigo-600 { fill: hsl(var(--indigo-600)) !important; }
.cstm-fill-indigo-700 { fill: hsl(var(--indigo-700)) !important; }
.cstm-fill-indigo-800 { fill: hsl(var(--indigo-800)) !important; }
.cstm-fill-indigo-900 { fill: hsl(var(--indigo-900)) !important; }

/* PURPLE */
.cstm-fill-purple-100 { fill: hsl(var(--purple-100)) !important; }
.cstm-fill-purple-200 { fill: hsl(var(--purple-200)) !important; }
.cstm-fill-purple-300 { fill: hsl(var(--purple-300)) !important; }
.cstm-fill-purple-400 { fill: hsl(var(--purple-400)) !important; }
.cstm-fill-purple-500 { fill: hsl(var(--purple-500)) !important; }
.cstm-fill-purple-600 { fill: hsl(var(--purple-600)) !important; }
.cstm-fill-purple-700 { fill: hsl(var(--purple-700)) !important; }
.cstm-fill-purple-800 { fill: hsl(var(--purple-800)) !important; }
.cstm-fill-purple-900 { fill: hsl(var(--purple-900)) !important; }

/* PINK */
.cstm-fill-pink-100 { fill: hsl(var(--pink-100)) !important; }
.cstm-fill-pink-200 { fill: hsl(var(--pink-200)) !important; }
.cstm-fill-pink-300 { fill: hsl(var(--pink-300)) !important; }
.cstm-fill-pink-400 { fill: hsl(var(--pink-400)) !important; }
.cstm-fill-pink-500 { fill: hsl(var(--pink-500)) !important; }
.cstm-fill-pink-600 { fill: hsl(var(--pink-600)) !important; }
.cstm-fill-pink-700 { fill: hsl(var(--pink-700)) !important; }
.cstm-fill-pink-800 { fill: hsl(var(--pink-800)) !important; }
.cstm-fill-pink-900 { fill: hsl(var(--pink-900)) !important; }

/* RED */
.cstm-fill-red-100 { fill: hsl(var(--red-100)) !important; }
.cstm-fill-red-200 { fill: hsl(var(--red-200)) !important; }
.cstm-fill-red-300 { fill: hsl(var(--red-300)) !important; }
.cstm-fill-red-400 { fill: hsl(var(--red-400)) !important; }
.cstm-fill-red-500 { fill: hsl(var(--red-500)) !important; }
.cstm-fill-red-600 { fill: hsl(var(--red-600)) !important; }
.cstm-fill-red-700 { fill: hsl(var(--red-700)) !important; }
.cstm-fill-red-800 { fill: hsl(var(--red-800)) !important; }
.cstm-fill-red-900 { fill: hsl(var(--red-900)) !important; }

/* ORANGE */
.cstm-fill-orange-100 { fill: hsl(var(--orange-100)) !important; }
.cstm-fill-orange-200 { fill: hsl(var(--orange-200)) !important; }
.cstm-fill-orange-300 { fill: hsl(var(--orange-300)) !important; }
.cstm-fill-orange-400 { fill: hsl(var(--orange-400)) !important; }
.cstm-fill-orange-500 { fill: hsl(var(--orange-500)) !important; }
.cstm-fill-orange-600 { fill: hsl(var(--orange-600)) !important; }
.cstm-fill-orange-700 { fill: hsl(var(--orange-700)) !important; }
.cstm-fill-orange-800 { fill: hsl(var(--orange-800)) !important; }
.cstm-fill-orange-900 { fill: hsl(var(--orange-900)) !important; }

/* YELLOW */
.cstm-fill-yellow-100 { fill: hsl(var(--yellow-100)) !important; }
.cstm-fill-yellow-200 { fill: hsl(var(--yellow-200)) !important; }
.cstm-fill-yellow-300 { fill: hsl(var(--yellow-300)) !important; }
.cstm-fill-yellow-400 { fill: hsl(var(--yellow-400)) !important; }
.cstm-fill-yellow-500 { fill: hsl(var(--yellow-500)) !important; }
.cstm-fill-yellow-600 { fill: hsl(var(--yellow-600)) !important; }
.cstm-fill-yellow-700 { fill: hsl(var(--yellow-700)) !important; }
.cstm-fill-yellow-800 { fill: hsl(var(--yellow-800)) !important; }
.cstm-fill-yellow-900 { fill: hsl(var(--yellow-900)) !important; }

/* GREEN */
.cstm-fill-green-100 { fill: hsl(var(--green-100)) !important; }
.cstm-fill-green-200 { fill: hsl(var(--green-200)) !important; }
.cstm-fill-green-300 { fill: hsl(var(--green-300)) !important; }
.cstm-fill-green-400 { fill: hsl(var(--green-400)) !important; }
.cstm-fill-green-500 { fill: hsl(var(--green-500)) !important; }
.cstm-fill-green-600 { fill: hsl(var(--green-600)) !important; }
.cstm-fill-green-700 { fill: hsl(var(--green-700)) !important; }
.cstm-fill-green-800 { fill: hsl(var(--green-800)) !important; }
.cstm-fill-green-900 { fill: hsl(var(--green-900)) !important; }

/* TEAL */
.cstm-fill-teal-100 { fill: hsl(var(--teal-100)) !important; }
.cstm-fill-teal-200 { fill: hsl(var(--teal-200)) !important; }
.cstm-fill-teal-300 { fill: hsl(var(--teal-300)) !important; }
.cstm-fill-teal-400 { fill: hsl(var(--teal-400)) !important; }
.cstm-fill-teal-500 { fill: hsl(var(--teal-500)) !important; }
.cstm-fill-teal-600 { fill: hsl(var(--teal-600)) !important; }
.cstm-fill-teal-700 { fill: hsl(var(--teal-700)) !important; }
.cstm-fill-teal-800 { fill: hsl(var(--teal-800)) !important; }
.cstm-fill-teal-900 { fill: hsl(var(--teal-900)) !important; }

/* CYAN */
.cstm-fill-cyan-100 { fill: hsl(var(--cyan-100)) !important; }
.cstm-fill-cyan-200 { fill: hsl(var(--cyan-200)) !important; }
.cstm-fill-cyan-300 { fill: hsl(var(--cyan-300)) !important; }
.cstm-fill-cyan-400 { fill: hsl(var(--cyan-400)) !important; }
.cstm-fill-cyan-500 { fill: hsl(var(--cyan-500)) !important; }
.cstm-fill-cyan-600 { fill: hsl(var(--cyan-600)) !important; }
.cstm-fill-cyan-700 { fill: hsl(var(--cyan-700)) !important; }
.cstm-fill-cyan-800 { fill: hsl(var(--cyan-800)) !important; }
.cstm-fill-cyan-900 { fill: hsl(var(--cyan-900)) !important; }

/* GRAY */
.cstm-fill-gray-100 { fill: hsl(var(--gray-100)) !important; }
.cstm-fill-gray-200 { fill: hsl(var(--gray-200)) !important; }
.cstm-fill-gray-300 { fill: hsl(var(--gray-300)) !important; }
.cstm-fill-gray-400 { fill: hsl(var(--gray-400)) !important; }
.cstm-fill-gray-500 { fill: hsl(var(--gray-500)) !important; }
.cstm-fill-gray-600 { fill: hsl(var(--gray-600)) !important; }
.cstm-fill-gray-700 { fill: hsl(var(--gray-700)) !important; }
.cstm-fill-gray-800 { fill: hsl(var(--gray-800)) !important; }
.cstm-fill-gray-900 { fill: hsl(var(--gray-900)) !important; }

.cstm-hover-bg-color-2:hover {
  background-color: hsl(var(--bg-c-2));
  transition: .25s ease;
}

.cstm-hover-text-color-primary-500:hover{
  color: hsl(var(--primary-500)) !important;
  transition: .25s ease;
}

.flex-1-1-0 {
  flex: 1 1 0;
}