:root, .light, .light-theme {
  --blue-1: #fffcfc;
  --blue-2: #fff7f7;
  --blue-3: #ffeaea;
  --blue-4: #fdd;
  --blue-5: #ffd0d1;
  --blue-6: #f8c6c7;
  --blue-7: #eab8b9;
  --blue-8: #d4a4a5;
  --blue-9: #3d2425;
  --blue-10: #523738;
  --blue-11: #84595a;
  --blue-12: #402627;

  --blue-a1: #ff000003;
  --blue-a2: #ff000008;
  --blue-a3: #ff000015;
  --blue-a4: #ff000022;
  --blue-a5: #ff00062f;
  --blue-a6: #e0000539;
  --blue-a7: #b4000447;
  --blue-a8: #8701035b;
  --blue-a9: #1d0001db;
  --blue-a10: #230001c8;
  --blue-a11: #420002a6;
  --blue-a12: #1f0001d9;

  --blue-contrast: #fff;
  --blue-surface: #fff5f5cc;
  --blue-indicator: #3d2425;
  --blue-track: #3d2425;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.4% 0.0034 17.06);
      --blue-2: oklch(98.3% 0.0115 17.06);
      --blue-3: oklch(95.5% 0.0258 17.06);
      --blue-4: oklch(92.8% 0.041 17.06);
      --blue-5: oklch(90.1% 0.0575 17.06);
      --blue-6: oklch(87% 0.0575 17.06);
      --blue-7: oklch(82.8% 0.0575 17.06);
      --blue-8: oklch(76.2% 0.0575 17.06);
      --blue-9: oklch(29.3% 0.0383 17.06);
      --blue-10: oklch(36.9% 0.0383 17.06);
      --blue-11: oklch(51% 0.0575 17.06);
      --blue-12: oklch(30.2% 0.0383 17.06);

      --blue-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --blue-a2: color(display-p3 0.8784 0.0196 0.0196 / 0.032);
      --blue-a3: color(display-p3 0.8118 0.0588 0.0078 / 0.083);
      --blue-a4: color(display-p3 0.8196 0.0078 0.0078 / 0.13);
      --blue-a5: color(display-p3 0.8471 0.0039 0.0039 / 0.177);
      --blue-a6: color(display-p3 0.7294 0.0039 0.0039 / 0.216);
      --blue-a7: color(display-p3 0.5804 0.0039 0.0039 / 0.271);
      --blue-a8: color(display-p3 0.4392 0.0039 0.0039 / 0.35);
      --blue-a9: color(display-p3 0.0902 0 0 / 0.855);
      --blue-a10: color(display-p3 0.1098 0 0 / 0.781);
      --blue-a11: color(display-p3 0.2157 0 0 / 0.644);
      --blue-a12: color(display-p3 0.098 0 0.0039 / 0.848);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 1 0.9608 0.9608 / 0.8);
      --blue-indicator: oklch(29.3% 0.0383 17.06);
      --blue-track: oklch(29.3% 0.0383 17.06);
    }
  }
}

:root, .light, .light-theme {
  --tomato-1: #fdfcfb;
  --tomato-2: #fdf8ed;
  --tomato-3: #fff1d2;
  --tomato-4: #ffe4a8;
  --tomato-5: #fcd989;
  --tomato-6: #f1ce7e;
  --tomato-7: #e0bd6c;
  --tomato-8: #cfa847;
  --tomato-9: #caa341;
  --tomato-10: #bf9734;
  --tomato-11: #9c7600;
  --tomato-12: #483810;

  --tomato-a1: #80400004;
  --tomato-a2: #e39c0012;
  --tomato-a3: #ffb0002d;
  --tomato-a4: #ffb00057;
  --tomato-a5: #f9ad0076;
  --tomato-a6: #e49f0081;
  --tomato-a7: #ca8d0093;
  --tomato-a8: #bd8700b8;
  --tomato-a9: #b88400be;
  --tomato-a10: #af7c00cb;
  --tomato-a11: #9c7600;
  --tomato-a12: #3c2b00ef;

  --tomato-contrast: #fff;
  --tomato-surface: #fdf6e9cc;
  --tomato-indicator: #caa341;
  --tomato-track: #caa341;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --tomato-1: oklch(99.3% 0.0024 86.49);
      --tomato-2: oklch(98.1% 0.0164 86.49);
      --tomato-3: oklch(96.1% 0.0425 86.49);
      --tomato-4: oklch(92.7% 0.0819 86.49);
      --tomato-5: oklch(89.8% 0.1062 86.49);
      --tomato-6: oklch(86.3% 0.106 86.49);
      --tomato-7: oklch(81.1% 0.1079 86.49);
      --tomato-8: oklch(74.9% 0.1228 86.49);
      --tomato-9: oklch(73.2% 0.1228 86.49);
      --tomato-10: oklch(69.6% 0.1228 86.49);
      --tomato-11: oklch(58.6% 0.1228 86.49);
      --tomato-12: oklch(35.1% 0.0605 86.49);

      --tomato-a1: color(display-p3 0.5137 0.2667 0.0235 / 0.016);
      --tomato-a2: color(display-p3 0.8275 0.5922 0.0078 / 0.067);
      --tomato-a3: color(display-p3 0.9529 0.6706 0.0039 / 0.165);
      --tomato-a4: color(display-p3 0.9412 0.6784 0.0039 / 0.314);
      --tomato-a5: color(display-p3 0.9176 0.6549 0.0039 / 0.42);
      --tomato-a6: color(display-p3 0.8314 0.5961 0.0039 / 0.463);
      --tomato-a7: color(display-p3 0.7294 0.5216 0 / 0.534);
      --tomato-a8: color(display-p3 0.6784 0.4902 0 / 0.659);
      --tomato-a9: color(display-p3 0.6588 0.4745 0 / 0.679);
      --tomato-a10: color(display-p3 0.6196 0.4471 0 / 0.722);
      --tomato-a11: color(display-p3 0.5176 0.3804 0 / 0.855);
      --tomato-a12: color(display-p3 0.2 0.1451 0 / 0.91);

      --tomato-contrast: #fff;
      --tomato-surface: color(display-p3 0.9922 0.9647 0.9176 / 0.8);
      --tomato-indicator: oklch(73.2% 0.1228 86.49);
      --tomato-track: oklch(73.2% 0.1228 86.49);
    }
  }
}