/* ============================================================
   Peta4PL Design Tokens — Hope UI 기반
   출처: Hope/dashboard-html-css/css/global.css :root
   시맨틱 이름으로 재정의 (원본은 --_3a57e8-primary 형태라 사용 불편)
   ============================================================ */

:root {
    /* ── Brand (메인색 #00aca8 청록) ──
       틴트/음영은 color-mix 로 --h-primary 에서 파생 → 업체 브랜딩(JS가 --h-primary 덮음)이
       hover·active·옅은 배경까지 자동으로 따라온다. (미지원 브라우저는 위의 고정값 사용) */
    --h-primary: #00aca8;
    --h-primary-dark: #008783;
    --h-primary-dark: color-mix(in srgb, var(--h-primary) 78%, #000);
    --h-primary-darker: #00504e;
    --h-primary-darker: color-mix(in srgb, var(--h-primary) 46%, #000);
    --h-primary-light: #8fdedb;
    --h-primary-light: color-mix(in srgb, var(--h-primary) 44%, #fff);
    --h-primary-subtle: #e5f6f6;    /* 옅은 배경 (hover 등) */
    --h-primary-subtle: color-mix(in srgb, var(--h-primary) 10%, #fff);
    --h-primary-100: #b3e8e6;
    --h-primary-100: color-mix(in srgb, var(--h-primary) 26%, #fff);
    --h-accent: #369bff;

    /* ── Status ──
       주의: primary 가 청록이므로 info 는 파랑으로 분리해 의미가 겹치지 않게 한다 */
    --h-success: #1aa053;
    --h-success-dark: #14833f;
    --h-success-light: #d5ebdf;

    --h-warning: #f16a1b;
    --h-warning-alt: #faa938;
    --h-warning-dark: #b24400;
    --h-warning-light: #fce1d1;

    --h-danger: #c03221;
    --h-danger-light: #f2d6d3;

    --h-info: #2e7cf6;
    --h-info-dark: #1b5fd0;
    --h-info-light: #dcebfe;

    --h-pending: #ffd329;

    /* ── Text ── 회색 글씨 가시성 개선: muted/faint 를 한 단계씩 어둡게 */
    --h-text: #232d42;
    --h-text-strong: #04040b;
    --h-text-muted: #5a6474;    /* 이전 #8a92a6 — 본문 위 대비 7:1 수준 */
    --h-text-faint: #8a92a6;    /* 이전 #adb5bd — placeholder/비활성 전용 */
    --h-text-on-dark: #fff;

    /* ── Surface / Border ── */
    --h-bg: #fbfbfb;
    --h-surface: #fff;
    --h-surface-alt: #f8f9fc;
    --h-border: #e9ecef;
    --h-border-strong: #e3e3e3;

    /* ── Sidebar ── Hope 원본 구조: 흰 배경 + 브랜드색 활성 메뉴 */
    --h-sidebar-bg: #fff;
    --h-sidebar-text: #5a6474;
    --h-sidebar-hover-bg: var(--h-primary-subtle);
    --h-sidebar-active-bg: var(--h-primary);
    --h-sidebar-active-text: #fff;
    --h-sidebar-width: 257px;
    --h-sidebar-width-sm: 80px;
    --h-header-height: 73px;

    /* ── Shape ── */
    --h-radius: 8px;
    --h-radius-sm: 6px;
    --h-radius-lg: 16px;
    --h-radius-pill: 100px;

    /* ── Elevation (Hope: 0 10px 30px rgba(17,38,146,.05)) ── */
    --h-shadow: 0 10px 30px 0 rgba(17, 38, 146, .05);
    --h-shadow-sm: 0 4px 12px 0 rgba(17, 38, 146, .04);
    --h-shadow-lg: 0 16px 48px 0 rgba(17, 38, 146, .12);

    /* ══ Spacing ══ 4px 기반 스케일. 여백은 반드시 이 값들만 쓴다. */
    --h-s1: 4px;
    --h-s2: 8px;
    --h-s3: 12px;
    --h-s4: 16px;
    --h-s5: 20px;
    --h-s6: 24px;
    --h-s8: 32px;
    --h-s10: 40px;

    /* 컨트롤(버튼·인풋) — 높이를 40/30/48px로 맞추기 위한 값
       높이 = padding*2 + line-height + border*2 */
    --h-ctrl-py: 9px;
    --h-ctrl-px: 16px;
    --h-ctrl-line: 20px;

    --h-ctrl-py-sm: 5px;
    --h-ctrl-px-sm: 12px;
    --h-ctrl-line-sm: 18px;

    --h-ctrl-py-lg: 13px;
    --h-ctrl-px-lg: 24px;

    /* 면(카드·모달·테이블) 공통 여백 */
    --h-pad-card: var(--h-s6);      /* 카드/모달 본문 24px */
    --h-pad-bar-y: var(--h-s5);     /* 헤더·푸터 바 세로 20px */
    --h-pad-cell-y: var(--h-s3);    /* 표 셀 12px */
    --h-pad-cell-x: var(--h-s4);    /* 표 셀 16px */
    --h-pad-page: var(--h-s8);      /* 페이지 좌우 32px */

    /* 구버전 별칭 */
    --h-gap-sm: var(--h-s4);
    --h-gap-md: var(--h-s8);

    /* ── Typography ── */
    --h-font: "Inter", "Pretendard", "Pretendard Variable", -apple-system,
        BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", "Segoe UI",
        "Noto Sans KR", Roboto, sans-serif;
    --h-font-display: "Poppins", var(--h-font);

    /* ── Motion ── */
    --h-transition: .18s cubic-bezier(.4, 0, .2, 1);
}