/* ─────────────────────────────────────────────────────────────
   디자인 토큰
   React 이관 시 Tailwind v4 `@theme` 블록으로 그대로 옮기면 됩니다.

   ── 색을 정한 근거 ──────────────────────────────────────────
   1. 브랜드색은 VMR 마크에서 직접 뽑았습니다 (#1E4A83, 색상각 212°).
      임상 소프트웨어가 파랑을 쓰는 관례와 맞고, NHS 디자인 시스템의
      #005EB8 과 같은 계열입니다. 앱이 자기 로고와 어긋나 있던 것을 맞췄습니다.
   2. 중성색은 차갑게. 병원 팔레트는 흰색·연회색·차가운 슬레이트와 맞물립니다.
      NHS(#212B32 · #D8DDE0 · #F0F4F5)와 USWDS gray-cool 을 참고했습니다.
   3. 뜻을 가진 색은 셋뿐입니다 — 초록(제공 중) · 호박(손볼 것) · 빨강(위험).
      전부 글자와 함께 씁니다. 적록색약이 남성의 약 8% 이므로
      색만으로 뜻을 전하지 않습니다.
   4. AI 초안은 색을 따로 갖지 않습니다. 브랜드색의 '점선'으로 구분합니다.
      강조색이 넷이면 어느 것도 강조가 되지 않습니다.

   ── 색을 쓰는 규칙 ──────────────────────────────────────────
   잉크로 채움 = 선택됨       브랜드로 채움 = 무언가를 실행함
   작은 점 + 글자 = 상태      점선 = AI가 쓴 것
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── 지면과 잉크 ── */
  --paper:        #F3F5F7;
  --paper-2:      #E9EDF1;
  --surface:      #FFFFFF;
  --ink:          #16202B;
  --ink-2:        #4A5A6A;
  --ink-3:        #5E6D7C;   /* 흰 배경 5.3:1 · 지면 4.9:1 — 작은 글자도 AA */
  --line:         #DDE3E9;
  --line-2:       #C3CCD6;

  /* ── 차트 괘선 ──
     차트의 값은 선 위에 앉습니다. 선이 값의 자리를 정하고, 동시에
     '여기는 고칠 수 있다'를 말합니다 — 선이 없는 값은 고칠 수 없는 값입니다.
     구획선(--line)보다 한 단계 옅어야 합니다. 같은 굵기로 두면 표가 됩니다. */
  --rule:         #E7ECF1;
  --rule-2:       #C9D3DD;   /* 짚었을 때 */

  /* 신원 머리글과 환자 기둥의 지면 — 본문 위로 한 겹 떠 있습니다 */
  --band:         #FFFFFF;
  --band-line:    #DCE4EC;

  /* ── 채운 색 위의 글자 ──
     브랜드나 잉크로 칸을 채우면 그 위의 글자는 배경을 따라가야 합니다.
     이 짝이 없어서 #fff · #101314 가 열한 곳에 흩어져 있었습니다. */
  --on-brand:     #FFFFFF;
  --on-ink:       #F3F5F7;

  /* ── 브랜드 — VMR 마크에서 ── */
  --brand:        #1E4A83;
  --brand-ink:    #163A68;
  --brand-soft:   #E8EFF7;
  --brand-line:   #BCD0E6;

  /* ── 상태 ── */
  --ok:           #17724A;   /* 학생에게 제공 중 */
  --ok-soft:      #E4F1EA;
  --warn:         #8F5510;   /* 손볼 것 · 이상 수치 */
  --warn-soft:    #FBF0E1;
  --danger:       #B8342A;

  /* ── AI 초안 — 브랜드색을 점선으로 씁니다 ── */
  --ai:           var(--brand);
  --ai-soft:      var(--brand-soft);
  --ai-line:      var(--brand-line);

  /* ── 필드 노출 3종 ── */
  --vis-public:   #17724A;
  --vis-ask:      #8F5510;
  --vis-private:  #5E6D7C;

  /* ── 모니터 ──
     환자 모니터는 두 테마에서 똑같이 어둡습니다. 이건 이탈이 아니라 의도입니다 —
     모니터는 원래 어둡고, 교수가 적는 값이 곧 학생이 보게 될 화면이기 때문입니다.
     페이지에서 진한 것은 여기 하나뿐입니다. */
  --mon-bg:    #1B242E;      /* 칸 사이 실선 */
  --mon-cell:  #0E151C;
  --mon-line:  #26313C;
  --mon-focus: #141E28;
  --mon-key:   #7E8C9A;
  --mon-val:   #A8C8EE;      /* 브랜드 밝은 쪽 — 정상값 */
  --mon-out:   #E3A55F;      /* 범위 밖 */
  --mon-dev:   #4C7FBF;      /* 마네킹이 내는 값 표시 */
  --mon-dim:   #3A4753;
  --mon-mute:  #6C7B8A;
  --mon-slash: #4A5A6A;

  /* ── 타이포 ──
     외부 요청 없이 file:// 에서 열려야 하므로 웹폰트를 새로 부르지 않습니다.
     그러니 활자의 성격은 새 서체가 아니라 크기·굵기·자간과 숫자 처리에서 나옵니다.

     고정폭은 계기에서 읽는 숫자에만 씁니다 — 활력징후 · 나이 · 점수 · 날짜 · 항목 번호.
     라벨까지 고정폭으로 두면 임상 도구가 아니라 개발 도구처럼 보입니다. */
  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", monospace;

  /* 아홉 역할. 남는 역할도, 갈 곳 없는 크기도 없습니다. */
  --t-display: 800 clamp(1.5rem, 1.1rem + 1.3vw, 2rem)/1.15 var(--font-sans);  /* 페이지 제목 */
  --t-name:    700 1.25rem/1.2   var(--font-sans);   /* 환자 · 학생 이름 */
  --t-h2:      700 1rem/1.35     var(--font-sans);   /* 섹션 · 카드 제목 */
  --t-h3:      600 .9375rem/1.4  var(--font-sans);   /* 묶음 제목 · 강조 본문 */
  --t-body:    400 .9375rem/1.65 var(--font-sans);   /* 본문 · 입력값 */
  --t-ui:      500 .875rem/1.5   var(--font-sans);   /* 단추 · 칩 · 목록 항목 */
  --t-small:   400 .8125rem/1.55 var(--font-sans);   /* 보조 설명 */
  --t-micro:   400 .75rem/1.5    var(--font-sans);   /* 힌트 · 각주 */
  --t-label:   600 .6875rem/1.3  var(--font-sans);   /* 라벨 · 배지 · 표 머리 */

  /* 자간은 크기와 함께 갑니다 — 크면 조이고 작으면 풉니다 */
  --tk-display: -.03em;
  --tk-name:    -.025em;
  --tk-h2:      -.02em;
  --tk-h3:      -.015em;
  --tk-label:    .02em;
  --tk-chart:    .06em;   /* 차트 여백의 주석 — 자간을 풀면 값과 라벨이 갈립니다 */

  /* 숫자 등급 — 이 제품은 학생이 계기에서 읽을 값을 만드는 곳입니다.
     전부 tabular-nums 라 표에서 세로로 맞습니다. */
  --t-num-s:   600 .6875rem/1    var(--font-mono);   /* 번호 · 작은 카운트 */
  --t-num:     600 .8125rem/1    var(--font-mono);   /* 기본 계기값 · 날짜 */
  --t-num-l:   700 1.375rem/1.1  var(--font-mono);   /* 대시보드 타일 · 점수 */
  --t-num-xl:  700 1.5rem/1.1    var(--font-mono);   /* 모니터 */

  /* ── 간격 ──
     4px 격자입니다. 컨트롤 안쪽에서만 쓰는 두 반 단계에 이름을 주었습니다 —
     이것이 없어서 5·6·7px 가 쉰여덟 번 흩어져 있었습니다. */
  --s-hair:  2px;                 /* 겹선 · 아주 좁은 틈 */
  --s-tight: 6px;                 /* 컨트롤 안쪽의 좁은 틈 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ── 형태 — 반지름은 네 단계만 ── */
  --r-sm: 4px;                /* 태그 · 작은 표시 */
  --r-md: 8px;                /* 입력 · 버튼 */
  --r-lg: 10px;               /* 카드 · 목록 · 겹침 창 */
  --r-full: 999px;            /* 알약 · 점 */
  /* 진짜 원은 50% 로 씁니다 — 반지름 단계가 아니라 모양입니다 */
  --shadow-1: 0 1px 2px rgb(22 32 43 / .06);
  --shadow-2: 0 2px 6px rgb(22 32 43 / .07), 0 14px 32px rgb(22 32 43 / .09);
  --bar: 58px;
  --photo: 112px;

  /* 명부 한 줄의 세로 리듬 */
  --row-lead-1: 1.2;
  --row-lead-2: 1.35;
  --row-gap-1: 3px;
  --row-gutter: 24px;
  --row-zone:   16px;

  /* ── 모션 ── */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fast: 110ms; --base: 190ms; --slow: 320ms;

  color-scheme: light;
}

/* ── 밀도 — 보통 / 촘촘 ──
   Cloudscape·Carbon·Lightning 이 모두 갖춘 장치입니다. 명부를 훑는 교수는 한 화면에
   보이는 줄 수를 스스로 정할 수 있어야 합니다.

   기본은 보통입니다. 촘촘은 저시력 사용자의 가독성과 운동 장애 사용자의 표적을
   깎으므로, 강요하지 않고 고르게 합니다. 새 규칙을 만들지 않고 이미 있는 토큰만
   갈아 끼웁니다 — 그래야 어긋날 곳이 생기지 않습니다. */
:root[data-density="compact"] {
  --row-lead-1: 1.1;
  --row-lead-2: 1.25;
  --row-gap-1: 1px;
  --row-gutter: 16px;
  --row-zone: 10px;
  --s-tight: 4px;
  --photo: 84px;
}

/* ── 다크 ── 수동 토글(data-theme)이 시스템 설정을 이깁니다 ── */
:root[data-theme="dark"] {
  --paper:        #0F151B;
  --paper-2:      #171F27;
  --surface:      #1A222B;
  --ink:          #E7EDF3;
  --ink-2:        #9DAAB8;
  --ink-3:        #8593A1;   /* 카드 위 5.1:1 */
  --line:         #26313C;
  --line-2:       #35434F;
  --rule:         #222C36;
  --rule-2:       #3B4854;
  --band:         #1A222B;
  --band-line:    #2C3742;

  --brand:        #7DACE4;
  --brand-ink:    #A8C8EE;
  --brand-soft:   #16283F;
  --brand-line:   #2E4B70;

  --ok:           #58BE90;
  --ok-soft:      #123027;
  --warn:         #D9A055;
  --warn-soft:    #2C2214;
  --danger:       #E5776B;

  --vis-public:   #58BE90;
  --vis-ask:      #D9A055;
  --vis-private:  #8593A1;
  --on-brand:     #0F151B;
  --on-ink:       #101314;

  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 2px 6px rgb(0 0 0 / .4), 0 14px 32px rgb(0 0 0 / .45);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F151B;      --paper-2: #171F27;     --surface: #1A222B;
    --ink: #E7EDF3;        --ink-2: #9DAAB8;       --ink-3: #8593A1;
    --line: #26313C;       --line-2: #35434F;
    --rule: #222C36;       --rule-2: #3B4854;
    --band: #1A222B;       --band-line: #2C3742;
    --brand: #7DACE4;      --brand-ink: #A8C8EE;   --brand-soft: #16283F;  --brand-line: #2E4B70;
    --ok: #58BE90;         --ok-soft: #123027;
    --warn: #D9A055;       --warn-soft: #2C2214;
    --danger: #E5776B;
    --vis-public: #58BE90; --vis-ask: #D9A055;     --vis-private: #8593A1;
    --on-brand: #0F151B;   --on-ink: #101314;
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 2px 6px rgb(0 0 0 / .4), 0 14px 32px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}