@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap');

:root {
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'STSong', '宋体', serif;
  --font-sans:  'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;

  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
}

.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }

h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: var(--leading-tight); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }

.text-center { text-align: center; }
.text-left   { text-align: left; }
.font-bold   { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-light  { font-weight: 300; }
.leading-tight  { line-height: var(--leading-tight); }
.leading-loose  { line-height: var(--leading-loose); }