// vars
:root {
  --notion-font: 'SpoqaHanSansNeo', 'Tossface';

  --base-font-size: 1.125rem;

  --primary-color: #daaa52;
  --primary-gradient-end-color: #8763ff;

  --line-color: rgba(55, 53, 47, 0.1);

  --fg-color: rgb(55, 53, 47);
  --fg-color-0: rgba(55, 53, 47, 0.09);
  --fg-color-1: rgba(55, 53, 47, 0.16);
  --fg-color-2: rgba(55, 53, 47, 0.4);
  --fg-color-3: rgba(55, 53, 47, 0.6);
  --fg-color-4: #000;
  --fg-color-5: rgba(55, 53, 47, 0.024);
  --fg-color-6: rgba(55, 53, 47, 0.8);
  --fg-color-icon: var(--fg-color);
  --fg-color-lighten: #eff3f7;

  --bg-color: #ffffff;
  --bg-color-0: rgba(135, 131, 120, 0.15);
  --bg-color-1: rgb(247, 246, 243);
  --bg-color-2: rgba(135, 131, 120, 0.15);

  --select-color-0: var(--primary-color);
  --select-color-1: var(--primary-color);
  --select-color-2: #d9eff8;

  --notion-red: rgb(224, 62, 62);
  --notion-pink: rgb(173, 26, 114);
  --notion-blue: rgb(11, 110, 153);
  --notion-purple: rgb(105, 64, 165);
  --notion-teal: rgb(77, 100, 97);
  --notion-yellow: rgb(223, 171, 1);
  --notion-orange: rgb(217, 115, 13);
  --notion-brown: rgb(100, 71, 58);
  --notion-gray: rgb(155, 154, 151);

  --notion-red_background: rgb(251, 228, 228);
  --notion-pink_background: rgb(244, 223, 235);
  --notion-blue_background: rgb(221, 235, 241);
  --notion-purple_background: rgb(234, 228, 242);
  --notion-teal_background: rgb(221, 237, 234);
  --notion-yellow_background: rgb(251, 243, 219);
  --notion-orange_background: rgb(250, 235, 221);
  --notion-brown_background: rgb(233, 229, 227);
  --notion-gray_background: rgb(235, 236, 237);

  --notion-red_background_co: rgba(251, 228, 228, 0.3);
  --notion-pink_background_co: rgba(244, 223, 235, 0.3);
  --notion-blue_background_co: rgba(221, 235, 241, 0.3);
  --notion-purple_background_co: rgba(234, 228, 242, 0.3);
  --notion-teal_background_co: rgba(221, 237, 234, 0.3);
  --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
  --notion-orange_background_co: rgba(250, 235, 221, 0.3);
  --notion-brown_background_co: rgba(233, 229, 227, 0.3);
  --notion-gray_background_co: rgba(235, 236, 237, 0.3);

  --notion-item-blue: rgba(0, 120, 223, 0.2);
  --notion-item-orange: rgba(245, 93, 0, 0.2);
  --notion-item-green: rgba(0, 135, 107, 0.2);
  --notion-item-pink: rgba(221, 0, 129, 0.2);
  --notion-item-brown: rgba(140, 46, 0, 0.2);
  --notion-item-red: rgba(255, 0, 26, 0.2);
  --notion-item-yellow: rgba(233, 168, 0, 0.2);
  --notion-item-default: rgba(206, 205, 202, 0.5);
  --notion-item-purple: rgba(103, 36, 222, 0.2);
  --notion-item-gray: rgba(155, 154, 151, 0.4);

  --notion-card-background-color: #ffffff;

  --notion-max-width: 1400px;
  --notion-header-height: 54px;

  --notion-page-left-right-padding: calc(min(16px, 8vw));
  --notion-page-fullwith-left-right-padding: calc(min(96px, 8vw));

  --notion-aside-width: 300px;
  --notion-aside-space-width: 5rem;

  --notion-page-content-inner-width: calc(
    var(--notion-max-width) - var(--notion-aside-width) - var(--notion-aside-space-width)
  );
}

// dark-mode vars
.dark-mode {
  --line-color: rgba(255, 255, 255, 0.1);

  --fg-color: rgba(255, 255, 255, 0.9);
  --fg-color-0: var(--fg-color);
  --fg-color-1: var(--fg-color);
  --fg-color-2: var(--fg-color);
  --fg-color-3: var(--fg-color);
  --fg-color-4: var(--fg-color);
  --fg-color-5: rgba(255, 255, 255, 0.7);
  --fg-color-6: #fff;
  --fg-color-icon: #fff;
  --fg-color-lighten: #333339;

  --bg-color: #1a1b1e;
  --bg-color-0: rgb(71, 76, 80);
  --bg-color-1: rgb(63, 68, 71);
  --bg-color-2: rgba(135, 131, 120, 0.15);

  --notion-red: rgb(255, 115, 105);
  --notion-pink: rgb(226, 85, 161);
  --notion-blue: rgb(82, 156, 202);
  --notion-purple: rgb(154, 109, 215);
  --notion-teal: rgb(77, 171, 154);
  --notion-yellow: rgb(255, 220, 73);
  --notion-orange: rgb(255, 163, 68);
  --notion-brown: rgb(147, 114, 100);
  --notion-gray: rgba(151, 154, 155, 0.95);

  --notion-red_background: rgb(89, 65, 65);
  --notion-pink_background: rgb(83, 59, 76);
  --notion-blue_background: rgb(54, 73, 84);
  --notion-purple_background: rgb(68, 63, 87);
  --notion-teal_background: rgb(53, 76, 75);
  --notion-yellow_background: rgb(89, 86, 59);
  --notion-orange_background: rgb(89, 74, 58);
  --notion-brown_background: rgb(67, 64, 64);
  --notion-gray_background: rgb(69, 75, 78);

  --notion-red_background_co: rgba(89, 65, 65, 0.3);
  --notion-pink_background_co: rgba(83, 59, 76, 0.3);
  --notion-blue_background_co: rgba(120, 162, 187, 0.3);
  --notion-purple_background_co: rgba(68, 63, 87, 0.3);
  --notion-teal_background_co: rgba(53, 76, 75, 0.3);
  --notion-yellow_background_co: rgba(89, 86, 59, 0.3);
  --notion-orange_background_co: rgba(89, 74, 58, 0.3);
  --notion-brown_background_co: rgba(67, 64, 64, 0.3);
  --notion-gray_background_co: rgba(69, 75, 78, 0.3);

  --notion-card-background-color: #2b2c31;
}
