:root, .light, .light-theme {
  --blue-1: #fcfcfc;
  --blue-2: #f9f9f9;
  --blue-3: #f0f0f0;
  --blue-4: #e8e8e8;
  --blue-5: #e1e1e1;
  --blue-6: #d9d9d9;
  --blue-7: #cecece;
  --blue-8: #bbb;
  --blue-9: #000;
  --blue-10: #2e2e2e;
  --blue-11: #636363;
  --blue-12: #1f1f1f;

  --blue-a1: #00000003;
  --blue-a2: #00000006;
  --blue-a3: #0000000f;
  --blue-a4: #00000017;
  --blue-a5: #0000001e;
  --blue-a6: #00000026;
  --blue-a7: #00000031;
  --blue-a8: #00000044;
  --blue-a9: #000000;
  --blue-a10: #000000d1;
  --blue-a11: #0000009c;
  --blue-a12: #000000e0;

  --blue-contrast: #fff;
  --blue-surface: #f8f8f8cc;
  --blue-indicator: #000;
  --blue-track: #000;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: oklch(99.2% 0 none);
      --blue-2: oklch(98.1% 0 none);
      --blue-3: oklch(95.5% 0 none);
      --blue-4: oklch(93.1% 0 none);
      --blue-5: oklch(90.9% 0 none);
      --blue-6: oklch(88.5% 0 none);
      --blue-7: oklch(85.1% 0 none);
      --blue-8: oklch(79.2% 0 none);
      --blue-9: oklch(0% 0 none);
      --blue-10: oklch(30% 0 none);
      --blue-11: oklch(50.1% 0 none);
      --blue-12: oklch(24% 0 none);

      --blue-a1: color(display-p3 0 0 0 / 0.0118);
      --blue-a2: color(display-p3 0 0 0 / 0.0235);
      --blue-a3: color(display-p3 0 0 0 / 0.0588);
      --blue-a4: color(display-p3 0 0 0 / 0.0902);
      --blue-a5: color(display-p3 0 0 0 / 0.1176);
      --blue-a6: color(display-p3 0 0 0 / 0.149);
      --blue-a7: color(display-p3 0 0 0 / 0.1922);
      --blue-a8: color(display-p3 0 0 0 / 0.2667);
      --blue-a9: color(display-p3 0 0 0);
      --blue-a10: color(display-p3 0 0 0 / 0.8196);
      --blue-a11: color(display-p3 0 0 0 / 0.6118);
      --blue-a12: color(display-p3 0 0 0 / 0.8784);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9725 0.9725 0.9725 / 0.8);
      --blue-indicator: oklch(0% 0 none);
      --blue-track: oklch(0% 0 none);
    }
  }
}

:root, .light, .light-theme {
  --tomato-1: #fefdfb;
  --tomato-2: #fef9f2;
  --tomato-3: #fef0da;
  --tomato-4: #fbe6c6;
  --tomato-5: #f6dcb2;
  --tomato-6: #ebcfa3;
  --tomato-7: #dec090;
  --tomato-8: #cda86c;
  --tomato-9: #a87f38;
  --tomato-10: #9b732a;
  --tomato-11: #86652c;
  --tomato-12: #3f3629;

  --tomato-a1: #c0800004;
  --tomato-a2: #ec8a000d;
  --tomato-a3: #f9980025;
  --tomato-a4: #ee900039;
  --tomato-a5: #e28c004d;
  --tomato-a6: #c87a005c;
  --tomato-a7: #b46f006f;
  --tomato-a8: #a9680093;
  --tomato-a9: #905b00c7;
  --tomato-a10: #875700d5;
  --tomato-a11: #6d4500d3;
  --tomato-a12: #1a1000d6;

  --tomato-contrast: #fff;
  --tomato-surface: #fef8efcc;
  --tomato-indicator: #a87f38;
  --tomato-track: #a87f38;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --tomato-1: oklch(99.4% 0.0024 78.64);
      --tomato-2: oklch(98.5% 0.0107 78.64);
      --tomato-3: oklch(96% 0.0324 78.64);
      --tomato-4: oklch(93.4% 0.0473 78.64);
      --tomato-5: oklch(90.5% 0.0612 78.64);
      --tomato-6: oklch(86.8% 0.066 78.64);
      --tomato-7: oklch(82.1% 0.071 78.64);
      --tomato-8: oklch(75.2% 0.0893 78.64);
      --tomato-9: oklch(62.3% 0.1016 78.64);
      --tomato-10: oklch(58.1% 0.1016 78.64);
      --tomato-11: oklch(53% 0.0854 78.64);
      --tomato-12: oklch(33.9% 0.0249 78.64);

      --tomato-a1: color(display-p3 0.7569 0.5137 0.0235 / 0.016);
      --tomato-a2: color(display-p3 0.8392 0.5137 0.0235 / 0.048);
      --tomato-a3: color(display-p3 0.9176 0.5765 0.0078 / 0.138);
      --tomato-a4: color(display-p3 0.851 0.549 0.0039 / 0.208);
      --tomato-a5: color(display-p3 0.8235 0.5294 0.0039 / 0.283);
      --tomato-a6: color(display-p3 0.7137 0.4627 0.0039 / 0.342);
      --tomato-a7: color(display-p3 0.6392 0.4118 0.0039 / 0.412);
      --tomato-a8: color(display-p3 0.5961 0.3804 0 / 0.546);
      --tomato-a9: color(display-p3 0.502 0.3255 0 / 0.734);
      --tomato-a10: color(display-p3 0.4667 0.3059 0 / 0.781);
      --tomato-a11: color(display-p3 0.3725 0.2392 0 / 0.789);
      --tomato-a12: color(display-p3 0.0902 0.051 0 / 0.832);

      --tomato-contrast: #fff;
      --tomato-surface: color(display-p3 0.9922 0.9765 0.9412 / 0.8);
      --tomato-indicator: oklch(62.3% 0.1016 78.64);
      --tomato-track: oklch(62.3% 0.1016 78.64);
    }
  }
}