/* Shared design values. Preserve measured values; see docs/design-system.md. */
:root {
  /* Semantic UI and subject palette. Teaching illustrations stay local. */
  --color-learning-green: #245c45;
  --color-green-hover: #194d36;
  --color-ink-green: #213f33;
  --color-muted-leaf: #68756b;
  --color-cream-ground: #f8f8f2;
  --color-paper-surface: #fffefa;
  --color-mint-surface: #e5eddf;
  --color-soft-divider: #e5e9df;
  --color-focus-terracotta: #b34b20;
  --color-white: #ffffff;
  --color-correct-ground: #e3efde;
  --color-correct-border: #3d713c;
  --color-correct-ink: #24522b;
  --color-wrong-ground: #f8e8de;
  --color-wrong-border: #b85a31;
  --color-wrong-ink: #8c3d22;
  --color-thai-ground: #f4e8d5;
  --color-thai-ink: #88542b;
  --color-math-ground: #e5ebef;
  --color-math-ink: #395d73;
  --color-english-ground: #f1e1d8;
  --color-english-ink: #965035;
  --color-science-ground: #dcecea;
  --color-science-ink: #225f58;
  --color-social-ground: #eee6cd;
  --color-social-ink: #66542a;
  --color-health-ground: #eadfe9;
  --color-health-ink: #6b4662;
  --color-art-ground: #f0dfce;
  --color-art-ink: #874c2c;
  --color-work-ground: #e6e8cf;
  --color-work-ink: #596230;
  --color-english-control-ink: #7d442d;
  --color-english-muted: #6d635b;
  --color-english-hover: #f5e9e0;
  --color-activity-muted: #52644f;
  --color-activity-ground: #eef2e7;
  --color-soft-hover: #eef2e8;
  --color-learning-soft: #eff3e9;
  --color-control-muted: #edf1e8;
  --color-control-border: #dce2d4;
  --color-secondary-border: #c4d1bf;
  --color-listen-border: #cbd6c4;
  --color-choice-border: #d7dfd0;
  --color-notebook-border: #bbcbb3;
  --color-feedback-correct-ground: #edf3e6;
  --color-feedback-wrong-ground: #fbefe4;
  --color-activity-note-ink: #52644e;

  /* Typography: incumbent faces and measured size steps. */
  --font-interface: 'Noto Sans Thai',sans-serif;
  --font-display: 'Noto Serif Thai',serif;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-21: 21px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-30: 30px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-size-44: 44px;
  --font-size-72: 72px;
  --font-size-88: 88px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-heading: 1.5;
  --line-height-body: 1.65;
  --line-height-support: 1.8;
  --line-height-lesson: 1.9;
  --line-height-reading: 2;
  --line-height-choice: 1.7;

  /* Measured spacing primitives; not a normalized 4px grid. */
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-25: 25px;
  --space-28: 28px;
  --space-36: 36px;
  --space-45: 45px;

  /* Shared shape, focus and elevation roles. */
  --radius-filter: 7px;
  --radius-control: 8px;
  --radius-navigation: 9px;
  --radius-choice: 10px;
  --radius-display: 12px;
  --radius-activity: 13px;
  --radius-card: 14px;
  --radius-sheet: 16px;
  --control-min-height: 48px;
  --focus-width: 3px;
  --focus-offset: 5px;
  --focus-reading-offset: 3px;
  --shadow-letter: 0 9px 15px #00000010;
  --shadow-toast: 0 6px 24px #00000022;
  --shadow-audio: 0 8px 24px #00000018;

  /* Repeated subject guidance surfaces; original colors preserved. */
  --color-science-guidance-ground: #f3e8d2;
  --color-science-guidance-ink: #624725;
  --color-social-guidance-ground: #f5efdc;
  --color-health-guidance-ground: #f2ecf1;
  --color-health-guidance-border: #d7c7d3;
  --color-health-stop-ground: #f6eee5;
  --color-health-stop-border: #d9bcab;
  --color-art-guidance-ground: #f7efe5;
  --color-art-guidance-border: #d8c3ae;
  --color-art-muted: #70533c;
  --color-work-guidance-ground: #f1f2e6;
  --color-work-guidance-border: #cbd0ac;

  /* Semantic child-control and home-activity roles. */
  --word-card-min-width: 220px;
  --font-size-child-control: var(--font-size-16);
  --font-size-activity-heading: var(--font-size-25);
  --activity-padding-y: var(--space-28);
  --activity-padding-x: var(--space-28);

  /* Compatibility for existing inline UI and consumer snippets. */
  --green: var(--color-learning-green);
  --dark: var(--color-ink-green);
  --muted: var(--color-muted-leaf);
  --cream: var(--color-cream-ground);
  --line: var(--color-soft-divider);
  --border: var(--color-soft-divider);
  --ink: var(--color-ink-green);
  --orange: var(--color-focus-terracotta);
  --mint: var(--color-mint-surface);
  --serif: var(--font-display);
  --sans: var(--font-interface);
}

/* Responsive semantic roles; primitive values remain unchanged. */
@media(max-width:760px){
  :root{
    --font-size-activity-heading: var(--font-size-23);
    --activity-padding-y: var(--space-24);
    --activity-padding-x: var(--space-20);
  }
}