:root {
  /* Colours */
  --primary-color: #009a61;
  --primary-light-hover: #017e66;
  --primary-dark-hover: #004e31;
  --font-color: #2c3f51;
  --background-color: #F5F7F9;
  --border-color: #ebf2f6;
  --selection-color: #16a085;
  --post-meta: #9EABB3;

  --darkgrey: #15171A;
  --midgrey: #738a94;
  --lightgrey: #c5d2d9;
  --whitegrey: #e5eff5;
  --linenumber-dark-bg: #282c34;
  --linenumber-light-bg: #c5d2d9;

  /* surface tokens */
  --surface: #ffffff;
  --surface-2: #f0f3f6;
  --header-bg: rgba(255, 255, 255, 0.72);
  --header-border: rgba(151, 167, 180, 0.18);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

  /* font-family */
  --sans-serif: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --serif: "Mercury SSm A", "Mercury SSm B", Georgia, serif;

  /* layout */
  --container-max: 1200px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --header-height: 64px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --primary-color: #2fbd8a;
  --primary-light-hover: #27a579;
  --primary-dark-hover: #35d49a;
  --font-color: #e2e8f0;
  --background-color: #0f141a;
  --border-color: #232b36;
  --selection-color: #16a085;
  --post-meta: #8b98a5;

  --darkgrey: #e2e8f0;
  --midgrey: #8b98a5;
  --lightgrey: #3a4655;
  --whitegrey: #232b36;

  --surface: #161c24;
  --surface-2: #1c2430;
  --header-bg: rgba(18, 24, 32, 0.72);
  --header-border: rgba(139, 152, 165, 0.16);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}