/* ==========================================================================
   Mimolux Design System v2 - Tokens  (1.0 · 2026-10-28 확정)

   방향: 메인 하늘 + 보조 녹색, 차가운 슬레이트 잉크, 크림 바탕,
         1px 선으로 나눈 칸, 직각. 주황은 쓰지 않습니다.
   레퍼런스: BePortfolio4 — 크림 바탕 + 녹회색 면 + 녹색 #65C489 + 슬레이트 잉크
   컴포넌트는 아래 토큰만 참조합니다. hex 는 이 파일에만 있습니다.
   대비 수치는 docs/color.html · decisions/palette-usage.html 참고.
   ========================================================================== */

:root {
  /* ---- 바탕 · 면 ---------------------------------------------------- */
  --mx-white:     #ffffff;      /* 칸 · 카드 · 입력 · 표 */
  --mx-beige-50:  #fffcf7;      /* 크림 — 페이지 바탕 */
  --mx-beige-100: #faf5ed;      /* 베이지 — 섹션 교차 · 푸터 · 표 머리 */
  --mx-beige-200: #ece7dd;      /* 사진 자리 · 비활성 면 */
  --mx-beige-300: #d8d2c6;      /* 비활성 테두리 */
  --mx-mist:      #e0e4d7;      /* 녹회색 면 — 히어로 옆 면 · 넓은 차분한 면 */

  /* ---- 하늘 — 메인: 강조 단추 · 표시 점 · 선택 색 · CTA · 넓은 면 ------- */
  --mx-sky:       #aed4ef;      /* 면 전용. 위 글자는 슬레이트만 (7.05) */
  --mx-sky-soft:  #e6f2fb;      /* 옅은 띠 · 알림 바탕 */
  --mx-sky-mid:   #3f8ccc;      /* 그래프 · 아이콘 (흰 3.60) — 글자 금지 */
  --mx-sky-deep:  #2e6f9e;      /* 글자 · 링크 (흰 5.41) — 특정 맥락만 */

  /* ---- 녹색 — 보조: 보조 면 · 분류 태그 · 완료 상태 --------------------- */
  --mx-green:      #65c489;     /* 면 전용. 위 글자는 슬레이트만 (5.14). 흰 글자 금지 (2.14) */
  --mx-green-soft: #d8efe0;     /* 옅은 띠 · 선택된 행 */
  --mx-green-deep: #2b7a4f;     /* 글자 · 링크 · 번호 · 포커스 (흰 5.25) */

  /* ---- 잉크 — 차가운 슬레이트 ---------------------------------------- */
  --mx-ink:       #3a3b4c;      /* 제목 · 구조선 · 주 버튼 · 강조 칸 (흰 11.0) */
  --mx-ink-body:  #5a5c6b;      /* 본문 (흰 6.61) — 하늘 · 녹색 원색 위 금지 */
  --mx-ink-muted: #696a78;      /* 캡션 (흰 5.34) — 크림 · 화이트 · 베이지 위만 */
  --mx-ink-faint: #a3a4ae;      /* 자리표시 · 장식 — 읽을 글자 금지 */

  /* ---- 상태 — 폼 검증과 알림에만 ------------------------------------- */
  --mx-danger:      #c42b1c;
  --mx-danger-tint: #fbe7e4;
  --mx-success:     var(--mx-green-deep);
  --mx-success-tint:var(--mx-green-soft);

  /* ---- 선 ------------------------------------------------------------ */
  --mx-line-w:    1px;
  --mx-line:      var(--mx-ink);              /* 구조선 — 칸을 나누는 선 */
  --mx-line-soft: rgba(58, 59, 76, .14);      /* 칸 안쪽 보조선 */
  --mx-line-on-photo: rgba(255, 255, 255, .55);
  --mx-focus:     var(--mx-sky-deep);         /* 포커스 링 2px (흰 5.41) */
  --mx-mark:      var(--mx-sky);              /* 작은 표시 점 면 — 섹션 라벨 · 링크 · 현재 메뉴 · 목록 */
  --mx-mark-edge: var(--mx-sky-mid);          /* 표시 점 테두리 — 크림 위에서 옅은 하늘이 보이게 */

  /* ---- 서체 ---------------------------------------------------------- */
  --mx-font: 'Wanted Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mx-w-regular: 400;   /* 본문 */
  --mx-w-medium:  500;   /* 그 외 전부 */

  --mx-fs-display: clamp(44px, 6.2vw, 88px);
  --mx-fs-h1:      clamp(34px, 4.2vw, 56px);
  --mx-fs-h2:      clamp(30px, 3.4vw, 48px);
  --mx-fs-h3:      24px;
  --mx-fs-h4:      22px;   /* 칸 제목 — 넓은 칸에서 작아 보이지 않게 */
  --mx-fs-body-lg: 18px;
  --mx-fs-body:    16px;
  --mx-fs-small:   14px;
  --mx-fs-caption: 13px;
  --mx-fs-label:   12px;   /* 영문 대문자 라벨 · 번호 */

  --mx-lh-tight: 1.12;
  --mx-lh-head:  1.25;
  --mx-lh-body:  1.65;
  --mx-ls-display: -0.035em;
  --mx-ls-head:    -0.02em;
  --mx-ls-label:   0.14em;

  /* ---- 간격 (4px 기반) ---------------------------------------------- */
  --mx-s-1: 4px;   --mx-s-2: 8px;   --mx-s-3: 12px;  --mx-s-4: 16px;
  --mx-s-5: 24px;  --mx-s-6: 32px;  --mx-s-7: 48px;  --mx-s-8: 64px;
  --mx-s-9: 96px;  --mx-s-10: 128px;

  --mx-cell-pad: clamp(20px, 3vw, 48px);     /* 칸 안쪽 여백 */
  --mx-gutter:   var(--mx-cell-pad);         /* 틀 안 좌우 여백 = 칸 여백 → 모든 글이 같은 세로선에서 시작 */
  --mx-section:  clamp(64px, 9vw, 128px);    /* 큰 섹션 위아래 */
  --mx-frame:    1360px;                      /* 틀 폭 — 모든 섹션이 이 안에. 넓은 화면에서 틀 밖은 크림 여백 */
  --mx-max:      var(--mx-frame);
  --mx-measure:  34em;                        /* 본문 한 줄 최대 폭 */

  /* ---- 모서리 -------------------------------------------------------- */
  --mx-radius: 0;          /* 기본은 직각 */
  --mx-radius-round: 50%;  /* 예외: 원 자체가 의미인 것(라디오 · 위치 점 · 아바타) */

  /* ---- 움직임 -------------------------------------------------------- */
  --mx-ease: cubic-bezier(.2, .7, .2, 1);
  --mx-dur:  .22s;
  --mx-dur-slow: .5s;

  /* ---- 크기 ---------------------------------------------------------- */
  --mx-h-sm: 36px;
  --mx-h-md: 48px;
  --mx-h-lg: 60px;
  --mx-header-h: 72px;
  --mx-header-h-full: 72px;         /* 맨 위 */
  --mx-header-h-compact: 54px;      /* 스크롤하면 75% (2026-10-29 · 50% 는 너무 좁아 75%) */
  --mx-tap: 44px;          /* 누르는 대상 최소 크기 */

  /* ---- 겹침 순서 ----------------------------------------------------- */
  --mx-z-header: 20;
  --mx-z-drawer: 40;
  --mx-z-toast:  60;
}

@media (max-width: 900px) {
  /* 휴대폰은 60 → 45 (75%) — 메뉴 단추 누름 최소 44px 이상 */
  :root { --mx-header-h: 60px; --mx-header-h-full: 60px; --mx-header-h-compact: 45px; }
}