/* ============================================================
   となりの英語 — Brand Tokens
   Phase 1 (V1 Handwritten Warmth) との連続性を保つ
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  --te-primary-teal:   #3B8775;  /* primary brand */
  --te-deep-green:     #1F5A4C;  /* heading text / accent dark */
  --te-cream:          #FAF6EF;  /* page background */
  --te-cream-warm:     #F7F1E6;  /* secondary surface */
  --te-beige:          #F5EDE2;  /* tertiary surface */
  --te-salmon:         #E8A598;  /* accent / CTA */
  --te-salmon-deep:    #D88575;  /* CTA hover */
  --te-light-blue:     #CFE0E3;  /* watercolor bloom hint */
  --te-ink:            #2B3B36;  /* body text */
  --te-ink-soft:       #5A6864;  /* meta / muted */
  --te-hairline:       #D9D2C5;  /* hairline rule */
  --te-hairline-soft:  #E8E1D2;

  /* ---------- Mascot ---------- */
  --te-shiba:          #C97B4A;  /* 柴茶 — 第4の温度色（マスコット専用） */
  --te-shiba-light:    #E8C7A8;
  --te-shiba-dark:     #8C5232;

  /* ---------- Tone surfaces (Note Box / Bubble) ---------- */
  --te-teal-soft:      #DCE8E4;  /* learn / info  背景 */
  --te-salmon-soft:    #F5DDD6;  /* quip / warning 背景 */
  --te-cream-deep:     #F2E9D8;  /* tip 背景 */

  /* ---------- Type ---------- */
  --te-font-logo:      "Zen Kurenaido", "Yuji Syuku", system-ui, sans-serif;
  --te-font-display:   "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --te-font-serif:     "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --te-font-body:      "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;

  /* ---------- Scale ---------- */
  --te-h2-size: 1.75rem;   /* 28px */
  --te-h3-size: 1.375rem;  /* 22px */
  --te-h4-size: 1.125rem;  /* 18px */
  --te-body-size: 1rem;    /* 16px */

  /* ---------- Spacing ---------- */
  --te-space-h2-top: 3.5rem;
  --te-space-h2-bot: 1.25rem;
  --te-space-h3-top: 2.25rem;
  --te-space-h3-bot: 0.75rem;
  --te-space-h4-top: 1.5rem;
  --te-space-h4-bot: 0.5rem;

  /* ---------- Radii ---------- */
  --te-radius-sm: 6px;
  --te-radius-md: 10px;
  --te-radius-lg: 16px;
}