:root, .light, .light-theme {
  --blue-1: #fefcfb;
  --blue-2: #fff5f0;
  --blue-3: #ffe8de;
  --blue-4: #ffd6c6;
  --blue-5: #ffc9b4;
  --blue-6: #ffb9a0;
  --blue-7: #ffa386;
  --blue-8: #f88968;
  --blue-9: #ff591f;
  --blue-10: #f14b04;
  --blue-11: #db3e00;
  --blue-12: #5b2b1c;

  --blue-a1: #c0400004;
  --blue-a2: #ff55000f;
  --blue-a3: #ff4e0021;
  --blue-a4: #ff480039;
  --blue-a5: #ff48014b;
  --blue-a6: #ff44005f;
  --blue-a7: #ff3e0079;
  --blue-a8: #f4380097;
  --blue-a9: #ff4200e0;
  --blue-a10: #f14800fb;
  --blue-a11: #db3e00;
  --blue-a12: #471100e3;

  --blue-contrast: #fff;
  --blue-surface: #fff3eccc;
  --blue-indicator: #ff591f;
  --blue-track: #ff591f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.2% 0.0029 37.43);
      --blue-2: oklch(97.9% 0.0166 37.43);
      --blue-3: oklch(95.8% 0.0399 37.43);
      --blue-4: oklch(92% 0.0879 37.43);
      --blue-5: oklch(89% 0.1156 37.43);
      --blue-6: oklch(85.7% 0.1194 37.43);
      --blue-7: oklch(80.5% 0.1223 37.43);
      --blue-8: oklch(74.5% 0.1436 37.43);
      --blue-9: oklch(68.1% 0.2116 37.43);
      --blue-10: oklch(64.3% 0.2116 37.43);
      --blue-11: oklch(59.2% 0.2025 37.43);
      --blue-12: oklch(35% 0.0748 37.43);

      --blue-a1: color(display-p3 0.7569 0.2667 0.0235 / 0.016);
      --blue-a2: color(display-p3 0.8588 0.2902 0.0039 / 0.055);
      --blue-a3: color(display-p3 0.8784 0.3176 0.0078 / 0.126);
      --blue-a4: color(display-p3 0.8745 0.2941 0.0039 / 0.216);
      --blue-a5: color(display-p3 0.8902 0.2824 0.0039 / 0.283);
      --blue-a6: color(display-p3 0.8824 0.2667 0.0039 / 0.357);
      --blue-a7: color(display-p3 0.8902 0.2353 0.0039 / 0.451);
      --blue-a8: color(display-p3 0.8471 0.2235 0 / 0.565);
      --blue-a9: color(display-p3 0.9059 0.2353 0 / 0.789);
      --blue-a10: color(display-p3 0.851 0.2235 0 / 0.844);
      --blue-a11: color(display-p3 0.7608 0.1882 0 / 0.871);
      --blue-a12: color(display-p3 0.2392 0.0627 0 / 0.875);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 1 0.9529 0.9333 / 0.8);
      --blue-indicator: oklch(68.1% 0.2116 37.43);
      --blue-track: oklch(68.1% 0.2116 37.43);
    }
  }
}

:root, .light, .light-theme {
  --tomato-1: #fafefb;
  --tomato-2: #f4fbf6;
  --tomato-3: #e2f8ea;
  --tomato-4: #d0f3dd;
  --tomato-5: #bdebce;
  --tomato-6: #a7dfbd;
  --tomato-7: #8bcfa6;
  --tomato-8: #60ba88;
  --tomato-9: #006b40;
  --tomato-10: #005c32;
  --tomato-11: #1e7a4e;
  --tomato-12: #1f412e;

  --tomato-a1: #00cc3305;
  --tomato-a2: #00a32f0b;
  --tomato-a3: #00c2471d;
  --tomato-a4: #00be472f;
  --tomato-a5: #00b24242;
  --tomato-a6: #00a34058;
  --tomato-a7: #00963c74;
  --tomato-a8: #0091409f;
  --tomato-a9: #006b40;
  --tomato-a10: #005c32;
  --tomato-a11: #006836e1;
  --tomato-a12: #002711e0;

  --tomato-contrast: #fff;
  --tomato-surface: #f1faf4cc;
  --tomato-indicator: #006b40;
  --tomato-track: #006b40;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --tomato-1: oklch(99.3% 0.0054 157.4);
      --tomato-2: oklch(98.2% 0.0105 157.4);
      --tomato-3: oklch(95.9% 0.0302 157.4);
      --tomato-4: oklch(93.3% 0.0476 157.4);
      --tomato-5: oklch(89.9% 0.0622 157.4);
      --tomato-6: oklch(85.6% 0.0748 157.4);
      --tomato-7: oklch(79.8% 0.0901 157.4);
      --tomato-8: oklch(72% 0.115 157.4);
      --tomato-9: oklch(46.5% 0.1098 157.4);
      --tomato-10: oklch(41.2% 0.1098 157.4);
      --tomato-11: oklch(51.5% 0.1098 157.4);
      --tomato-12: oklch(34.4% 0.0532 157.4);

      --tomato-a1: color(display-p3 0.0235 0.7569 0.0235 / 0.016);
      --tomato-a2: color(display-p3 0.0235 0.6118 0.1216 / 0.04);
      --tomato-a3: color(display-p3 0.0118 0.6863 0.2078 / 0.099);
      --tomato-a4: color(display-p3 0.0039 0.6784 0.1765 / 0.157);
      --tomato-a5: color(display-p3 0.0039 0.6353 0.1804 / 0.224);
      --tomato-a6: color(display-p3 0.0039 0.5569 0.1608 / 0.299);
      --tomato-a7: color(display-p3 0.0039 0.5059 0.1529 / 0.397);
      --tomato-a8: color(display-p3 0 0.4784 0.1569 / 0.534);
      --tomato-a9: color(display-p3 0 0.2863 0.1098 / 0.824);
      --tomato-a10: color(display-p3 0 0.2431 0.0745 / 0.851);
      --tomato-a11: color(display-p3 0 0.3098 0.1137 / 0.765);
      --tomato-a12: color(display-p3 0 0.1176 0.0392 / 0.848);

      --tomato-contrast: #fff;
      --tomato-surface: color(display-p3 0.9529 0.9804 0.9608 / 0.8);
      --tomato-indicator: oklch(46.5% 0.1098 157.4);
      --tomato-track: oklch(46.5% 0.1098 157.4);
    }
  }
}