:root, .light, .light-theme {
  --ruby-1: #fffcfd;
  --ruby-2: #fff7f8;
  --ruby-3: #feeaed;
  --ruby-4: #ffdce1;
  --ruby-5: #ffced6;
  --ruby-6: #f8bfc8;
  --ruby-7: #efacb8;
  --ruby-8: #e592a3;
  --ruby-9: #e54666;
  --ruby-10: #dc3b5d;
  --ruby-11: #ca244d;
  --ruby-12: #64172b;
  --ruby-a1: #ff005503;
  --ruby-a2: #ff002008;
  --ruby-a3: #f3002515;
  --ruby-a4: #ff002523;
  --ruby-a5: #ff002a31;
  --ruby-a6: #e4002440;
  --ruby-a7: #ce002553;
  --ruby-a8: #c300286d;
  --ruby-a9: #db002cb9;
  --ruby-a10: #d2002cc4;
  --ruby-a11: #c10030db;
  --ruby-a12: #550016e8;
  --ruby-surface: #fff5f6cc;
  --ruby-indicator: var(--ruby-9);
  --ruby-track: var(--ruby-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --ruby-1: color(display-p3 .998 .989 .992);
      --ruby-2: color(display-p3 .995 .971 .974);
      --ruby-3: color(display-p3 .983 .92 .928);
      --ruby-4: color(display-p3 .987 .869 .885);
      --ruby-5: color(display-p3 .968 .817 .839);
      --ruby-6: color(display-p3 .937 .758 .786);
      --ruby-7: color(display-p3 .897 .685 .721);
      --ruby-8: color(display-p3 .851 .588 .639);
      --ruby-9: color(display-p3 .83 .323 .408);
      --ruby-10: color(display-p3 .795 .286 .375);
      --ruby-11: color(display-p3 .728 .211 .311);
      --ruby-12: color(display-p3 .36 .115 .171);
      --ruby-a1: color(display-p3 .675 .024 .349 / .012);
      --ruby-a2: color(display-p3 .863 .024 .024 / .028);
      --ruby-a3: color(display-p3 .804 .008 .11 / .079);
      --ruby-a4: color(display-p3 .91 .008 .125 / .13);
      --ruby-a5: color(display-p3 .831 .004 .133 / .185);
      --ruby-a6: color(display-p3 .745 .004 .118 / .244);
      --ruby-a7: color(display-p3 .678 .004 .114 / .314);
      --ruby-a8: color(display-p3 .639 .004 .125 / .412);
      --ruby-a9: color(display-p3 .753 0 .129 / .679);
      --ruby-a10: color(display-p3 .714 0 .125 / .714);
      --ruby-a11: color(display-p3 .728 .211 .311);
      --ruby-a12: color(display-p3 .36 .115 .171);
      --ruby-surface: color(display-p3 .9961 .9647 .9647 / .8);
    }
  }
}

.dark, .dark-theme {
  --ruby-1: #191113;
  --ruby-2: #1e1517;
  --ruby-3: #3a141e;
  --ruby-4: #4e1325;
  --ruby-5: #5e1a2e;
  --ruby-6: #6f2539;
  --ruby-7: #883447;
  --ruby-8: #b3445a;
  --ruby-9: #e54666;
  --ruby-10: #ec5a72;
  --ruby-11: #ff949d;
  --ruby-12: #fed2e1;
  --ruby-a1: #f4124a09;
  --ruby-a2: #fe5a7f0e;
  --ruby-a3: #ff235d2c;
  --ruby-a4: #fd195e42;
  --ruby-a5: #fe2d6b53;
  --ruby-a6: #ff447665;
  --ruby-a7: #ff577d80;
  --ruby-a8: #ff5c7cae;
  --ruby-a9: #fe4c70e4;
  --ruby-a10: #ff617beb;
  --ruby-a11: #ff949d;
  --ruby-a12: #ffd3e2fe;
  --ruby-surface: #2b191d80;
  --ruby-indicator: var(--ruby-9);
  --ruby-track: var(--ruby-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --ruby-1: color(display-p3 .093 .068 .074);
      --ruby-2: color(display-p3 .113 .083 .089);
      --ruby-3: color(display-p3 .208 .088 .117);
      --ruby-4: color(display-p3 .279 .092 .147);
      --ruby-5: color(display-p3 .337 .12 .18);
      --ruby-6: color(display-p3 .401 .166 .223);
      --ruby-7: color(display-p3 .495 .224 .281);
      --ruby-8: color(display-p3 .652 .295 .359);
      --ruby-9: color(display-p3 .83 .323 .408);
      --ruby-10: color(display-p3 .857 .392 .455);
      --ruby-11: color(display-p3 1 .57 .59);
      --ruby-12: color(display-p3 .968 .83 .88);
      --ruby-a1: color(display-p3 .984 .071 .329 / .03);
      --ruby-a2: color(display-p3 .992 .376 .529 / .051);
      --ruby-a3: color(display-p3 .996 .196 .404 / .152);
      --ruby-a4: color(display-p3 1 .173 .416 / .227);
      --ruby-a5: color(display-p3 1 .259 .459 / .29);
      --ruby-a6: color(display-p3 1 .341 .506 / .358);
      --ruby-a7: color(display-p3 1 .412 .541 / .458);
      --ruby-a8: color(display-p3 1 .431 .537 / .627);
      --ruby-a9: color(display-p3 1 .376 .482 / .82);
      --ruby-a10: color(display-p3 1 .447 .522 / .849);
      --ruby-a11: color(display-p3 1 .57 .59);
      --ruby-a12: color(display-p3 .968 .83 .88);
      --ruby-surface: color(display-p3 .1569 .0941 .1098 / .5);
    }
  }
}

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