:root, .light, .light-theme {
  --tomato-1: #fffcfc;
  --tomato-2: #fff8f7;
  --tomato-3: #feebe7;
  --tomato-4: #ffdcd3;
  --tomato-5: #ffcdc2;
  --tomato-6: #fdbdaf;
  --tomato-7: #f5a898;
  --tomato-8: #ec8e7b;
  --tomato-9: #e54d2e;
  --tomato-10: #dd4425;
  --tomato-11: #d13415;
  --tomato-12: #5c271f;
  --tomato-a1: #ff000003;
  --tomato-a2: #ff200008;
  --tomato-a3: #f52b0018;
  --tomato-a4: #ff35002c;
  --tomato-a5: #ff2e003d;
  --tomato-a6: #f92d0050;
  --tomato-a7: #e7280067;
  --tomato-a8: #db250084;
  --tomato-a9: #df2600d1;
  --tomato-a10: #d72400da;
  --tomato-a11: #cd2200ea;
  --tomato-a12: #460900e0;
  --tomato-surface: #fff6f5cc;
  --tomato-indicator: var(--tomato-9);
  --tomato-track: var(--tomato-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --tomato-1: color(display-p3 .998 .989 .988);
      --tomato-2: color(display-p3 .994 .974 .969);
      --tomato-3: color(display-p3 .985 .924 .909);
      --tomato-4: color(display-p3 .996 .868 .835);
      --tomato-5: color(display-p3 .98 .812 .77);
      --tomato-6: color(display-p3 .953 .75 .698);
      --tomato-7: color(display-p3 .917 .673 .611);
      --tomato-8: color(display-p3 .875 .575 .502);
      --tomato-9: color(display-p3 .831 .345 .231);
      --tomato-10: color(display-p3 .802 .313 .2);
      --tomato-11: color(display-p3 .755 .259 .152);
      --tomato-12: color(display-p3 .335 .165 .132);
      --tomato-a1: color(display-p3 .675 .024 .024 / .012);
      --tomato-a2: color(display-p3 .757 .145 .02 / .032);
      --tomato-a3: color(display-p3 .831 .184 .012 / .091);
      --tomato-a4: color(display-p3 .976 .192 .004 / .165);
      --tomato-a5: color(display-p3 .918 .192 .004 / .232);
      --tomato-a6: color(display-p3 .847 .173 .004 / .302);
      --tomato-a7: color(display-p3 .788 .165 .004 / .389);
      --tomato-a8: color(display-p3 .749 .153 .004 / .499);
      --tomato-a9: color(display-p3 .78 .149 0 / .769);
      --tomato-a10: color(display-p3 .757 .141 0 / .8);
      --tomato-a11: color(display-p3 .755 .259 .152);
      --tomato-a12: color(display-p3 .335 .165 .132);
      --tomato-surface: color(display-p3 .9922 .9647 .9608 / .8);
    }
  }
}

.dark, .dark-theme {
  --tomato-1: #181111;
  --tomato-2: #1f1513;
  --tomato-3: #391714;
  --tomato-4: #4e1511;
  --tomato-5: #5e1c16;
  --tomato-6: #6e2920;
  --tomato-7: #853a2d;
  --tomato-8: #ac4d39;
  --tomato-9: #e54d2e;
  --tomato-10: #ec6142;
  --tomato-11: #ff977d;
  --tomato-12: #fbd3cb;
  --tomato-a1: #f1121208;
  --tomato-a2: #ff55330f;
  --tomato-a3: #ff35232b;
  --tomato-a4: #fd201142;
  --tomato-a5: #fe332153;
  --tomato-a6: #ff4f3864;
  --tomato-a7: #fd644a7d;
  --tomato-a8: #fe6d4ea7;
  --tomato-a9: #fe5431e4;
  --tomato-a10: #ff6847eb;
  --tomato-a11: #ff977d;
  --tomato-a12: #ffd6cefb;
  --tomato-surface: #2d191580;
  --tomato-indicator: var(--tomato-9);
  --tomato-track: var(--tomato-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --tomato-1: color(display-p3 .09 .068 .067);
      --tomato-2: color(display-p3 .115 .084 .076);
      --tomato-3: color(display-p3 .205 .097 .083);
      --tomato-4: color(display-p3 .282 .099 .077);
      --tomato-5: color(display-p3 .339 .129 .101);
      --tomato-6: color(display-p3 .398 .179 .141);
      --tomato-7: color(display-p3 .487 .245 .194);
      --tomato-8: color(display-p3 .629 .322 .248);
      --tomato-9: color(display-p3 .831 .345 .231);
      --tomato-10: color(display-p3 .862 .415 .298);
      --tomato-11: color(display-p3 1 .585 .455);
      --tomato-12: color(display-p3 .959 .833 .802);
      --tomato-a1: color(display-p3 .973 .071 .071 / .026);
      --tomato-a2: color(display-p3 .992 .376 .224 / .051);
      --tomato-a3: color(display-p3 .996 .282 .176 / .148);
      --tomato-a4: color(display-p3 1 .204 .118 / .232);
      --tomato-a5: color(display-p3 1 .286 .192 / .29);
      --tomato-a6: color(display-p3 1 .392 .278 / .353);
      --tomato-a7: color(display-p3 1 .459 .349 / .45);
      --tomato-a8: color(display-p3 1 .49 .369 / .601);
      --tomato-a9: color(display-p3 1 .408 .267 / .82);
      --tomato-a10: color(display-p3 1 .478 .341 / .853);
      --tomato-a11: color(display-p3 1 .585 .455);
      --tomato-a12: color(display-p3 .959 .833 .802);
      --tomato-surface: color(display-p3 .1569 .0941 .0784 / .5);
    }
  }
}

:root {
  --tomato-contrast: white;
}