/* ============================================================
   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;

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

  /* ── Border ── */
  --border-default:      #e9eaee;
  --border-input:        #8b8f97;
  --border-focused:      #191a1b;
  --border-error:        #e0282f;

  /* ── 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-xxl:  48px;

  /* ── Radius ── */
  --radius-none: 0px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --sidebar-width:        280px;
  --catalog-content-width: 970px;
  --utilbar-height:       68px;
  --content-padding:      24px;
  --table-row-height:     52px;
  --table-header-height:  44px;

  /* ── 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);

  /* ── Typography ── */
  --font-family: 'Pretendard', 'Noto Sans KR', -apple-system, sans-serif;

  --font-page-title:    700 20px/1.48 var(--font-family);
  --font-section-title: 700 16px/1.48 var(--font-family);
  --font-heading-md:    700 22px/1.48 var(--font-family);
  --font-title-md:      600 18px/1.48 var(--font-family);
  --font-body:          500 15px/1.48 var(--font-family);
  --font-body-strong:   600 15px/1.48 var(--font-family);
  --font-table-header:  600 13px/1.48 var(--font-family);
  --font-label:         600 13px/1.48 var(--font-family);
  --font-caption:       500 12px/1.48 var(--font-family);
  --font-nav-item:      500 14px/1.48 var(--font-family);
  --font-nav-active:    700 14px/1.48 var(--font-family);
  --font-logo:          700 16px/1.0  var(--font-family);
  --font-meta:          400 13px/1.48 var(--font-family);
}
