/* ============================================================
   YFLOW OS — 기본 테마 토큰(공용)
   app.css 를 통째로 읽지 않는 단독 페이지(작업실 iframe 의 컨텐츠파트·스케쥴관리·직원대시보드)가
   OS 와 같은 색·선·모서리·그림자를 쓰도록 app.css :root 토큰을 그대로 옮겨 둔 파일.
   ⚠ 값은 app.css :root 와 같아야 한다 — checks/test_os_tokens.py 가 어긋나면 실패한다.
   ============================================================ */
:root {
  /* -- 본문 서체는 fonts.css 에서 공통 제공 -- */
  --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* ── 테마: 로얄블루 · 해군(네이비) · 네오브루탈 모던 (2026-09-16 사용자 지시) ──
     바뀐 것은 색뿐이다. 네오브루탈 규격(--bw 2px 테두리 · 블러 0 하드 그림자)은 그대로 두고,
     그 '잉크'를 먹(#141414)에서 딥네이비로 옮겨 해군 인상을 낸다 — 테두리·그림자·본문이 한꺼번에 바뀐다.
     모든 값은 WCAG 실측으로 골랐다(주석의 수치는 흰 배경/흰 글자 기준 대비). */

  /* -- 표면 (네이비를 아주 옅게 머금은 화이트) -- */
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-3: #edf1f8;
  --surface-hover: #e7edf7;

  /* -- 잉크 · 선 (해군) -- */
  --ink: #0a1f3c;           /* 테두리·하드그림자·본문 — 16.48:1 (옛 먹 18.42:1) */
  --text: #0a1f3c;
  --text-2: #1e3352;
  --muted: #4a5d7a;         /* 6.69:1 */
  --faint: #7b8ca6;         /* 3.42:1 — 보조 라벨 전용, 본문 금지 */
  --disabled: #a6b3c6;
  --hair: #d7e0ee;          /* 내부 구분선(얇은 선) */
  --hair-2: #e8edf6;

  /* -- 액센트: 로얄블루 하나로 통일 -- */
  --accent: #3b5bdb;          /* 정체성 색 — 면·바·점·언더라인 등 비텍스트 용도 */
  --accent-strong: #2f4bc0;   /* 7.27:1 */
  --accent-deep: #1b3a6b;     /* 11.27:1 — 포커스 링·강조 텍스트 */
  --accent-weak: #edf2ff;
  --accent-soft: #c7d6fb;
  --on-accent: #ffffff;
  /* 흰 글자를 얹는 액센트 면 전용. #3b5bdb + 흰 글자 = 5.67:1 로 AA 를 넘지만,
     버튼처럼 작은 글자가 얹히는 자리라 한 단 더 어둡게 잡는다(8.48:1). */
  --accent-fill: #2445a6;
  --accent-fill-hover: #1e3a8a;

  /* -- 상태색 (색만으로 구분하지 않는다. 항상 텍스트 병기)
     성공은 초록을 유지하되 청록 쪽으로 당겨 로얄블루 옆에서 탁해 보이지 않게 했다.
     --ok 는 점·바 등 비텍스트용(3.39:1), 글자로 쓸 때는 --ok-text(6.53:1). */
  --ok: #0e9f6e;       --ok-weak: #e7f6ef;   --ok-text: #0b6b4a;
  --warn: #b45309;     --warn-weak: #fdf1e0;
  --danger: #d92d20;   --danger-weak: #fdeceb; --danger-text: #b8241a;   /* 면은 --danger, 글자는 --danger-text(배지 위 5.15:1) */
  --off: #5a6e8c;      --off-weak: #eef1f6;

  /* -- 네오브루탈 표면 규격 -- */
  --bw: 2px;                                 /* 보더 두께 */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --sh-1: 2px 2px 0 var(--ink);
  --sh-2: 4px 4px 0 var(--ink);
  --sh-3: 7px 7px 0 var(--ink);
  --sh-accent: 4px 4px 0 var(--accent-deep);

  /* -- 셸 치수 (VDASOS 실측 계승) -- */
  --sb-w: 237px;
  --sb-rail: 64px;
  --topbar-h: 50px;
  --content-pad-y: 16px;
  --content-pad-x: 20px;
  --content-max: 1240px;

  /* -- 컨트롤 높이 사다리 -- */
  --h-badge: 21px;
  --h-chip-sm: 28px;
  --h-search-sm: 30px;
  --h-chip: 28px;
  --h-btn-sm: 28px;              /* 버튼 높이는 28·34·40 세 단계 */
  --h-btn: 34px;
  --h-input: 40px;
  --row-h: 38px;

  /* -- 타이포 스케일 -- */
  --fs-badge: 12px;              /* 12px 아래 글자는 쓰지 않는다 */
  --fs-chip-sm: 12.5px;
  --fs-chip: 13px;
  --fs-btn: 14px;
  --fs-tbl: 13px;
  --fs-body: 14px;
  --fs-input: 14px;

  /* -- 모션 (2026-10-16) — transform·opacity 만 움직인다. 이 둘은 컴포지터가 그려서
     메인 스레드가 표를 그리느라 바빠도 120Hz 주사율 그대로 돈다(width·top 등은 매 프레임 레이아웃).
     곡선: 들어오고 나가는 것 = --ease-out, 서랍 = --ease-drawer.
     app.js motionMs() 가 --d-* 를 읽어 닫힘 애니메이션 길이를 맞춘다 — ms 로만 적는다. -- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* Lucian UX/UI Prompt(MIT) 이식 부품의 곡선 — 원본 값 그대로(--ux-ease / --ux-spring) */
  --ease-glide: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
  --d-item: 150ms;               /* 화면 전환·메뉴 묶음 펼침 — 하루 수십 번이라 거의 안 느껴지게 */
  --d-modal: 250ms;
  --d-drawer: 300ms;

  /* -- 전이 — 누름(--t-fast)은 ease-out, 색 바뀜(--t-base)은 ease -- */
  --t-fast: 100ms var(--ease-out);
  --t-base: .12s ease;

  color-scheme: light;
  accent-color: var(--accent);
}