/* TIENGHANTOPIK — Phase 2 design tokens (PROPOSAL, not production).
   Three layers: primitive -> semantic -> component. Contrast ratios noted vs white (#fff). */

:root {
  /* ---------- Primitive: coral (brand) ---------- */
  --coral-50:  #FFF4F1;
  --coral-100: #FFE4DD;
  --coral-200: #FFC9BC;
  --coral-300: #FFA593;
  --coral-400: #FA8068;
  --coral-500: #F26B52;  /* brand mark, large fills. 3.2:1 on white -> NOT for body text / small text fills */
  --coral-600: #CF3F28;  /* action: white text 4.8:1, as text on white 4.8:1 */
  --coral-700: #AE311D;  /* hover/pressed 6.4:1 */
  --coral-800: #7F2416;

  /* ---------- Primitive: warm neutral ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FAF9F7;  /* app background */
  --n-50:  #F4F2EF;
  --n-100: #EAE7E2;
  --n-200: #D9D5CE;
  --n-300: #BDB8B0;  /* UI borders (>=3:1 only on strong borders; see --border-strong) */
  --n-400: #928D85;  /* 3.3:1 : non-text UI boundaries */
  --n-500: #77726A;  /* 4.9:1 : muted text */
  --n-700: #3F3B36;  /* 11:1 */
  --n-900: #1F1D1A;  /* 17:1 : ink */

  /* ---------- Primitive: status hues (deliberately NOT coral, NOT emerald-brand) ---------- */
  --plum-700:  #A31D45;  --plum-50:  #FCEAF0;   /* error 7.4:1 */
  --green-700: #1D7A4B;  --green-50: #E8F5EE;   /* confirmed/correct 5.3:1 — results & review only */
  --amber-800: #7A4F00;  --amber-50: #FFF3D6;   /* flag / caution */
  --blue-700:  #1F5FA8;  --blue-50:  #E8F0FA;   /* info + focus ring */

  /* ---------- Semantic ---------- */
  --bg-page:        var(--n-25);
  --bg-surface:     var(--n-0);
  --bg-subtle:      var(--n-50);
  --text-primary:   var(--n-900);
  --text-secondary: var(--n-700);
  --text-muted:     var(--n-500);
  --text-on-action: var(--n-0);
  --border:         var(--n-200);
  --border-strong:  var(--n-400);

  --brand:          var(--coral-500);
  --action:         var(--coral-600);
  --action-hover:   var(--coral-700);
  --action-tint:    var(--coral-50);
  --action-tint-border: var(--coral-200);

  --focus:          var(--blue-700);

  /* Exam state tokens — state is ALWAYS paired with shape/icon/text, never color alone */
  --state-selected-bg:     var(--coral-50);
  --state-selected-border: var(--coral-600);
  --state-answered-bg:     var(--n-900);   /* navigator: filled */
  --state-current-ring:    var(--coral-600);
  --state-flag:            var(--amber-800);
  --state-flag-bg:         var(--amber-50);
  --state-error:           var(--plum-700);
  --state-error-bg:        var(--plum-50);
  --state-success:         var(--green-700);
  --state-success-bg:      var(--green-50);
  --state-info:            var(--blue-700);
  --state-info-bg:         var(--blue-50);
  --state-disabled-bg:     var(--n-50);
  --state-disabled-text:   var(--n-400);

  /* ---------- Typography ---------- */
  --font-sans: "Be Vietnam Pro", "Noto Sans KR", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-kr:   "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", "Be Vietnam Pro", sans-serif;
  --font-num:  "Be Vietnam Pro", system-ui, sans-serif; /* use with font-variant-numeric: tabular-nums */

  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;    --fs-18: 1.125rem;
  --fs-20: 1.25rem;  --fs-24: 1.5rem;   --fs-32: 2rem;    --fs-44: 2.75rem;
  --lh-tight: 1.25;  --lh-ui: 1.5;      --lh-read-vi: 1.7; --lh-read-kr: 1.9;

  /* ---------- Space (4px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---------- Shape ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;
  --bw: 1px;  --bw-selected: 2px;
  --shadow-none: none;
  --shadow-pop:  0 8px 24px rgba(31, 29, 26, 0.16);   /* dialogs / sheets only */

  /* ---------- Layout ---------- */
  --container: 1200px;
  --reading-measure: 44rem;   /* ~704px; long text column */
  --sidebar-w: 304px;
  --header-h: 64px;
  --touch: 44px;              /* min target */
}

/* ---------- Multilingual (UI language = <html lang>; exam content stays lang="ko") ---------- */
:root{
  --font-sc:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-th:"Noto Sans Thai","Leelawadee UI","Thonburi",sans-serif;
  --font-ui:"Be Vietnam Pro","Noto Sans KR","Segoe UI",system-ui,sans-serif;  /* vi, en */
  --track:.04em;   /* letter-spacing for small caps-like labels; 0 for CJK/Thai */
}
:root[lang="ko"]{--font-ui:"Noto Sans KR","Be Vietnam Pro","Malgun Gothic",sans-serif;--lh-ui:1.6;--track:0}
:root[lang="zh-Hans"]{--font-ui:"Noto Sans SC","Be Vietnam Pro","PingFang SC","Microsoft YaHei",sans-serif;--lh-ui:1.6;--track:0}
/* Thai: stacked vowel/tone marks need taller lines and a slightly larger size to match the optical size of Latin/Hangul */
:root[lang="th"]{--font-ui:"Noto Sans Thai","Be Vietnam Pro","Leelawadee UI",sans-serif;--lh-ui:1.75;--track:0;--fs-12:.8125rem;--fs-14:.9375rem;--fs-16:1.0625rem}

/* ---------- Site pages (homepage, exam library) — only what the exam screen did not need ---------- */
:root{
  --section-y:72px;           /* vertical rhythm between homepage sections (48px on mobile) */
  --bg-tint:var(--coral-50);  /* flat tinted panel (no gradient) */
  --bg-sunken:var(--n-50);
  --lh-title:1.2;             /* display headings; taller for ko/zh/th below */
}
:root[lang="ko"]{--lh-title:1.3}
:root[lang="zh-Hans"]{--lh-title:1.3}
:root[lang="th"]{--lh-title:1.5}