/*============================================================
  Project   : LeenleeERP
  File      : ERPVariables.css
  Version   : V3.0
  Date      : 2026-07-22
  Purpose   : LeenleeERP UI Framework 공통 디자인 토큰 정의

  변경사항
  ------------------------------------------------------------
  V3.0
  - UI Framework V1.0 최종 디자인 토큰 확정
  - 버튼·입력·그리드·상태표시·대화상자 크기 토큰 통합
  - Focus, Dialog Shadow, Overlay 토큰 추가
  - 초기 공통 컴포넌트와의 호환 별칭 추가

  V2.1
  - 상단 업무영역 세로 밀도 및 그리드 가독성 보완
============================================================*/

:root {
    /* Brand */
    --erp-color-primary: #2f705a;
    --erp-color-primary-hover: #285f4d;
    --erp-color-primary-active: #234f41;
    --erp-color-primary-soft: #e8f1ec;
    --erp-color-primary-light: #c7d8cf;
    --erp-color-secondary: #6d7a75;
    --erp-color-secondary-light: #f3f5f4;
    --erp-color-danger: #a54141;
    --erp-color-danger-hover: #8f3636;
    --erp-color-danger-soft: #f9eeee;
    --erp-color-warning: #9b6c13;
    --erp-color-warning-soft: #fff7e6;
    --erp-color-success: #2f705a;
    --erp-color-success-soft: #edf7f2;
    --erp-color-info: #3c6f8f;
    --erp-color-info-soft: #edf5f9;
    /* Surface */
    --erp-color-canvas: #f5f7f6;
    --erp-color-surface: #ffffff;
    --erp-color-surface-muted: #fafcfb;
    --erp-color-surface-hover: #f2f7f4;
    --erp-color-surface-selected: #dcebe4;
    /* Text */
    --erp-color-text-primary: #283932;
    --erp-color-text-secondary: #697771;
    --erp-color-text-muted: #82908a;
    --erp-color-text-disabled: #a6afab;
    --erp-color-text-inverse: #ffffff;
    /* Border and Focus */
    --erp-color-border: #d8e2dd;
    --erp-color-border-soft: #e7edea;
    --erp-color-border-strong: #bfd0c7;
    --erp-color-focus-ring: rgb(47 112 90 / 32%);
    /* Typography */
    --erp-font-family: "Pretendard", "Noto Sans KR", "Segoe UI", Arial, sans-serif;
    --erp-font-size-xs: 10px;
    --erp-font-size-sm: 11px;
    --erp-font-size-md: 12px;
    --erp-font-size-base: 13px;
    --erp-font-size-lg: 14px;
    --erp-font-size-xl: 16px;
    --erp-font-size-2xl: 20px;
    --erp-font-size-3xl: clamp(22px, 2vw, 30px);
    --erp-font-weight-normal: 400;
    --erp-font-weight-medium: 500;
    --erp-font-weight-semibold: 700;
    --erp-font-weight-bold: 800;
    --erp-line-height-tight: 1.25;
    --erp-line-height-base: 1.5;
    /* Spacing */
    --erp-space-1: 4px;
    --erp-space-2: 8px;
    --erp-space-3: 12px;
    --erp-space-4: 16px;
    --erp-space-5: 20px;
    --erp-space-6: 24px;
    --erp-space-7: 28px;
    --erp-space-8: 32px;
    --erp-page-gap: 18px;
    --erp-section-gap: 14px;
    --erp-button-gap: 8px;
    --erp-panel-padding: 14px 16px;
    --erp-panel-padding-compact: 13px 16px;
    /* Radius */
    --erp-radius-sm: 6px;
    --erp-radius-md: 8px;
    --erp-radius-lg: 10px;
    --erp-radius-xl: 12px;
    --erp-radius-round: 999px;
    /* Shadow */
    --erp-shadow-xs: 0 2px 10px rgb(33 63 51 / 4%);
    --erp-shadow-sm: 0 5px 15px rgb(35 75 59 / 10%);
    --erp-shadow-button-hover: 0 5px 14px rgb(35 75 59 / 12%);
    --erp-shadow-md: 0 8px 24px rgb(25 50 40 / 10%);
    --erp-shadow-dialog: 0 22px 60px rgb(15 34 26 / 24%);
    /* Component Sizes */
    --erp-button-height-sm: 32px;
    --erp-button-height-md: 36px;
    --erp-button-height-lg: 44px;
    --erp-button-icon-size: 16px;
    --erp-input-height: 36px;
    /* ERP 전체 입력필드 폭 규격. 화면에서는 px를 직접 지정하지 않습니다. */
    --erp-field-width-date: 150px;
    --erp-field-width-time: 150px;
    --erp-field-width-short: 75px;
    --erp-field-width-standard: 150px;
    --erp-field-width-keyword: 300px;
    --erp-field-width-wide: 450px;
    --erp-table-header-height: 40px;
    --erp-table-row-height: 38px;
    --erp-table-cell-vertical-padding: 7px;
    --erp-table-cell-horizontal-padding: 10px;
    --erp-status-height: 38px;
    /* Animation */
    --erp-transition-fast: 0.12s ease;
    --erp-transition-base: 0.18s ease;
    /* Z-Index */
    --erp-z-sticky: 3;
    --erp-z-overlay: 100;
    --erp-z-dialog: 1000;
    --erp-z-toast: 1100;
    /*========================================================
      V1 공통 컴포넌트 호환 별칭
      새 코드는 위의 --erp-color-* 토큰 사용을 원칙으로 합니다.
    ========================================================*/
    --erp-primary: var(--erp-color-primary);
    --erp-primary-hover: var(--erp-color-primary-hover);
    --erp-primary-border: var(--erp-color-primary-light);
    --erp-primary-soft: var(--erp-color-primary-soft);
    --erp-border-color: var(--erp-color-border);
    --erp-surface: var(--erp-color-surface);
    --erp-surface-subtle: var(--erp-color-surface-muted);
    --erp-text: var(--erp-color-text-primary);
    --erp-text-strong: var(--erp-color-text-primary);
    --erp-text-muted: var(--erp-color-text-muted);
    --erp-warning: var(--erp-color-warning);
    --erp-danger: var(--erp-color-danger);
    --erp-danger-border: var(--erp-color-danger);
    --erp-danger-subtle: var(--erp-color-danger-soft);
    --erp-focus-ring: var(--erp-color-focus-ring);
}