:root {
  color-scheme: light drak;

  --system-grey: rgb(142, 142, 147);
  --system-grey-2: rgb(174, 174, 178);
  --system-grey-3: rgb(199, 199, 204);
  --system-grey-4: rgb(209, 209, 214);
  --system-grey-5: rgb(229, 229, 234);
  --system-grey-6: rgb(242, 242, 247);

  --system-background-primary: rgb(255, 255, 255);
  --system-background-secondary: rgb(239, 239, 244);
  --system-background-tertiary: rgb(255, 255, 255);

  --system-grouped-background-primary: rgb(239, 239, 244);
  --system-grouped-background-secondary: rgb(255, 255, 255);
  --system-grouped-background-tertiary: rgb(239, 239, 244);

  --label-primary: rgb(0, 0, 0);
  --label-secondary: rgba(0, 0, 0, 0.48);
  --label-tertiary: rgba(0, 0, 0, 0.24);
  --label-quarternary: rgba(0, 0, 0, 0.12);

  --fill-primary: rgba(0, 0, 0, 0.1);
  --fill-secondary: rgba(0, 0, 0, 0.08);
  --fill-tertiary: rgba(0, 0, 0, 0.06);
  --fill-quarternary: rgba(0, 0, 0, 0.04);

  --separator-opaque: rgb(232, 232, 232);
  --separator-non-opaque: rgba(0, 0, 0, 0.08);

  --tide-pink: rgb(250, 88, 88);
  --tide-blue: rgb(40, 120, 240);
  --tide-teal: rgb(0, 128, 136);
  --tide-red: rgb(200, 16, 40);
  --tide-yellow: rgb(248, 192, 72);
  --tide-orange: rgb(248, 96, 64);
  --tide-indigo: rgb(64, 80, 216);
  --tide-cyan: rgb(96, 200, 224);
  --tide-green: rgb(71, 200, 120);
  --tide-gold: rgb(208, 168, 96);

}

@media (prefers-color-scheme: dark) {
  :root {

    --system-grey: rgb(142, 142, 147);
    --system-grey-2: rgb(99, 99, 102);
    --system-grey-3: rgb(72, 72, 74);
    --system-grey-4: rgb(58, 58, 60);
    --system-grey-5: rgb(44, 44, 46);
    --system-grey-6: rgb(28, 28, 30);

    --system-background-primary: rgb(0, 0, 0);
    --system-background-secondary: rgb(28, 28, 30);
    --system-background-tertiary: rgb(44, 44, 46);

    --system-grouped-background-primary: rgb(0, 0, 0);
    --system-grouped-background-secondary: rgb(28, 28, 30);
    --system-grouped-background-tertiary: rgb(44, 44, 46);

    --label-primary: rgb(255, 255, 255);
    --label-secondary: rgba(255, 255, 255, 0.56);
    --label-tertiary: rgba(255, 255, 255, 0.28);
    --label-quarternary: rgba(255, 255, 255, 0.16);

    --fill-primary: rgba(255, 255, 255, 0.18);
    --fill-secondary: rgba(255, 255, 255, 0.15);
    --fill-tertiary: rgba(255, 255, 255, 0.12);
    --fill-quarternary: rgba(255, 255, 255, 0.09);

    --separator-opaque: rgb(40, 40, 40);
    --separator-non-opaque: rgba(255, 255, 255, 0.12);

    --tide-pink: rgb(250, 100, 100);
    --tide-blue: rgb(48, 128, 248);
    --tide-teal: rgb(0, 140, 148);
    --tide-red: rgb(208, 24, 48);
    --tide-yellow: rgb(255, 200, 80);
    --tide-orange: rgb(248, 108, 76);
    --tide-indigo: rgb(64, 92, 228);
    --tide-cyan: rgb(108, 212, 224);
    --tide-green: rgb(71, 212, 108);
    --tide-gold: rgb(216, 176, 104);
  }

  :root.elevated {

    --system-background-primary: rgb(28, 28, 30);
    --system-background-secondary: rgb(44, 44, 46);
    --system-background-tertiary: rgb(58, 58, 60);

    --system-grouped-background-primary: rgb(28, 28, 30);
    --system-grouped-background-secondary: rgb(44, 44, 46);
    --system-grouped-background-tertiary: rgb(58, 58, 60);

  }
}