/* ============================================================
   AX Catalog Portal — Design Tokens
   Source: DESIGN-ax-catalog.md v1.0
   Font: Pretendard (KDS v4.0)
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  /* ── Brand ── */
  --brand-red:           #e0282f;
  --brand-red-hover:     #bb1b21;
  --brand-red-pressed:   #8a1418;

  /* ── Fill ── */
  --fill-primary:        #191a1b;
  --fill-primary-hover:  #313235;
  --fill-secondary:      #e9eaee;

  /* ── Text ── */
  --text-primary:        #191a1b;
  --text-secondary:      #55585d;
  --text-tertiary:       #6f737b;
  --text-disabled:       #adb1b9;
  --text-inverse:        #ffffff;
  --text-link:           #005ccc;
  --text-table-body:     #4a4c50;   /* KDS Data Table 본문 셀 전용 (text/secondary-02) */

  /* ── Surface ── */
  --surface-page:        #f5f6fa;
  --surface-card:        #ffffff;
  --surface-sidebar:     #1a1d27;
  --surface-sidebar-active: #252a38;
  --surface-sidebar-bottom: #141720;

  /* ── Border ── */
  --border-default:      #e9eaee;
  --border-table-header: #c7cad1;   /* KDS Data Table 헤더 하단 보더 */
  --border-muted:        #d6d9df;   /* 중간 밝기 보더 (카드 강조 경계) */
  --border-strong:       #b8bdc6;   /* 진한 보더 (입력 강조·구분) */
  --border-input:        #8b8f97;
  --border-focused:      #191a1b;
  --border-error:        #e0282f;

  /* ── Surface (hover/raised 확장) ── */
  --surface-hover:        #f0f1f5;  /* 뉴트럴 hover·미묘한 fill 배경 */
  --surface-hover-accent: #f0f7ff;  /* 테이블 행·링크 hover (블루 틴트) */
  --surface-raised:       #f8f9fb;  /* 테이블 헤더·메타·raised 패널 */

  /* ── Semantic Feedback (뱃지·알림·토스트) ── */
  --success-fill:    #d1fae5;  --success-text:   #065f46;  --success-strong: #0a7c4e;
  --warning-fill:    #fff3cd;  --warning-text:   #856404;
  --info-fill:       #e0f2fe;  --info-text:      #0369a1;
  --presales-fill:   #f0f4ff;  --presales-text:  #3b5bdb;
  --danger-fill:     #fff0f0;  --danger-text:    #c0392b;  --danger-strong:  #d23f3f;  --danger-border: #efd4d6;
  --neutral-badge-fill: #f3f4f6; --neutral-badge-text: #6b7280;
  --accent-teal:     #007f7f;
  --accent-teal-bg:  #e9fbfb;

  /* ── Login 전용 토큰 (로그인 히어로 화면 고유 톤. 앱 본문 토큰과 의도적으로 분리) ── */
  --login-border-hover:   #5f646c;
  --login-panel-title:    #22262b;
  --login-panel-desc:     #767d86;
  --login-btn-text:       #2b3036;
  --login-btn-ghost-text: #7b2428;
  --login-alert-text:     #4f5660;

  /* ── Status Badges ── */
  --status-active-fill:            #e8f5e9;
  --status-active-text:            #2e7d32;
  --status-draft-fill:             #f5f5f5;
  --status-draft-text:             #757575;
  --status-review-fill:            #fff3e0;
  --status-review-text:            #e65100;
  --status-approved-fill:          #e3f2fd;
  --status-approved-text:          #1565c0;
  --status-rejected-fill:          #fce4ec;
  --status-rejected-text:          #b71c1c;
  --status-deactivated-fill:       #fafafa;
  --status-deactivated-text:       #9e9e9e;
  --status-deactivate-review-fill: #f5f5f5;
  --status-deactivate-review-text: #757575;

  /* ── contentType Badges ── */
  --type-product-fill:    #e8f5e9;
  --type-product-text:    #1b5e20;
  --type-consulting-fill: #e3f2fd;
  --type-consulting-text: #0d47a1;
  --type-package-fill:    #f3e5f5;
  --type-package-text:    #4a148c;

  /* ── Target Type Badges (승인 요청) ── */
  --target-product-fill:  #e8f5e9;
  --target-product-text:  #2e7d32;
  --target-proposal-fill: #e3f2fd;
  --target-proposal-text: #1565c0;
  --target-usecase-fill:  #f3e5f5;
  --target-usecase-text:  #6a1b9a;

  /* ── Spacing ── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  40px;   /* 24→32→48 사이 실사용 빈도가 높은 40px 보강 (hero/section 전환폭) */
  --space-xxl:  48px;

  /* ── Spacing Rhythm (여백 위계 — 근접성의 법칙) ──
     숫자가 작을수록 "더 가까운 관계". 대주제 전환 시 큰 값, 하위로 들어갈수록 작은 값.
     프리미티브 위에 관계의 의미를 얹은 시맨틱 레이어 — 값 조정 시 이 토큰만 바꾸면 된다. */
  --gap-label-to-title:     var(--space-xxs); /* 4px  — eyebrow/브레드크럼 → 그 제목 */
  --gap-title-to-body:      var(--space-sm);  /* 12px — 제목 → 설명/요약 */
  --gap-heading-to-content: var(--space-sm);  /* 12px — 소제목 → 섹션 본문 */
  --gap-item-label-to-text: var(--space-xxs); /* 4px  — 카드/블록 내 강조 라벨 → 그 설명 */
  --gap-sibling-item:       var(--space-xs);  /* 8px  — 같은 그룹의 형제 항목 간 */
  --gap-paragraph:          var(--space-sm);  /* 12px — 같은 소주제 내 연속 단락 간 */
  --gap-subsection:         var(--space-lg);  /* 24px — 소주제 그룹 간 */
  --gap-section:            var(--space-2xl); /* 40px — 대주제 섹션 간 */
  --gap-page-region:        var(--space-xxl); /* 48px — 완전히 다른 페이지 영역 간 */

  /* ── Radius ── */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;
  --radius-dialog: 12px;  /* Figma KDS "PC_Basic Popup" 스펙(radius/12) — 다이얼로그 전용 */

  /* ── Layout ── */
  --sidebar-width:        280px;
  --catalog-content-width: 970px;
  --utilbar-height:       68px;
  --content-padding:      24px;
  --table-row-height:     72px;   /* Figma KDS "Data Table" 스펙 실측 */
  --table-header-height:  72px;   /* 위와 동일(KDS는 헤더·바디 모두 72px min-height) */
  --table-cell-padding-x: 20px;   /* KDS density/horizontal-padding */
  --dialog-width:         400px;  /* Figma KDS "PC_Basic Popup" S 사이즈 */

  /* ── Breakpoints (규약) ──
     CSS 변수는 @media 조건식에 쓸 수 없으므로 미디어쿼리 작성 시 아래 값을 직접 사용한다.
     --bp-laptop:   1280px  (이하: 노트북)
     --bp-tablet:   1024px  (이하: 사이드바 레일 전환)
     --bp-tablet-sm: 768px  (이하: 폼/상세 1열 스택, 로그인 브랜딩 숨김)              */

  /* ── Elevation ── */
  --shadow-shallow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-modal:   0 4px 24px rgba(0, 0, 0, 0.16);
  --shadow-dialog:  0 0 40px rgba(19, 20, 21, 0.05), 0 20px 40px rgba(19, 20, 21, 0.1);  /* Figma KDS 다이얼로그 스펙과 실측 일치 */
  --shadow-hover:   0 4px 14px rgba(25, 26, 27, 0.06);  /* 카드·버튼 hover 공용 */

  /* ── Font Size Scale (SSOT) — KDS 역할명으로 통일 ──
     글자 크기 단일 소스. 담당자는 이 값만 조정하면 축약 토큰(--font-*)과
     개별 font-size 참조가 함께 갱신된다. weight/line-height는 별도 유지.
     이름 자체가 KDS 역할을 나타내므로 용도 파악에 별도 주석이 필요 없다. */
  --fs-label4:   10px;  /* KDS Label4 — 아이콘 라벨 */
  --fs-caption:  12px;  /* KDS Caption — 툴팁·보조설명 */
  --fs-label3:   13px;  /* KDS Label3 — 입력 레이블 */
  --fs-body3:    14px;  /* KDS Body3 — 본문 소형 */
  --fs-body2:    15px;  /* KDS Body2/Label2 */
  --fs-body1:    16px;  /* KDS Body1 — 본문(PC 권장) */
  --fs-label1:   17px;  /* KDS Label1 — 버튼 라벨(PC 권장) */
  --fs-title2:   18px;  /* KDS Title2 — 서브 페이지 제목 */
  --fs-title1:   20px;  /* KDS Title1 — 콘텐츠 타이틀 */
  --fs-heading3: 22px;  /* KDS Heading3 — 소제목 */
  --fs-heading2: 24px;  /* KDS Heading2 — 하위 제목 */
  --fs-heading1: 32px;  /* KDS Heading1 — 페이지 상위 제목 */
  --fs-display3: 36px;  /* KDS Display3 */

  /* ── Line Height Scale (SSOT) ──
     KDS(Figma) 실측 근거: body/label/heading 전 스타일이 lineHeight 1.48로 통일,
     극소 라벨(아바타 이니셜 등)만 1.0 예외. --lh-normal(1.48)이 KDS 표준값이며
     신규 컴포넌트는 이 값을 기본으로 사용한다. 나머지는 값 보존을 위해 숫자로 명명. */
  --lh-tight:  1;
  --lh-snug:   1.25;
  --lh-normal: 1.48;   /* ★ KDS 표준 */
  --lh-150:    1.5;
  --lh-158:    1.58;
  --lh-160:    1.6;
  --lh-165:    1.65;
  --lh-170:    1.7;
  --lh-175:    1.75;

  /* ── Typography (축약 토큰 — 위 스케일을 소비) ── */
  --font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;

  --font-page-title:    700 var(--fs-title1)/var(--lh-normal) var(--font-family);
  --font-section-label: 700 var(--fs-body1)/var(--lh-normal) var(--font-family);  /* 실사용처(.catalog-form-v2 .form-section__title)에서 font-size가 title2(18px)로 재정의됨 — 이 토큰의 16px는 그 경우 미적용 */
  --font-heading-md:    700 var(--fs-heading3)/var(--lh-normal) var(--font-family);
  --font-card-title:      600 var(--fs-title2)/var(--lh-normal) var(--font-family);
  --font-body-sm:          500 var(--fs-body2)/var(--lh-normal) var(--font-family);
  --font-body-sm-strong:   600 var(--fs-body2)/var(--lh-normal) var(--font-family);
  --font-table-header:  600 var(--fs-body3)/var(--lh-normal) var(--font-family);  /* KDS: 14px SemiBold */
  --font-label:         600 var(--fs-label3)/var(--lh-normal) var(--font-family);
  --font-caption:       500 var(--fs-caption)/var(--lh-normal) var(--font-family);
  --font-nav-item:      500 var(--fs-body3)/var(--lh-normal) var(--font-family);
  --font-nav-active:    700 var(--fs-body3)/var(--lh-normal) var(--font-family);
  --font-logo:          700 var(--fs-body1)/var(--lh-tight)  var(--font-family);
  --font-supporting:          400 var(--fs-label3)/var(--lh-normal) var(--font-family);
}