@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap");

/* didao design tokens — generated from tokens/tokens.json */
@font-face {
  font-family: "Hedvig Letters Serif";
  src: url("../fonts/HedvigLettersSerif-Regular-VariableFont_opsz.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root, [data-theme="light"] {
  --coral: #f56542;
  --cream: #fff9f2;
  --charcoal: #282620;
  --golden: #ffbb52;
  --peach: #ffd9c0;
  --coral-deep: #af432c;
  --background: var(--cream);
  --warmsurface: #fffdfa;
  --hairline: #ede3d8;
  --ink: var(--charcoal);
  --mutedtext: #6e6a64;
  --coral-text: var(--coral-deep);
  --on-coral: var(--charcoal);
  --highlight: var(--peach);
  --font-display: "Hedvig Letters Serif", serif;
  --font-sans: "Schibsted Grotesk", sans-serif;
  --font-cjk: "Noto Serif SC", "Songti SC", "STSong", serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --disc: var(--peach);
  --control-border: var(--mutedtext);
  --bezel: var(--charcoal);
  color-scheme: light;
}
[data-theme="dark"] {
  --background: var(--charcoal);
  --warmsurface: #34312b;
  --hairline: #4a453d;
  --ink: var(--cream);
  --mutedtext: #b3aca3;
  --coral-text: #ff8a6b;
  --on-coral: var(--charcoal);
  --highlight: #5a3a2c;
  --bezel: #4a453d;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: var(--charcoal);
    --warmsurface: #34312b;
    --hairline: #4a453d;
    --ink: var(--cream);
    --mutedtext: #b3aca3;
    --coral-text: #ff8a6b;
    --on-coral: var(--charcoal);
    --highlight: #5a3a2c;
    --bezel: #4a453d;
    color-scheme: dark;
  }
}

/* Type styles */
.expression { font-family: var(--font-cjk); font-size: 28px; line-height: 40px; font-weight: 500; }
.sentence { font-family: var(--font-cjk); font-size: 20px; line-height: 32px; font-weight: 400; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.pinyin { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 400; }
.pinyin { color: var(--mutedtext); }
.caption { color: var(--mutedtext); }

/* Base */
body { margin: 0; background: var(--background); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--coral-text); }
.btn-primary { background: var(--coral); color: var(--on-coral); border: 0; border-radius: 999px; padding: 12px 22px; font: 600 16px/1 var(--font-sans); cursor: pointer; }
.btn-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
mark.change { background: var(--highlight); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--radius-sm); padding: 0 2px; }
del { color: var(--mutedtext); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Website scale. All site colour, typography and spacing originate here. */
:root {
  --space-8: calc(var(--space-4) * 2);
  --space-10: calc(var(--space-2) * 5);
  --space-12: calc(var(--space-6) * 2);
  --space-16: calc(var(--space-4) * 4);
  --space-20: calc(var(--space-4) * 5);
  --space-24: calc(var(--space-6) * 4);
  --space-32: calc(var(--space-8) * 4);
  --content-max: 1200px;
  --grid-gap: 24px;
  --page-gutter: clamp(20px, 4vw, 40px);
  --header-h: 80px;
  --radius-stage: 40px;
  --font-body: 400 17px/1.55 var(--font-sans);
  --font-label: 600 15px/1.4 var(--font-sans);
  --font-small: 500 13px/1.45 var(--font-sans);
  --font-lead: 400 clamp(18px, 1.6vw, 21px)/1.45 var(--font-sans);
  --font-item: 700 clamp(18px, 1.5vw, 20px)/1.3 var(--font-sans);
  --font-question: 700 20px/1.3 var(--font-sans);
  --font-card: 400 clamp(26px, 2.6vw, 34px)/1.08 var(--font-display);
  --font-heading: 400 clamp(38px, 5vw, 64px)/1 var(--font-display);
  --font-hero: 400 clamp(46px, 7.2vw, 104px)/.98 var(--font-display);
  --font-example: 500 clamp(17px, 1.5vw, 19px)/1.5 var(--font-cjk);
  --tracking-heading: -.015em;
  --tracking-label: .06em;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ghost-size: 108px;
}
@media (max-width: 720px) { :root { --header-h: 64px; } }