/* ============================================================
   admin-service 디자인 토큰 (단일 진실 공급원)
   ------------------------------------------------------------
   - 모든 컬러/폰트/간격/라디우스 값은 여기서만 정의한다.
   - 페이지/컴포넌트 CSS는 var(--token) 형태로만 참조한다.
   - 신규 hex / px 값을 페이지 CSS 에 직접 박지 않는다.
   - 단계적 마이그레이션: 기존 hex 값들은 점진적으로 var() 로 치환.
   ============================================================ */

:root {
    /* ---------- 의미 컬러 (액션 버튼 컬러 룰과 1:1 매칭) ---------- */
    --color-success: #28a745;          /* 저장/등록/확인 (.btn-save) */
    --color-success-hover: #218838;
    --color-danger: #dc3545;           /* 삭제/위험 (.btn-delete) */
    --color-danger-hover: #c82333;
    --color-secondary: #6c757d;        /* 취소/보조 (.btn-cancel) */
    --color-secondary-hover: #5a6268;
    --color-primary: #007bff;          /* 조회/주요 액션 (.btn-search) */
    --color-primary-hover: #0056b3;
    --color-info: #17a2b8;             /* 수정/정보 (.btn-edit) */
    --color-info-hover: #138496;
    --color-reset: #495057;            /* 초기화 (.btn-reset) */
    --color-reset-hover: #343a40;
    --color-warning: #ffc107;          /* 경고 (.btn-warning) */
    --color-warning-hover: #e0a800;
    --color-new-register: #7c3aed;     /* 신규등록 — 다른 의미컬러(파랑/초록/청록)와 충돌 안 하는 violet 계열 */
    --color-new-register-hover: #6d28d9;

    /* ---------- 텍스트 컬러 ----------
       본문은 사실상 검정(near-black) 톤. 순수 #000 은 눈 피로가 크고 디자인 톤이 너무 강해
       admin UI 에선 #111827 (slate-900) 을 검정 대용으로 사용. */
    --color-text: #111827;             /* 본문 — 검정 톤 */
    --color-text-strong: #000000;       /* 강조 — 진짜 검정 */
    --color-text-muted: #6b7280;        /* 보조 — slate-500 */
    --color-text-disabled: #9ca3af;     /* 비활성 — slate-400 */
    --color-text-on-primary: #ffffff;

    /* ---------- 배경 ---------- */
    --color-bg: #ffffff;
    --color-bg-alt: #f9fafb;           /* 아주 옅은 회색 (검색바 배경 등) */
    --color-bg-soft: #f8f9fa;
    --color-bg-strong: #f3f4f6;
    --color-bg-disabled: #e9ecef;

    /* ---------- 보더 ---------- */
    --color-border: #e5e7eb;           /* 기본 보더 */
    --color-border-strong: #d1d5db;
    --color-border-soft: #dee2e6;
    --color-border-focus: var(--color-primary);

    /* ---------- 상태 ---------- */
    --color-link: #2563eb;
    --color-link-hover: #1d4ed8;
    --color-error-bg: #fff5f5;
    --color-error-border: #ffcccc;
    --color-success-bg: #ecfdf5;
    --color-warning-bg: #fffbeb;

    /* ---------- 페이지에서 자주 쓰이는 강조/액센트 (Tailwind 계열) ---------- */
    --color-blue-500: #3b82f6;     /* highlight/하이라이트 보더 */
    --color-blue-600: #2563eb;     /* same as link */
    --color-blue-700: #1d4ed8;
    --color-gray-500: #6b7280;     /* same as text-muted */
    --color-gray-700: #374151;     /* same as text */
    --color-gray-900: #1f2937;     /* same as text-strong, agency 검정 버튼 */
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;

    /* ---------- 폰트 (CLAUDE.md 폰트 룰과 1:1) ---------- */
    --font-family-base: "맑은 고딕", "Malgun Gothic", "맑은고딕", "Apple SD Gothic Neo", sans-serif;
    --font-size-base: 12px;            /* 최소/기본 사이즈 — 12px 미만 금지 */
    --font-size-sm: 12px;              /* 보조 텍스트도 12px (CLAUDE.md 룰) */
    --font-size-md: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-h2: 18px;
    --font-size-h1: 20px;

    /* 맑은 고딕은 한글 글리프에서 500/600 단계를 거의 시각적으로 표현하지 않아
       (400 ↔ 700 만 명확히 구분), medium/semibold 토큰 모두 700 으로 정렬해
       weight 적용 여부가 시각적으로 분명해지도록 한다. */
    --font-weight-normal: 400;
    --font-weight-medium: 700;
    --font-weight-semibold: 700;
    --font-weight-bold: 700;

    --line-height-tight: 1.3;
    --line-height-base: 1.5;
    --line-height-loose: 1.7;

    /* ---------- 간격 (4px 기준) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* ---------- 라디우스 ---------- */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-pill: 999px;

    /* ---------- 그림자 ---------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.18);

    /* ---------- z-index ---------- */
    /* 기존 페이지들이 9999 를 광범위하게 사용 중이므로 모달 레이어를 거기에 맞춤. */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-modal-backdrop: 9998;
    --z-modal: 9999;
    --z-popover: 10000;
    --z-tooltip: 10010;
}