:root {
  color-scheme: light;

  /* Color */
  --paper: #f6f1e8;
  --paper-deep: #ebe3d7;
  --surface: #fffdf9;
  --ink: #24201d;
  --muted: #625d55;
  --line: #d8d0c3;
  --line-strong: #aaa093;
  --bengara: #8a2f2c;
  --bengara-dark: #68211f;
  --indigo: #233e55;
  --matcha: #5e6c49;
  --sakura: #955363;
  --gold: #80612f;
  --focus-light: #fffaf0;

  /* Typography */
  --font-sans:
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP",
    system-ui, sans-serif;
  --font-serif:
    "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP",
    serif;
  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --heading-sm: clamp(1.55rem, 6vw, 2rem);
  --heading-md: clamp(1.9rem, 8vw, 3.35rem);
  --heading-lg: clamp(2.35rem, 10vw, 4.25rem);

  /* Spacing and shape */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.75rem;
  --radius-sm: 0.2rem;
  --radius-md: 0.35rem;
  --control-height: 2.75rem;
  --shadow: 0 1rem 2.5rem rgb(36 32 29 / 8%);
  --shell: min(100% - 2.5rem, 75rem);
  --measure: 46rem;
  --header-height: 4.25rem;
}

html:lang(en),
html:lang(vi) {
  --font-sans: "Segoe UI", Arial, system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
}

html:lang(zh-Hans) {
  --font-sans: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-serif: "SimSun", "Noto Serif SC", serif;
}

html:lang(zh-Hant) {
  --font-sans: "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-serif: "PMingLiU", "Noto Serif TC", serif;
}

html:lang(ko) {
  --font-sans: "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --font-serif: "Batang", "Noto Serif KR", serif;
}

@media (min-width: 40rem) {
  :root {
    --shell: min(100% - 4rem, 75rem);
  }
}

@media (min-width: 64rem) {
  :root {
    --header-height: 5rem;
    --space-7: 7rem;
  }
}