/*
  위브룸 디자인 토큰 v0.1 (2026-10-30)
  기준: 국립중앙의료원 3기 실습2 워크북(261030)의 화이트·네이비 토큰 + Pretendard.
  컴포넌트에서는 원시 색상값 대신 아래 의미 토큰만 사용한다.
*/
:root {
  /* 원시 색상 (워크북과 동일한 값) */
  --wr-navy-900: #0f1c2e;
  --wr-navy-800: #183554;
  --wr-navy-700: #244c7c;
  --wr-navy-600: #2a5e9a;
  --wr-navy-100: #e8eff8;
  --wr-navy-50:  #edf3fa;
  --wr-slate-900: #1c2b40;
  --wr-slate-600: #52647a;
  --wr-slate-400: #8193a8;
  --wr-slate-200: #d2dce9;
  --wr-slate-100: #edf2f7;
  --wr-slate-50:  #f6f9fc;
  --wr-white: #ffffff;

  /* 의미 색상: 글자·배경·선 */
  --wr-text: var(--wr-slate-900);          /* 14.30:1 on white */
  --wr-text-muted: var(--wr-slate-600);    /* 6.06:1 on white, 5.38:1 on canvas */
  --wr-text-on-primary: var(--wr-white);   /* 8.75:1 on primary */
  --wr-bg: var(--wr-white);
  --wr-canvas: var(--wr-slate-100);
  --wr-surface: var(--wr-white);
  --wr-surface-soft: var(--wr-slate-50);
  --wr-surface-hover: var(--wr-navy-50);
  --wr-surface-selected: var(--wr-navy-100); /* primary text 7.56:1 */
  --wr-divider: var(--wr-slate-200);       /* 장식용 구분선 전용 (1.39:1) */
  --wr-border-input: var(--wr-slate-400);  /* 입력·조작 경계 3.15:1 */

  /* 의미 색상: 행동 */
  --wr-primary: var(--wr-navy-700);
  --wr-primary-strong: var(--wr-navy-800);
  --wr-focus: var(--wr-navy-600);          /* 6.63:1 */

  /* 의미 색상: 상태. 색만으로 의미를 전달하지 않고 아이콘·문구를 함께 쓴다 */
  --wr-success: #1e6b47;  --wr-success-bg: #e7f4ec;   /* 5.71:1 */
  --wr-warning: #8a4b00;  --wr-warning-bg: #fff4e0;   /* 6.24:1 */
  --wr-danger:  #b42318;  --wr-danger-bg:  #fdeceb;   /* 5.75:1 */
  --wr-info:    var(--wr-navy-700); --wr-info-bg: var(--wr-navy-100);

  /* 활동 상태 */
  --wr-state-draft: var(--wr-slate-600);
  --wr-state-open: var(--wr-success);
  --wr-state-closed: var(--wr-warning);
  --wr-state-revealed: var(--wr-navy-700);

  /* 진행(프로젝터) 화면 */
  --wr-stage-bg: var(--wr-navy-900);
  --wr-stage-text: var(--wr-white);        /* 17.13:1 */
  --wr-stage-accent: #9fc3ee;              /* 9.39:1 */

  /* 글꼴 */
  --wr-font: Pretendard, "Pretendard Variable", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /* 글자 크기 (1rem = 16px) */
  --wr-fs-12: .75rem;    /* 보조 표기 최소값. 본문 사용 금지 */
  --wr-fs-14: .875rem;
  --wr-fs-16: 1rem;      /* 모바일 입력·본문 최소값 */
  --wr-fs-17: 1.0625rem; /* 워크북 본문과 동일 */
  --wr-fs-20: 1.25rem;
  --wr-fs-24: 1.5rem;
  --wr-fs-28: 1.75rem;
  --wr-fs-40: 2.5rem;
  --wr-fs-64: 4rem;      /* 프로젝터 입장 코드·타이머 */
  --wr-lh-body: 1.65;
  --wr-lh-tight: 1.3;

  /* 간격 (4px 단위) */
  --wr-sp-1: 4px;  --wr-sp-2: 8px;  --wr-sp-3: 12px; --wr-sp-4: 16px;
  --wr-sp-5: 20px; --wr-sp-6: 24px; --wr-sp-8: 32px; --wr-sp-12: 48px;

  /* 모양·깊이 (플랫: 그림자는 떠 있는 층에만) */
  --wr-radius-sm: 6px;
  --wr-radius-md: 10px;
  --wr-radius-lg: 14px;
  --wr-radius-pill: 999px;
  --wr-shadow-overlay: 0 12px 32px rgba(28, 53, 83, .12); /* 워크북 --shadow-ui 와 동일 */

  /* 조작 크기 */
  --wr-touch: 44px;      /* 모든 터치 대상 최소 높이·폭 */
  --wr-touch-lg: 52px;   /* 교육생 주요 버튼 */

  /* 움직임 (Carbon 곡선, my-motion-ui carbon-ledger 수치). 움직임은 transform·opacity로만 만든다 */
  --wr-ease-out: cubic-bezier(0, 0, 0.38, 0.9);         /* 등장·감속 */
  --wr-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);  /* 위치 이동, 진행률 막대 */
  --wr-ease-expressive: cubic-bezier(0, 0, 0.3, 1);     /* 진행 화면 장면 전환·결과 공개 */
  --wr-dur-press: 90ms;    /* 누름 반응 */
  --wr-dur-fast: 150ms;    /* 닫힘·사라짐, 색 변화 */
  --wr-dur-base: 220ms;    /* 열림·등장. 화면 반응 상한 240ms */
  --wr-dur-scene: 480ms;   /* 진행 화면 장면 전환·결과 공개 첫 장면 */
  --wr-stagger: 60ms;      /* 순서대로 나타나기 간격 */
  --wr-shift: 8px;         /* 등장할 때 올라오는 거리 */
  --wr-press-scale: 0.98;  /* 누름 크기 */

  /* 겹침 순서 */
  --wr-z-sticky: 10; --wr-z-drawer: 40; --wr-z-modal: 100; --wr-z-toast: 1000;

  /* 레이아웃 */
  --wr-container: 1200px;
  --wr-reading: 720px;
}

@media (prefers-reduced-motion: reduce) {
  /* 위치는 움직이지 않고 투명도만 짧게 바꾼다 */
  :root { --wr-dur-press: 0ms; --wr-dur-fast: 0ms; --wr-dur-base: 120ms; --wr-dur-scene: 0ms; --wr-stagger: 0ms; --wr-shift: 0px; --wr-press-scale: 1; }
}