:root {
  --notion-gray: #787774;
  --notion-brown: #9f6b53;
  --notion-orange: #d9730d;
  --notion-yellow: #cb912f;
  --notion-green: #448561;
  --notion-blue: #337ea9;
  --notion-purple: #9065b0;
  --notion-pink: #c14c8a;
  --notion-red: #d44c47;

  --notion-gray-background: #f1f1ef;
  --notion-brown-background: #f4eeee;
  --notion-orange-background: #fbecdd;
  --notion-yellow-background: #fbf3db;
  --notion-green-background: #edf3ec;
  --notion-blue-background: #e7f3f8;
  --notion-purple-background: rgba(244, 240, 247, 0.8);
  --notion-pink-background: rgba(249, 238, 243, 0.8);
  --notion-red-background: #fdebec;

  --notion-tag-foreground: rgb(28, 56, 41);
  --notion-tag-light-gray: rgba(227, 226, 224, 0.5);
  --notion-tag-gray: rgb(227, 226, 224);
  --notion-tag-brown: rgb(238, 224, 218);
  --notion-tag-orange: rgb(250, 222, 201);
  --notion-tag-yellow: rgb(253, 236, 200);
  --notion-tag-green: rgb(219, 237, 219);
  --notion-tag-blue: rgb(211, 229, 239);
  --notion-tag-purple: rgb(232, 222, 238);
  --notion-tag-pink: rgb(245, 224, 233);
  --notion-tag-red: rgb(255, 226, 221);
}

[data-theme='dark'] {
  --notion-gray: color-mix(in oklab, var(--foreground) 82%, #787774);
  --notion-brown: color-mix(in oklab, var(--foreground) 82%, #9f6b53);
  --notion-orange: color-mix(in oklab, var(--foreground) 82%, #d9730d);
  --notion-yellow: color-mix(in oklab, var(--foreground) 82%, #cb912f);
  --notion-green: color-mix(in oklab, var(--foreground) 82%, #448561);
  --notion-blue: color-mix(in oklab, var(--foreground) 82%, #337ea9);
  --notion-purple: color-mix(in oklab, var(--foreground) 82%, #9065b0);
  --notion-pink: color-mix(in oklab, var(--foreground) 82%, #c14c8a);
  --notion-red: color-mix(in oklab, var(--foreground) 82%, #d44c47);

  --notion-gray-background: color-mix(in oklab, var(--background) 82%, #f1f1ef);
  --notion-brown-background: color-mix(
    in oklab,
    var(--background) 82%,
    #f4eeee
  );
  --notion-orange-background: color-mix(
    in oklab,
    var(--background) 82%,
    #fbecdd
  );
  --notion-yellow-background: color-mix(
    in oklab,
    var(--background) 82%,
    #fbf3db
  );
  --notion-green-background: color-mix(
    in oklab,
    var(--background) 82%,
    #edf3ec
  );
  --notion-blue-background: color-mix(in oklab, var(--background) 82%, #e7f3f8);
  --notion-purple-background: color-mix(
    in oklab,
    var(--background) 82%,
    rgba(244, 240, 247, 0.8)
  );
  --notion-pink-background: color-mix(
    in oklab,
    var(--background) 82%,
    rgba(249, 238, 243, 0.8)
  );
  --notion-red-background: color-mix(in oklab, var(--background) 82%, #fdebec);

  --notion-tag-foreground: var(--foreground);
  --notion-tag-light-gray: color-mix(in oklab, #e3e2e0 34%, var(--background));
  --notion-tag-gray: color-mix(in oklab, #e3e2e0 44%, var(--background));
  --notion-tag-brown: color-mix(in oklab, #eee0da 44%, var(--background));
  --notion-tag-orange: color-mix(in oklab, #faddc9 44%, var(--background));
  --notion-tag-yellow: color-mix(in oklab, #fdecc8 44%, var(--background));
  --notion-tag-green: color-mix(in oklab, #dbeddb 44%, var(--background));
  --notion-tag-blue: color-mix(in oklab, #d3e5f3 44%, var(--background));
  --notion-tag-purple: color-mix(in oklab, #e8deee 44%, var(--background));
  --notion-tag-pink: color-mix(in oklab, #f5e0e9 44%, var(--background));
  --notion-tag-red: color-mix(in oklab, #ffe2dd 44%, var(--background));
}

.gray,
.gray:hover {
  color: var(--notion-gray);
}
.brown,
.brown:hover {
  color: var(--notion-brown);
}
.orange,
.orange:hover {
  color: var(--notion-orange);
}
.yellow,
.yellow:hover {
  color: var(--notion-yellow);
}
.green,
.green:hover {
  color: var(--notion-green);
}
.blue,
.blue:hover {
  color: var(--notion-blue);
}
.purple,
.purple:hover {
  color: var(--notion-purple);
}
.pink,
.pink:hover {
  color: var(--notion-pink);
}
.red,
.red:hover {
  color: var(--notion-red);
}

.gray-background {
  background: var(--notion-gray-background) !important;
}
.brown-background {
  background: var(--notion-brown-background) !important;
}
.orange-background {
  background: var(--notion-orange-background) !important;
}
.yellow-background {
  background: var(--notion-yellow-background) !important;
}
.green-background {
  background: var(--notion-green-background) !important;
}
.blue-background {
  background: var(--notion-blue-background) !important;
}
.purple-background {
  background: var(--notion-purple-background) !important;
}
.pink-background {
  background: var(--notion-pink-background) !important;
}
.red-background {
  background: var(--notion-red-background) !important;
}

.tag.light-gray {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-light-gray) !important;
}
.tag.gray {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-gray) !important;
}
.tag.brown {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-brown) !important;
}
.tag.orange {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-orange) !important;
}
.tag.yellow {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-yellow) !important;
}
.tag.green {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-green) !important;
}
.tag.blue {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-blue) !important;
}
.tag.purple {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-purple) !important;
}
.tag.pink {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-pink) !important;
}
.tag.red {
  color: var(--notion-tag-foreground);
  background: var(--notion-tag-red) !important;
}
