/* ═══════════════════════════════════════════════════════════════
   CiaCia Jeongeum — Design Tokens  v1.0  (2026-08)
   근거: 목업 109장 실측 · PRD §26 UI Design System · §7.6 자판 색 규약
   사용: <link rel="stylesheet" href="tokens.css"> 후 var(--…) 참조
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. 팔레트 (원시값 — 컴포넌트에서 직접 쓰지 않는다) ───────── */
  --cream-50:  #FFFDF8;
  --cream-100: #FCF6E9;   /* 페이지 배경 */
  --cream-200: #F5EEDA;
  --cream-300: #E6E0D0;   /* 카드 테두리 */

  --teal-100: #E4F5F7;
  --teal-300: #9EDCE4;
  --teal-500: #0391A4;    /* 브랜드 · 버튼 · ᄙ */
  --teal-700: #02707E;    /* 텍스트용 teal (AA 충족) */
  --teal-900: #0A4438;

  --sky-100: #EEF6FB;     /* 모음 키 · 정보 배경 */
  --sky-300: #CFE4F1;
  --sky-500: #1E88E5;     /* 진행중 · 링크 강조 */
  --sky-700: #1E5F8E;

  --amber-100: #FDF4DE;
  --amber-300: #F2D79B;
  --amber-500: #EEAD29;   /* 별 · 하이라이트 · ᄫ */
  --amber-700: #B8800F;

  --orange-500: #F26B34;  /* 미션 · 경고성 CTA */
  --orange-700: #C4501F;

  --violet-100: #F1ECFA;
  --violet-300: #CFC2EB;
  --violet-500: #8E74C4;  /* ᅙ · 잠금 */
  --violet-700: #6E56A8;

  --green-100: #E8F6EC;
  --green-500: #3FA45B;   /* 완료 · 정답 */
  --green-700: #2E7D45;

  --red-100: #FDECEC;
  --red-500: #E5484D;     /* 오답 · 알림 배지 */
  --red-700: #B3272C;

  --navy-900: #12325C;    /* 본문 잉크 */
  --navy-700: #5A7391;
  --navy-500: #8492A4;
  --navy-300: #93A5B8;
  --navy-200: #C3CBD5;
  --navy-100: #E4EAEE;

  --gray-50:  #F7F9FA;    /* 키 면 */
  --gray-100: #F1F3F5;
  --gray-200: #E9EEF2;
  --gray-300: #DCE3E9;

  /* ── 2. 의미 토큰 (컴포넌트는 이것만 쓴다) ────────────────────── */
  --bg:            var(--cream-100);
  --surface:       #FFFFFF;
  --surface-2:     var(--gray-50);
  --surface-tint:  var(--cream-200);
  --line:          var(--cream-300);
  --line-2:        var(--navy-100);

  --ink:           var(--navy-900);
  --ink-2:         var(--navy-700);
  --ink-3:         var(--navy-300);
  --ink-disabled:  var(--navy-200);
  --ink-on-brand:  #FFFFFF;

  --brand:         var(--teal-500);
  --brand-hover:   #0AA0B4;
  --brand-active:  var(--teal-700);
  --brand-soft:    var(--teal-100);
  --brand-text:    var(--teal-700);

  --accent:        var(--amber-500);
  --accent-soft:   var(--amber-100);
  --accent-text:   var(--amber-700);

  --cta-2:         var(--orange-500);
  --cta-2-hover:   #FF7E48;
  --cta-2-active:  var(--orange-700);

  --ok:            var(--green-500);   --ok-soft:   var(--green-100);
  --warn:          var(--amber-500);   --warn-soft: var(--amber-100);
  --err:           var(--red-500);     --err-soft:  var(--red-100);
  --info:          var(--sky-500);     --info-soft: var(--sky-100);

  /* 찌아찌아 특수 글자 3색 — PRD §7.6 */
  --jamo-l:        var(--teal-500);   --jamo-l-soft:  var(--teal-100);   --jamo-l-text:  var(--teal-700);    /* ᄙ */
  --jamo-b:        var(--amber-500);  --jamo-b-soft:  var(--amber-100);  --jamo-b-text:  var(--amber-700);   /* ᄫ */
  --jamo-q:        var(--violet-500); --jamo-q-soft:  var(--violet-100); --jamo-q-text:  var(--violet-700);  /* ᅙ */

  /* 키캡 */
  --key-face:      var(--gray-50);
  --key-line:      var(--navy-100);
  --key-vowel:     var(--sky-100);
  --key-vowel-line:var(--sky-300);
  --key-vowel-ink: var(--sky-700);
  --key-unused:    var(--gray-100);
  --key-mod:       var(--gray-200);
  --key-mod-line:  var(--gray-300);

  /* ── 3. 타이포그래피 ─────────────────────────────────────────── */
  --font-ui:   "Nunito", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  --font-cia:  "CiaCia Sans", "Source Han Sans KR", "Noto Sans CJK KR", sans-serif;   /* 찌아찌아정음·한글 전용, 폴백 금지 */
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-ipa:  "Charis SIL", "Doulos SIL", "Lucida Grande", serif;

  --fs-11: 11px;  --fs-12: 12px;  --fs-13: 13px;  --fs-14: 14px;  --fs-15: 15px;
  --fs-16: 16px;  --fs-18: 18px;  --fs-20: 20px;  --fs-24: 24px;  --fs-28: 28px;
  --fs-34: 34px;  --fs-42: 42px;  --fs-52: 52px;

  --fw-regular: 600;   /* Nunito는 600이 본문 굵기로 적당 */
  --fw-medium:  700;
  --fw-bold:    800;
  --fw-black:   900;

  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-normal: 1.5;  --lh-loose: 1.7;
  --ls-caps: .06em;

  /* 글자 크기별 찌아찌아정음 글리프 보정: 라틴 대비 시각 크기가 작아 1.15배 */
  --cia-scale: 1.15;

  /* ── 4. 간격 · 반경 · 그림자 ─────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 18px;  --r-xl: 22px;  --r-2xl: 28px;  --r-pill: 999px;

  --sh-sm: 0 2px 6px rgba(18,50,92,.08);
  --sh-md: 0 4px 14px rgba(18,50,92,.10);
  --sh-lg: 0 8px 30px rgba(18,50,92,.12);
  --sh-brand: 0 6px 16px rgba(3,145,164,.30);
  --sh-key: 0 2px 0 var(--navy-100);              /* 키캡 입체감 */
  --sh-key-pressed: 0 0 0 var(--navy-100);

  /* ── 5. 모션 ─────────────────────────────────────────────────── */
  --dur-fast: 120ms;  --dur-base: 200ms;  --dur-slow: 320ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  /* ── 6. 포커스 · 히트영역 · 레이어 ──────────────────────────── */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--brand);
  --hit-min: 44px;                                /* 터치 최소 (WCAG 2.5.8) */
  --z-nav: 100;  --z-sheet: 200;  --z-toast: 300;  --z-modal: 400;

  /* ── 7. 반응형 기준 (미디어쿼리에서 직접 숫자 사용) ──────────── */
  /*  mobile  < 600   tablet 600–1023   desktop ≥ 1024  */
}

/* 테마 (Settings › Tema: Terang / Laut / Senja) — 배경·강조만 바뀌고 잉크는 유지 */
:root[data-theme="ocean"]  { --bg: #EAF5F9; --surface-tint: #DFF0F5; --line: #CFE4EA; }
:root[data-theme="sunset"] { --bg: #FDF1E6; --surface-tint: #FBE6D2; --line: #EED8C2; --accent: var(--orange-500); }

/* 큰 글씨 모드 (Settings › Teks Besar) */
/* 글자 크기 (Screen 26 설정). 값이 px 라 font-size 만 키워서는 커지지 않는다 —
   토큰 자체를 다시 정의해야 화면 전체가 실제로 커진다. */
:root[data-text="large"] {
  --fs-11: 13px;  --fs-12: 14px;  --fs-13: 15px;  --fs-14: 16px;  --fs-15: 17px;
  --fs-16: 19px;  --fs-18: 21px;  --fs-20: 24px;  --fs-24: 28px;  --fs-28: 33px;
  --fs-34: 40px;  --fs-42: 50px;  --fs-52: 61px;
}
:root[data-text="xlarge"] {
  --fs-11: 15px;  --fs-12: 16px;  --fs-13: 17px;  --fs-14: 19px;  --fs-15: 20px;
  --fs-16: 22px;  --fs-18: 25px;  --fs-20: 28px;  --fs-24: 33px;  --fs-28: 39px;
  --fs-34: 47px;  --fs-42: 58px;  --fs-52: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}