/* ─────────────────────────────────────────────────────────────────
   dealog.life 디자인 토큰 — Dossier (DESIGN.md)
   값의 정본은 mobile/lib/theme.ts — 그쪽을 바꾸면 이 파일도 같이 고친다.
   웹 앱(webapp)과 같은 이름(--bg, --pr, --i1 …)을 쓴다.
   index.html 만 읽는다. intro.html·i.html·account-deletion.html 은 아직 tokens.css(Vellum).
   ───────────────────────────────────────────────────────────────── */

:root, [data-theme="light"] {
  --bg:      #F5F6F8;
  --sf:      #FFFFFF;
  --sf2:     #EEF1F5;
  --bd:      #D8DDE4;
  --bd2:     #B4BCC8;
  --tx:      #0E1A2B;
  --tx2:     #445066;
  --tx3:     #5F6B7E;
  --tx4:     #8A94A6;
  --pr:      #14315C;
  --onpr:    #FFFFFF;
  --ac:      #8A5A0B;
  --acSoft:  #F4ECDD;
  --ok:      #1D6B47;
  --warn:    #9A4D00;
  --bad:     #A32A2A;
  --info:    #1F4E8C;
  --i1:      #8A5A0B;
  --i2:      #0F6B66;
  --i3:      #4A5A73;
  --i4:      #7A1F2B;
  /* 시트·토스트 그림자 (DESIGN.md §4) */
  --shadow-sheet: 0 -6px 24px rgba(10, 16, 28, .16);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg:      #0A101C;
  --sf:      #101828;
  --sf2:     #162135;
  --bd:      #223049;
  --bd2:     #33445F;
  --tx:      #E4E9F0;
  --tx2:     #A3AEBE;
  --tx3:     #8592A6;
  --tx4:     #5D6A80;
  --pr:      #A9C3EE;
  --onpr:    #0A101C;
  --ac:      #DDAE5A;
  --acSoft:  #2A2416;
  --ok:      #5CC08F;
  --warn:    #E59A4C;
  --bad:     #EE7B7B;
  --info:    #84AEEB;
  --i1:      #DDAE5A;
  --i2:      #4FC2B8;
  --i3:      #9AA9C2;
  --i4:      #E58A95;
  color-scheme: dark;
}

:root {
  --font-display: 'Hahmlet', 'Noto Sans KR', serif;
  --font-body:    'Noto Sans KR', 'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', ui-monospace, Menlo, monospace;

  /* 라운드 — sm 2 · md 4 · lg 8. 알약은 쓰지 않는다 */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* 옛 Vellum 이름 — 약관·처리방침 등 기존 페이지 마크업이 쓴다. 새 코드는 위 이름을 쓴다 */
  --vlm-paper:       var(--bg);
  --vlm-card:        var(--sf);
  --vlm-elev:        var(--sf2);
  --vlm-line:        var(--bd);
  --vlm-line-strong: var(--bd2);
  --vlm-ink-1:       var(--tx);
  --vlm-ink-2:       var(--tx2);
  --vlm-ink-3:       var(--tx3);
  --vlm-ink-4:       var(--tx4);
  --vlm-signal:      var(--ac);
  --vlm-signal-soft: var(--acSoft);
  --vlm-signal-ink:  var(--ac);
  --vlm-r-2:         var(--r-md);
  --vlm-r-3:         var(--r-lg);
  --vlm-r-pill:      var(--r-md);
  --vlm-font-text:   var(--font-body);
  --vlm-font-mono:   var(--font-mono);
  --vlm-ease:        var(--ease);
  --vlm-dur-fast:    var(--dur-fast);
  --vlm-dur-base:    var(--dur-base);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all; /* 한국어는 어절 단위로 줄바꿈 */
  overflow-wrap: anywhere;
}