:root {
  /* Core SANBS variables (exact as requested) */
  --red: #da291c;
  --mh: #9e1b34; /* Burgundy */
  --bu: #3a0013; /* Mahogany */
  --sa: #f28a69; /* Salmon */
  --cr: #f9f6eb; /* Cream */
  --pe: #f7c9b5; /* Pale Peach */
  --gy: #6f6f6f; /* Text Grey */
  --lg: #c6c6c6; /* Light Grey */
  --bk: #000;
  --wh: #fff;

  /* RGB companions for soft rgba blends (no color guessing) */
  --red-rgb: 218, 41, 28;
  --mh-rgb: 158, 27, 52; /* Burgundy */
  --bu-rgb: 58, 0, 19; /* Mahogany */
  --sa-rgb: 242, 138, 105; /* Salmon */
  --cr-rgb: 249, 246, 235; /* Cream */
  --pe-rgb: 247, 201, 181; /* Pale Peach */
  --gy-rgb: 111, 111, 111; /* Text Grey */
  --lg-rgb: 198, 198, 198; /* Light Grey */
  --bk-rgb: 0, 0, 0;
  --wh-rgb: 255, 255, 255;
}

.swatch {
  align-items: center;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
  color: #fff;
  display: flex;
  font-weight: 700;
  height: 140px;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

[class*="gr-"] {
  --angle: 135deg;
  --tint: 0;

  background: linear-gradient(var(--angle), var(--c1, #000), var(--c2, #000));
  background-blend-mode: overlay;
  background-color: rgb(255 255 255 / var(--tint));
}

.gr-red {
  background: var(--red);
}

.gr-bu {
  background: var(--bu);
}

.gr-mh {
  background: var(--mh);
}

.gr-sa {
  background: var(--sa);
}

.gr-cr {
  background: var(--cr);
  color: #000;
}

.gr-pe {
  background: var(--pe);
  color: #000;
}

.gr-gy {
  background: var(--gy);
}

.gr-lg {
  background: var(--lg);
  color: #000;
}

.gr-bk {
  background: var(--bk);
}

.gr-wh {
  background: var(--wh);
  color: #000;
}

.gr-bu-cr {
  --c1: var(--bu);
  --c2: var(--cr);
}

.gr-mh-cr {
  --c1: var(--mh);
  --c2: var(--cr);
}

.gr-mh-red {
  --c1: var(--mh);
  --c2: var(--red);
}

.gr-sa-cr {
  --c1: var(--sa);
  --c2: var(--cr);
}

.gr-sa-pe {
  --c1: var(--sa);
  --c2: var(--pe);
}

.gr-bu-sa {
  --c1: var(--bu);
  --c2: var(--sa);
}

.gr-bu-pe {
  --c1: var(--bu);
  --c2: var(--pe);
}

.gr-red-cr {
  --c1: var(--red);
  --c2: var(--cr);
}

.gr-red-pe {
  --c1: var(--red);
  --c2: var(--pe);
}

.gr-red-bu {
  --c1: var(--red);
  --c2: var(--bu);
}

.gr-gy-cr {
  --c1: var(--gy);
  --c2: var(--cr);
}

.gr-bk-cr {
  --c1: var(--bk);
  --c2: var(--cr);
}

.gr-red-gy {
  --c1: var(--red);
  --c2: var(--gy);
}

.gr-red-soft1 {
  background: linear-gradient(
    var(--angle),
    rgb(218 41 28 / 0.9),
    hsl(47deg 54% 95% / 0.8)
  );
}

.gr-red-soft2 {
  background: linear-gradient(
    var(--angle),
    rgb(218 41 28 / 0.7),
    hsl(14deg 84% 68% / 0.6)
  );
}

.gr-red-soft3 {
  background: linear-gradient(
    var(--angle),
    rgb(218 41 28 / 0.5),
    hsl(0deg 0% 44% / 0.5)
  );
}

.gr-rad-red {
  background: radial-gradient(circle at 30% 30%, var(--red), var(--cr));
}

.gr-rad-bu {
  background: radial-gradient(circle at 30% 30%, var(--bu), var(--pe));
}

.gr-rad-sa {
  background: radial-gradient(circle at 30% 30%, var(--sa), var(--cr));
}

.gr-cr-gy {
  background: radial-gradient(circle at 20% 30%, var(--gy), var(--cr));
}

/* ------------------------------------------- */

/* NEW SECONDARY-FOCUSED GRADIENTS (Add below) */

/* ------------------------------------------- */

.gr-cr-gy {
  --c1: var(--cr);
  --c2: var(--gy);
}

.gr-mh-bu {
  --c1: var(--mh);
  --c2: var(--bu);
}

.gr-bu-sa {
  --c1: var(--bu);
  --c2: var(--sa);
}

.gr-mh-sa {
  --c1: var(--mh);
  --c2: var(--sa);
}

.gr-bu-cr {
  --c1: var(--bu);
  --c2: var(--cr);
}

.gr-mh-gy {
  --c1: var(--mh);
  --c2: var(--gy);
}

.gr-sa-gy {
  --c1: var(--sa);
  --c2: var(--gy);
}

.gr-mh-sa-red {
  background: linear-gradient(var(--angle), var(--mh), var(--sa), var(--red));
}

.gr-bu-sa-red {
  background: linear-gradient(var(--angle), var(--bu), var(--sa), var(--red));
}

.gr-soft-blend {
  --c1: var(--cr);
  --c2: var(--gy);
}

.gr-sunset {
  background: linear-gradient(var(--angle), var(--sa), var(--cr), var(--gy));
}

/* === PERFORMANCE HEADER GRADIENTS === */

/* Classic 3-tone blend (burgundy → salmon → peach) */
.gr-mh-sa-pe {
  background: linear-gradient(90deg, var(--mh), var(--sa), var(--pe));
}

/* Warm 3-tone blend (mahogany → salmon → cream) */
.gr-bu-sa-cr {
  background: linear-gradient(90deg, var(--bu), var(--sa), var(--cr));
}

/* Soft blush (salmon → peach → cream) */
.gr-sa-pe-cr {
  background: linear-gradient(90deg, var(--sa), var(--pe), var(--cr));
}

/* Deep tone (mahogany → burgundy → salmon) */
.gr-bu-mh-sa {
  background: linear-gradient(90deg, var(--bu), var(--mh), var(--sa));
}

/* Reverse blend (peach → salmon → mahogany) */
.gr-pe-sa-bu {
  background: linear-gradient(90deg, var(--pe), var(--sa), var(--bu));
}

/* Cream-edge highlight (burgundy → salmon → cream → white) */
.gr-mh-sa-cr-wh {
  background: linear-gradient(90deg, var(--mh), var(--sa), var(--cr), var(--wh));
}

/* Optional: reverse direction (left↔right) */
.gr-rev {
  --angle: 315deg !important;
}
.tint-0  { --tint: 0; }
.tint-10 { --tint: 0.1; }
.tint-20 { --tint: 0.2; }
.tint-30 { --tint: 0.3; }
.tint-40 { --tint: 0.4; }
.tint-50 { --tint: 0.5; }
.tint-60 { --tint: 0.6; }
.tint-70 { --tint: 0.7; }
.tint-80 { --tint: 0.8; }
.tint-85 { --tint: 0.85; }
.tint-90 { --tint: 0.9; }


.angle-0   { --angle: 0deg; }
.angle-45  { --angle: 45deg; }
.angle-90  { --angle: 90deg; }
.angle-135 { --angle: 135deg; }
.angle-180 { --angle: 180deg; }
.angle-225 { --angle: 225deg; }
.angle-270 { --angle: 270deg; }
.angle-315 { --angle: 315deg; }


/* test auto-clean */