/* =========================================================
   HAEON UP Design Tokens — B안 「차분한 업무 환경」 (밝은 청회색 사이드바 · 옅은 안내 줄)
   이 파일이 디자인 시스템의 유일한 값 정의 위치입니다.
   - 색상 HEX 값은 이 파일에만 둡니다. 다른 CSS · JS는 var(--…)만 사용합니다.
   - 값을 바꾸면 모든 화면에 반영됩니다. (DESIGN_SYSTEM.md 참고)
   ========================================================= */
:root {
  /* ---------- 브랜드 원색 (직접 쓰지 말고 아래 의미 토큰을 사용) ---------- */
  --brand-navy: #14263D;          /* Primary Navy — 로고 · 작은 강조 요소에만 쓴다 (넓은 배경에는 쓰지 않음) */
  --brand-teal: #0F9F8F;          /* Primary Teal */
  --brand-teal-hover: #0B887B;    /* Teal Hover */
  --brand-teal-soft: #E6F6F3;     /* Teal Soft Background */
  --brand-teal-strong: #0F766E;   /* 흰 배경 위 글자 · 버튼용 (대비 5.5:1) */
  --brand-teal-strong-hover: #115E59;
  --brand-teal-pale: #DCEFEB;     /* 선택된 메뉴 배경 */
  --brand-navy-deep: #102235;     /* 네이비 버튼 hover */

  /* ---------- 중립색 ---------- */
  --neutral-0: #FFFFFF;
  --neutral-50: #F5F7F8;          /* 페이지 배경 */
  --neutral-100: #F1F5F9;         /* Subtle Background */
  --neutral-120: #EEF3F4;         /* 최상단 안내 줄 */
  --neutral-150: #E9EFF1;         /* 사이드바 배경 */
  --neutral-200: #D8E1E5;         /* 테두리 */
  --neutral-400: #94A3B8;         /* Muted Text */
  --neutral-500: #64748B;         /* Secondary Text */
  --neutral-600: #475569;         /* Slate Text */
  --neutral-650: #5B6B75;         /* 사이드바 보조 글자 (사이드바 배경 위 4.8:1) */
  --neutral-700: #40515B;         /* 메뉴 기본 글자 (사이드바 배경 위 7:1) */
  --neutral-800: #263640;         /* 제목 · 본문 글자 */

  /* ---------- 의미(semantic) 색상 — 컴포넌트는 이 토큰만 사용 ---------- */
  --color-primary: var(--brand-teal);                 /* 강조 표시 · 진행 막대 · 선택 표시 · 포커스 */
  --color-primary-hover: var(--brand-teal-hover);
  --color-primary-soft: var(--brand-teal-soft);       /* 강조 배경 */
  --color-primary-strong: var(--brand-teal-strong);   /* 흰 배경 위 틸 글자 · Primary 버튼 배경 */
  --color-primary-strong-hover: var(--brand-teal-strong-hover);
  --color-primary-border: #A7E3DA;
  --color-on-primary: var(--neutral-0);

  --color-navy: var(--brand-navy);                    /* 작은 강조 요소: Secondary 버튼 · 선택 칩 · 단계 번호 · 토스트 */
  --color-navy-hover: var(--brand-navy-deep);
  --color-on-navy: var(--neutral-0);
  --color-on-navy-muted: rgba(255, 255, 255, .72);
  --color-on-dark-hover: rgba(255, 255, 255, .14);
  --color-on-dark-border: rgba(255, 255, 255, .22);
  --color-on-dark-border-hover: rgba(255, 255, 255, .3);

  --color-sidebar: var(--neutral-150);
  --color-sidebar-raised: var(--neutral-0);           /* 사이드바 위의 카드 · 보기 전환 · 건수 */
  --color-sidebar-text: var(--neutral-700);
  --color-sidebar-text-strong: var(--neutral-800);    /* hover · 카드 제목 */
  --color-sidebar-text-muted: var(--neutral-650);
  --color-sidebar-hover: rgba(38, 54, 64, .06);
  --color-sidebar-active-bg: var(--brand-teal-pale);
  --color-sidebar-active-text: var(--brand-teal-strong);   /* 선택 배경 위 4.6:1 */
  --color-sidebar-accent: var(--brand-teal-strong);
  --color-sidebar-divider: var(--neutral-200);
  --color-sidebar-count-bg: var(--brand-navy);              /* 메뉴 건수 뱃지 (작은 강조 요소) */
  --color-sidebar-count-text: var(--neutral-0);
  --color-sidebar-count-active-bg: var(--brand-teal-soft);  /* 선택된 메뉴의 건수 뱃지 — 숫자(진한 청록)와 4.9:1 */
  --color-sidebar-count-active-border: var(--color-primary-border);

  --color-banner: var(--neutral-120);                 /* 최상단 안내 줄 */
  --color-banner-text: var(--neutral-700);

  --color-background: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-100);
  --color-surface-hover: var(--neutral-50);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-400);

  --color-text: var(--neutral-800);
  --color-text-strong: var(--neutral-800);
  --color-text-secondary: var(--neutral-500);
  --color-text-slate: var(--neutral-600);
  --color-text-muted: var(--neutral-400);   /* 비활성 · 장식 전용 — 흰 배경 2.6:1이라 읽어야 하는 글자에는 쓰지 않음 */
  --color-text-on-dark: var(--neutral-0);

  /* ---------- 상태 색상 (색만으로 구분하지 않고 라벨 · 아이콘과 함께 사용) ---------- */
  --color-success: #15803D;      --color-success-bg: #F0FDF4;   --color-success-border: #BBF7D0;
  --color-progress: #0F766E;     --color-progress-bg: #F0FDFA;  --color-progress-border: #99F6E4;
  --color-warning: #B45309;      --color-warning-bg: #FFFBEB;   --color-warning-border: #FDE68A;
  --color-danger: #B91C1C;       --color-danger-bg: #FEF2F2;    --color-danger-border: #FECACA;
  --color-info: #2563EB;         --color-info-bg: #EFF6FF;      --color-info-border: #BFDBFE;
  --color-neutral: var(--neutral-600); --color-neutral-bg: var(--neutral-100);

  /* ---------- 데이터 표시 (차트 · 일정 색 구분) ---------- */
  --color-chart-1: var(--brand-navy);
  --color-chart-2: var(--brand-teal);
  --color-chart-track: var(--neutral-100);

  /* ---------- 업무 메모 색상 (사용자가 고르는 메모 종이색) ---------- */
  --memo-yellow-bg: #FEF9C3;  --memo-yellow-border: #FDE68A;
  --memo-green-bg: #DCFCE7;   --memo-green-border: #BBF7D0;
  --memo-pink-bg: #FCE7F3;    --memo-pink-border: #FBCFE8;
  --memo-purple-bg: #EDE9FE;  --memo-purple-border: #DDD6FE;
  --memo-blue-bg: #E0F2FE;    --memo-blue-border: #BAE6FD;
  --memo-gray-bg: var(--neutral-100); --memo-gray-border: var(--neutral-200);
  --memo-ink: rgba(17, 24, 39, .6);
  --memo-hover: rgba(17, 24, 39, .07);

  /* ---------- 인쇄 문서 (발주서 A4) ---------- */
  --paper: #FFFFFF;
  --paper-ink: #111111;
  --paper-line: #555555;
  --paper-fill: #F3F4F6;
  --color-seal: #DC2626;          /* 직인 인영(붉은색) */

  /* ---------- 타이포그래피 ---------- */
  --font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-size-2xs: 10.5px;
  --font-size-xs: 11.5px;
  --font-size-sm: 12px;
  --font-size-base: 13px;          /* 표 · 입력 · 버튼 */
  --font-size-body: 14px;          /* 본문 기본 */
  --font-size-md: 15px;            /* 카드 제목 */
  --font-size-lg: 18px;            /* 헤더 제목 */
  --font-size-xl: 22px;            /* 지표 숫자 · 큰 제목 */
  --font-size-2xl: 24px;           /* 페이지 제목 */
  --font-size-3xl: 28px;           /* 요약 카드 숫자 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-body: 1.55;
  --line-height-tight: 1.3;

  /* ---------- 간격 (4px 단위) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 모서리 · 테두리 · 그림자 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;
  --border-width: 1px;
  --shadow-card: 0 1px 2px rgba(20, 38, 61, .04);
  --shadow-overlay: 0 8px 24px rgba(20, 38, 61, .14);
  --shadow-focus: 0 0 0 3px rgba(15, 159, 143, .18);
  --overlay-backdrop: rgba(16, 34, 53, .45);
  --focus-ring: 2px solid var(--color-primary-strong);   /* 흰 배경 · 사이드바 배경 모두 3:1 이상 */

  /* ---------- 컨트롤 크기 (터치 영역) ---------- */
  --control-height: 38px;
  --control-height-sm: 32px;
  --control-height-xs: 28px;
  --control-height-lg: 46px;

  /* ---------- 레이아웃 ---------- */
  --sidebar-width: 276px;
  --header-height: 64px;
  --content-max-width: 1480px;
  --content-padding-x: var(--space-8);
  --content-padding-y: var(--space-7);
  --card-padding: var(--space-5);
  --card-gap: var(--space-4);
  --detail-panel-width: 380px;

  /* ---------- 움직임 ---------- */
  --transition-fast: .15s ease;
}