:root, .light, .light-theme {
  --blue-1: #fefcfb;
  --blue-2: #fff5f0;
  --blue-3: #ffeade;
  --blue-4: #ffd7c1;
  --blue-5: #ffc9ae;
  --blue-6: #ffba97;
  --blue-7: #fca885;
  --blue-8: #f09067;
  --blue-9: #fa6f29;
  --blue-10: #ee610f;
  --blue-11: #d14d00;
  --blue-12: #572e1c;

  --blue-a1: #c0400004;
  --blue-a2: #ff55000f;
  --blue-a3: #ff5d0021;
  --blue-a4: #ff5b003e;
  --blue-a5: #ff550051;
  --blue-a6: #ff560068;
  --blue-a7: #f94a017a;
  --blue-a8: #e6450098;
  --blue-a9: #f95400d6;
  --blue-a10: #ed5700f0;
  --blue-a11: #d14d00;
  --blue-a12: #421400e3;

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

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.2% 0.0026 43.5);
      --blue-2: oklch(97.9% 0.015 43.5);
      --blue-3: oklch(95.8% 0.0361 43.5);
      --blue-4: oklch(92% 0.0794 43.5);
      --blue-5: oklch(89% 0.1043 43.5);
      --blue-6: oklch(85.7% 0.1077 43.5);
      --blue-7: oklch(80.5% 0.1102 43.5);
      --blue-8: oklch(74.5% 0.1294 43.5);
      --blue-9: oklch(70.2% 0.1871 43.5);
      --blue-10: oklch(66.4% 0.1904 43.5);
      --blue-11: oklch(59.2% 0.1822 43.5);
      --blue-12: oklch(35% 0.0673 43.5);

      --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.8745 0.3608 0.0039 / 0.122);
      --blue-a4: color(display-p3 0.902 0.3412 0.0039 / 0.232);
      --blue-a5: color(display-p3 0.898 0.3255 0.0039 / 0.302);
      --blue-a6: color(display-p3 0.902 0.3373 0.0039 / 0.389);
      --blue-a7: color(display-p3 0.8745 0.2863 0.0039 / 0.455);
      --blue-a8: color(display-p3 0.8078 0.2667 0 / 0.565);
      --blue-a9: color(display-p3 0.8863 0.2941 0 / 0.757);
      --blue-a10: color(display-p3 0.8392 0.2863 0 / 0.82);
      --blue-a11: color(display-p3 0.7255 0.2353 0 / 0.867);
      --blue-a12: color(display-p3 0.2196 0.0706 0 / 0.875);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 1 0.9569 0.9333 / 0.8);
      --blue-indicator: oklch(70.2% 0.1871 43.5);
      --blue-track: oklch(70.2% 0.1871 43.5);
    }
  }
}

:root, .light, .light-theme {
  --tomato-1: #fbfefc;
  --tomato-2: #f5fbf6;
  --tomato-3: #e6f7ea;
  --tomato-4: #d7f1dd;
  --tomato-5: #c5e9ce;
  --tomato-6: #aedebb;
  --tomato-7: #8fcfa1;
  --tomato-8: #5fb97d;
  --tomato-9: #008042;
  --tomato-10: #007235;
  --tomato-11: #028143;
  --tomato-12: #1d3b27;

  --tomato-a1: #00c04004;
  --tomato-a2: #00991a0a;
  --tomato-a3: #00ae2919;
  --tomato-a4: #00a62728;
  --tomato-a5: #009f283a;
  --tomato-a6: #00982951;
  --tomato-a7: #00922970;
  --tomato-a8: #009030a0;
  --tomato-a9: #008042;
  --tomato-a10: #007235;
  --tomato-a11: #008042fd;
  --tomato-a12: #00220be2;

  --tomato-contrast: #fff;
  --tomato-surface: #f3faf4cc;
  --tomato-indicator: #008042;
  --tomato-track: #008042;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --tomato-1: oklch(99.4% 0.0049 152.8);
      --tomato-2: oklch(98.2% 0.0095 152.8);
      --tomato-3: oklch(96% 0.0238 152.8);
      --tomato-4: oklch(93.3% 0.0379 152.8);
      --tomato-5: oklch(90% 0.0529 152.8);
      --tomato-6: oklch(85.7% 0.0699 152.8);
      --tomato-7: oklch(79.8% 0.0919 152.8);
      --tomato-8: oklch(71.5% 0.1244 152.8);
      --tomato-9: oklch(52.6% 0.1359 152.8);
      --tomato-10: oklch(47.8% 0.1359 152.8);
      --tomato-11: oklch(52.8% 0.1359 152.8);
      --tomato-12: oklch(32.4% 0.0516 152.8);

      --tomato-a1: color(display-p3 0.0235 0.6745 0.0235 / 0.012);
      --tomato-a2: color(display-p3 0.0235 0.5647 0.0235 / 0.036);
      --tomato-a3: color(display-p3 0.0118 0.5961 0.102 / 0.087);
      --tomato-a4: color(display-p3 0.0078 0.5765 0.0627 / 0.138);
      --tomato-a5: color(display-p3 0 0.549 0.0784 / 0.2);
      --tomato-a6: color(display-p3 0.0039 0.5255 0.0902 / 0.279);
      --tomato-a7: color(display-p3 0.0039 0.4902 0.0863 / 0.385);
      --tomato-a8: color(display-p3 0 0.4745 0.0902 / 0.538);
      --tomato-a9: color(display-p3 0 0.3569 0.0863 / 0.785);
      --tomato-a10: color(display-p3 0 0.3098 0.0588 / 0.812);
      --tomato-a11: color(display-p3 0 0.3569 0.0863 / 0.781);
      --tomato-a12: color(display-p3 0 0.102 0.0235 / 0.859);

      --tomato-contrast: #fff;
      --tomato-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
      --tomato-indicator: oklch(52.6% 0.1359 152.8);
      --tomato-track: oklch(52.6% 0.1359 152.8);
    }
  }
}