/* [DEV_MAP] admin/assets/tokens.css - 디자인 토큰 단일 소스 - v2.0 (2026-09-03)
   [목적] 색·간격·radius·타이포·그림자를 한 곳에 둔다
   [핵심] hex 는 여기서만 쓴다. 다른 CSS 는 var() 로만 참조한다
   [연관] app.css · mobile.css. 로드 순서 고정: tokens -> app -> mobile
   [주의] 🔴 다른 파일에 hex 를 쓰면 두 벌이 되어 한쪽만 바뀐다.
          🔴 이 파일을 고치면 _header.php 의 ASSET_V 와 login.php 의 ?v= 를 같이 올린다 */

:root {

  /* ── 뉴트럴 슬레이트 10단계 ──────────────────────────────
     실화면 검수 두 번의 실패에서 나온 값이다. 임의로 밝히지 않는다. */
  --grey-50:  #F8FAFC;
  --grey-100: #F1F5F9;
  --grey-200: #E2E8F0;
  --grey-300: #CBD5E1;
  --grey-400: #94A3B8;
  --grey-500: #64748B;
  --grey-600: #475569;
  --grey-700: #334155;
  --grey-800: #1E293B;
  --grey-900: #0F172A;

  /* ── Primary 딥 블루 ────────────────────────────────────
     🔴 토스 블루 #3182F6 은 실화면에서 흐려 폐기된 값이다. 쓰지 않는다. */
  --primary:       #1E3A8A;
  --primary-hover: #172554;
  --primary-weak:  #DBEAFE;
  --focus-ring:    rgba(30,58,138,.24);
  --on-primary:    #FFFFFF;   /* 진한 배경 위 글자 */

  /* ── 시맨틱 ─────────────────────────────────────────────
     텍스트색으로도 쓰이므로 연한 배경 위에서 읽혀야 한다. */
  --success:      #166534;  --success-weak: #DCFCE7;
  --warning:      #92400E;  --warning-weak: #FEF3C7;
  --danger:       #991B1B;  --danger-weak:  #FEE2E2;

  /* ── 별칭 ───────────────────────────────────────────────
     🔴 --text-muted 보다 밝게 내리지 않는다. v1.0 이 여기서 실패했다. */
  --bg-body:      var(--grey-100);
  --surface:      #FFFFFF;
  --surface-2:    var(--grey-50);
  --text:         var(--grey-900);
  --text-sub:     var(--grey-700);
  --text-muted:   var(--grey-500);
  /* 🔴 바깥 테두리와 표 행 구분선은 --border-strong.
     안쪽 가벼운 구분선만 --border. 반대로 쓰면 표가 배경에 묻는다. */
  --border:        var(--grey-300);
  --border-strong: var(--grey-400);

  /* ── 정산 도메인 ────────────────────────────────────────
     🔴 마이너스를 빨강으로 칠하지 않는다. 이 도메인에서 마이너스 실적은
        총판 수익이 생기는 쪽이다. 회계 관행대로 빨강을 쓰면 운영자가 반대로 읽는다. */
  --minus:      var(--warning);        /* 마이너스 실적 = 수익 발생. 골드 계열 */
  --minus-weak: var(--warning-weak);
  --plus:       var(--danger);         /* 플러스 = 유저가 이긴 쪽. 주의 신호 */
  --plus-weak:  var(--danger-weak);

  /* 신호등 3색 */
  --sig-high:      var(--danger);   --sig-high-weak: var(--danger-weak);
  --sig-mid:       var(--warning);  --sig-mid-weak:  var(--warning-weak);
  --sig-low:       var(--success);  --sig-low-weak:  var(--success-weak);

  /* ── 그림자 4단계 ───────────────────────────────────────
     🔴 모든 카드와 표는 최소 --shadow-edge 를 갖는다.
        경계선만으로는 배경과 갈라지지 않는다. */
  --shadow-edge:  0 1px 2px rgba(15,23,42,.08);
  --shadow-card:  0 4px 12px rgba(15,23,42,.08);
  --shadow-float: 0 6px 16px rgba(15,23,42,.14), 0 1px 3px rgba(15,23,42,.08);
  --shadow-modal: 0 16px 40px rgba(15,23,42,.18), 0 3px 8px rgba(15,23,42,.10);
  --scrim: rgba(15,23,42,.45);

  /* ── radius ─────────────────────────────────────────────*/
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-full: 999px;

  /* ── 간격 (4px 그리드) ──────────────────────────────────*/
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* ── 타이포 ─────────────────────────────────────────────*/
  --font: system-ui, -apple-system, "Segoe UI", "Noto Sans KR", "맑은 고딕", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "D2Coding", monospace;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 20px; --fs-6: 28px;

  /* ── 레이아웃 ───────────────────────────────────────────*/
  --sidebar-w: 208px;
  --topbar-h:  56px;
  --drawer-w:  268px;
  --touch:     44px;
  --bp-mobile: 720px;   /* 참고값. @media 는 리터럴을 써야 한다 */
}