:root {
  --black-a1: #0000000d;
  --black-a2: #0000001a;
  --black-a3: #00000026;
  --black-a4: #0003;
  --black-a5: #0000004d;
  --black-a6: #0006;
  --black-a7: #00000080;
  --black-a8: #0009;
  --black-a9: #000000b3;
  --black-a10: #000c;
  --black-a11: #000000e6;
  --black-a12: #000000f2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / .05);
      --black-a2: color(display-p3 0 0 0 / .1);
      --black-a3: color(display-p3 0 0 0 / .15);
      --black-a4: color(display-p3 0 0 0 / .2);
      --black-a5: color(display-p3 0 0 0 / .3);
      --black-a6: color(display-p3 0 0 0 / .4);
      --black-a7: color(display-p3 0 0 0 / .5);
      --black-a8: color(display-p3 0 0 0 / .6);
      --black-a9: color(display-p3 0 0 0 / .7);
      --black-a10: color(display-p3 0 0 0 / .8);
      --black-a11: color(display-p3 0 0 0 / .9);
      --black-a12: color(display-p3 0 0 0 / .95);
    }
  }
}

:root {
  --white-a1: #ffffff0d;
  --white-a2: #ffffff1a;
  --white-a3: #ffffff26;
  --white-a4: #fff3;
  --white-a5: #ffffff4d;
  --white-a6: #fff6;
  --white-a7: #ffffff80;
  --white-a8: #fff9;
  --white-a9: #ffffffb3;
  --white-a10: #fffc;
  --white-a11: #ffffffe6;
  --white-a12: #fffffff2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --white-a1: color(display-p3 1 1 1 / .05);
      --white-a2: color(display-p3 1 1 1 / .1);
      --white-a3: color(display-p3 1 1 1 / .15);
      --white-a4: color(display-p3 1 1 1 / .2);
      --white-a5: color(display-p3 1 1 1 / .3);
      --white-a6: color(display-p3 1 1 1 / .4);
      --white-a7: color(display-p3 1 1 1 / .5);
      --white-a8: color(display-p3 1 1 1 / .6);
      --white-a9: color(display-p3 1 1 1 / .7);
      --white-a10: color(display-p3 1 1 1 / .8);
      --white-a11: color(display-p3 1 1 1 / .9);
      --white-a12: color(display-p3 1 1 1 / .95);
    }
  }
}

:where(:root) {
  --color-background: white;
  --color-overlay: var(--black-a6);
  --color-surface: #ffffffd9;
}

:is(.dark, .dark-theme) {
  --color-background: var(--neutral-1);
  --color-overlay: var(--black-a8);
  --color-surface: #00000040;
}

:where(:root) {
  --color-transparent: #0000;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --color-transparent: color(display-p3 0 0 0 / 0);
    }
  }
}

:where(.light, .light-theme) {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
}

:where(.dark, .dark-theme) {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
}

:root, [data-accent]:where(:not([data-accent=""], [data-accent="gray"])) {
  --focus-1: var(--accent-1);
  --focus-2: var(--accent-2);
  --focus-3: var(--accent-3);
  --focus-4: var(--accent-4);
  --focus-5: var(--accent-5);
  --focus-6: var(--accent-6);
  --focus-7: var(--accent-7);
  --focus-8: var(--accent-8);
  --focus-9: var(--accent-9);
  --focus-10: var(--accent-10);
  --focus-11: var(--accent-11);
  --focus-12: var(--accent-12);
  --focus-a1: var(--accent-a1);
  --focus-a2: var(--accent-a2);
  --focus-a3: var(--accent-a3);
  --focus-a4: var(--accent-a4);
  --focus-a5: var(--accent-a5);
  --focus-a6: var(--accent-a6);
  --focus-a7: var(--accent-a7);
  --focus-a8: var(--accent-a8);
  --focus-a9: var(--accent-a9);
  --focus-a10: var(--accent-a10);
  --focus-a11: var(--accent-a11);
  --focus-a12: var(--accent-a12);
}

::selection {
  background-color: var(--focus-a5);
}

:root {
  color: var(--neutral-12);
}

:where([data-surface="page"]) {
  background-color: var(--color-background);
}