/* ==========================================================================
   퍼포먼스웨이컨설팅 디자인 시스템 — 디자인 토큰
   출처: Figma "퍼포먼스컨설팅 디자인 시스템가이드" > Color (node 1:175)
   - 이 파일의 값만 Figma와 동기화한다. 다른 CSS는 아래 변수만 사용한다.
   - 컴포넌트에는 아래쪽의 "시맨틱 토큰"을 우선 사용한다.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. 기본 팔레트 (Figma 색상 단계 그대로)
     ------------------------------------------------------------------------ */

  /* Common */
  --color-common-0: #FFFFFF;
  --color-common-100: #111111;

  /* Primary — 버튼, 활성 상태 등 UI의 주요 구성 요소 */
  --color-primary-5: #FFF7F2;
  --color-primary-10: #FDE7D6;
  --color-primary-20: #F7C7A4;
  --color-primary-30: #F3A86B;
  --color-primary-40: #E98A3F;
  --color-primary-50: #E97E26; /* Main */
  --color-primary-60: #F06720;
  --color-primary-70: #F64F19;
  --color-primary-80: #D44511;
  --color-primary-90: #9C3611;
  --color-primary-100: #67260F;

  /* Secondary — 필터, 칩 등 보조 구성 요소 */
  --color-secondary-5: #F5F6F8; /* Background */
  --color-secondary-10: #E4E7ED;
  --color-secondary-20: #C7CCD7;
  --color-secondary-30: #A0A8B9;
  --color-secondary-40: #737E95;
  --color-secondary-50: #4A5165; /* Main */
  --color-secondary-60: #3D4355;
  --color-secondary-70: #303647;
  --color-secondary-80: #242A39;
  --color-secondary-90: #191F2D;
  --color-secondary-100: #101520;

  /* Grayscale — 배경, 텍스트, 선 */
  --color-gray-0: #FFFFFF;
  --color-gray-5: #F6F6F6;   /* Background */
  --color-gray-10: #F0F0F0;  /* Background */
  --color-gray-20: #DDDDDD;  /* Disabled */
  --color-gray-30: #C6C6C6;  /* Border */
  --color-gray-40: #B0B0B0;
  --color-gray-50: #999999;  /* Text-disabled */
  --color-gray-60: #808080;  /* Placeholder */
  --color-gray-70: #666666;  /* Text-detail, Icon */
  --color-gray-80: #4A4A4A;
  --color-gray-90: #333333;
  --color-gray-100: #111111; /* Text-main, Icon */

  /* System — Warning (경고, 이상 징후, 점검 필요) */
  --color-warning-5: #FFF8E9;  /* Surface */
  --color-warning-10: #FFEAC1; /* Border */
  --color-warning-20: #FFE2A7;
  --color-warning-30: #FFD47C;
  --color-warning-40: #FFC550;
  --color-warning-50: #FFB724; /* Main */
  --color-warning-60: #98690A; /* Text */
  --color-warning-70: #66490E;
  --color-warning-80: #4C370B;
  --color-warning-90: #332507;

  /* System — Danger (오류, 금지, 위험, 삭제, 불가) */
  --color-danger-5: #FFF0F3;
  --color-danger-10: #FFDBDF;
  --color-danger-20: #FFA1AC;
  --color-danger-30: #FF7686;
  --color-danger-40: #FF576A;
  --color-danger-50: #FF3A5B;
  --color-danger-60: #F51441;
  --color-danger-70: #E60532;
  --color-danger-80: #D30831;
  --color-danger-90: #C10027;

  /* System — Success (성공, 완료, 진행) */
  --color-success-5: #EEF7F0;
  --color-success-10: #CEE9D4;
  --color-success-20: #B2DCBB;
  --color-success-30: #8CCA99;
  --color-success-40: #33A14B;
  --color-success-50: #008A1E;
  --color-success-60: #006E18;
  --color-success-70: #005312;
  --color-success-80: #00370C;
  --color-success-90: #002207;

  /* System — Information (정보 제공, 강조) */
  --color-info-5: #E9F0FF;
  --color-info-10: #D4E1FF;
  --color-info-20: #A9C3FF;
  --color-info-30: #7DA4FF;
  --color-info-40: #5286FF;
  --color-info-50: #2768FF;
  --color-info-60: #1F53CC;
  --color-info-70: #173E99;
  --color-info-80: #0C1F4D;
  --color-info-90: #040A1A;

  /* Palette — Key color 외 추가 색상이 필요할 때 우선 사용 */
  /* Blue는 Figma에서 0~100 단계로 표기되어 있음 (다른 팔레트는 5~90) */
  --color-blue-0: #F4F6FF;
  --color-blue-10: #E1E7FF;
  --color-blue-20: #C3CFFA;
  --color-blue-30: #9EAFE9;
  --color-blue-40: #748CD1;
  --color-blue-50: #4B66B1;
  --color-blue-60: #244192;
  --color-blue-70: #00166F;
  --color-blue-80: #001157;
  --color-blue-90: #000C3F;
  --color-blue-100: #000729;

  --color-teal-5: #E7FDFD;
  --color-teal-10: #CEFBFB;
  --color-teal-20: #9DF6F6;
  --color-teal-30: #6DF2F2;
  --color-teal-40: #3BEDED;
  --color-teal-50: #15DFDF;
  --color-teal-60: #03C4C4;
  --color-teal-70: #078C8C;
  --color-teal-80: #045D5D;
  --color-teal-90: #022F2F;

  --color-lime-5: #F7FFEA;
  --color-lime-10: #EEFED6;
  --color-lime-20: #DEFFAB;
  --color-lime-30: #CEFE83;
  --color-lime-40: #BCF95D;
  --color-lime-50: #A1F524;
  --color-lime-60: #8EDD13;
  --color-lime-70: #699B1C;
  --color-lime-80: #476912;
  --color-lime-90: #253709;

  --color-violet-5: #F4EFFA;
  --color-violet-10: #DED1F1;
  --color-violet-20: #BDA2E3;
  --color-violet-30: #9B74D4;
  --color-violet-40: #7A45C6;
  --color-violet-50: #5917B8;
  --color-violet-60: #471293;
  --color-violet-70: #350E6E;
  --color-violet-80: #24094A;
  --color-violet-90: #120525;

  /* Alpha — #111111 기반 5단계 투명도 */
  --color-alpha-10: rgba(17, 17, 17, 0.10);  /* 흰 배경 위 #DBDBDB */
  --color-alpha-25: rgba(17, 17, 17, 0.25);  /* 흰 배경 위 #B9B9B9 */
  --color-alpha-55: rgba(17, 17, 17, 0.55);  /* 흰 배경 위 #767676 */
  --color-alpha-75: rgba(17, 17, 17, 0.75);  /* 흰 배경 위 #494949 */
  --color-alpha-100: rgba(17, 17, 17, 1);    /* #111111 */

  /* ------------------------------------------------------------------------
     2. 시맨틱 토큰 (Figma "Usage"와 각 색상의 용도 표시 기준)
     ------------------------------------------------------------------------ */

  /* Brand */
  --color-brand-primary: var(--color-primary-50);
  --color-brand-secondary: var(--color-secondary-50);

  /* Text */
  --color-text-main: var(--color-gray-100);        /* 제목, 본문 */
  --color-text-detail: var(--color-gray-70);       /* 보조 설명 */
  --color-text-disabled: var(--color-gray-50);
  --color-text-placeholder: var(--color-gray-60);
  --color-text-inverse: var(--color-gray-0);       /* 어두운 배경 위 텍스트 */

  /* Icon */
  --color-icon-main: var(--color-gray-100);
  --color-icon-detail: var(--color-gray-70);

  /* Background */
  --color-bg-base: var(--color-gray-0);
  --color-bg-subtle: var(--color-gray-5);
  --color-bg-muted: var(--color-gray-10);
  --color-bg-secondary: var(--color-secondary-5);
  --color-bg-disabled: var(--color-gray-20);
  --color-bg-dimmed: var(--color-alpha-75);        /* 모달·팝업 뒤 */
  --color-bg-layout: var(--color-secondary-10);    /* 콘텐츠 영역 뒤 배경 (#E4E7ED) */
  --color-bg-footer: var(--color-secondary-5);     /* 푸터 배경 (#F5F6F8) */
  --color-bg-gnb: var(--color-secondary-5);        /* 사이드 메뉴(GNB) 배경 (#F5F6F8) */

  /* Border */
  --color-border-default: var(--color-gray-30);    /* 입력창 기본 상태 */
  --color-border-strong: var(--color-gray-40);     /* 콘텐츠 박스 테두리 */
  --color-border-focus: var(--color-gray-100);     /* 입력창 활성화 시 */

  /* Button — Primary */
  --color-btn-primary-bg: var(--color-primary-50);          /* Normal */
  --color-btn-primary-bg-hover: var(--color-primary-60);    /* Hover */
  --color-btn-primary-bg-pressed: var(--color-primary-70);  /* Pressed, Selected */
  --color-btn-primary-text: var(--color-gray-0);
  --color-btn-disabled-bg: var(--color-gray-20);
  --color-btn-disabled-text: var(--color-gray-50);

  /* Status (Main / Text / Surface / Border) */
  --color-warning-main: var(--color-warning-50);
  --color-warning-text: var(--color-warning-60);
  --color-warning-surface: var(--color-warning-5);
  --color-warning-border: var(--color-warning-10);

  --color-danger-main: var(--color-danger-50);
  --color-danger-text: var(--color-danger-60);
  --color-danger-surface: var(--color-danger-5);
  --color-danger-border: var(--color-danger-10);

  --color-success-main: var(--color-success-50);
  --color-success-text: var(--color-success-60);
  --color-success-surface: var(--color-success-5);
  --color-success-border: var(--color-success-10);

  --color-info-main: var(--color-info-50);
  --color-info-text: var(--color-info-60);
  --color-info-surface: var(--color-info-5);
  --color-info-border: var(--color-info-10);

  /* ------------------------------------------------------------------------
     3. 타이포그래피
     출처: Figma 디자인 시스템가이드 > Typography (node 57:2611)
     - 화면에서는 base.css의 .text-* 클래스를 쓴다.
     - Figma에서 이름이 겹치는 스타일은 이름 뒤에 크기(-15, -14)를 붙여 구분했다.
     ------------------------------------------------------------------------ */

  /* 기본 값 */
  --font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-140: 1.4;
  --line-height-146: 1.46;
  --line-height-150: 1.5;

  --letter-spacing-tight: -0.025em; /* -2.5% */
  --letter-spacing-none: 0;

  /* Display — 메인 지표 숫자 */
  --text-display-lg-size: 32px;
  --text-display-lg-weight: var(--font-weight-bold);
  --text-display-lg-line-height: var(--line-height-150);
  --text-display-lg-letter-spacing: var(--letter-spacing-tight);

  --text-display-md-size: 24px;
  --text-display-md-weight: var(--font-weight-bold);
  --text-display-md-line-height: var(--line-height-150);
  --text-display-md-letter-spacing: var(--letter-spacing-tight);

  --text-display-sm-size: 22px;
  --text-display-sm-weight: var(--font-weight-bold);
  --text-display-sm-line-height: var(--line-height-146);
  --text-display-sm-letter-spacing: var(--letter-spacing-tight);

  --text-display-xs-size: 18px;
  --text-display-xs-weight: var(--font-weight-bold);
  --text-display-xs-line-height: var(--line-height-146);
  --text-display-xs-letter-spacing: var(--letter-spacing-tight);

  /* Heading */
  --text-heading-md-size: 22px;
  --text-heading-md-weight: var(--font-weight-bold);
  --text-heading-md-line-height: var(--line-height-146);
  --text-heading-md-letter-spacing: var(--letter-spacing-tight);

  --text-heading-sm-size: 18px;
  --text-heading-sm-weight: var(--font-weight-medium);
  --text-heading-sm-line-height: var(--line-height-146);
  --text-heading-sm-letter-spacing: var(--letter-spacing-tight);

  /* Title */
  --text-title-lg-size: 20px;
  --text-title-lg-weight: var(--font-weight-semibold);
  --text-title-lg-line-height: var(--line-height-150);
  --text-title-lg-letter-spacing: var(--letter-spacing-tight);

  --text-title-md-size: 18px;
  --text-title-md-weight: var(--font-weight-semibold);
  --text-title-md-line-height: var(--line-height-146);
  --text-title-md-letter-spacing: var(--letter-spacing-tight);

  --text-title-sm-size: 16px;
  --text-title-sm-weight: var(--font-weight-semibold);
  --text-title-sm-line-height: var(--line-height-150);
  --text-title-sm-letter-spacing: var(--letter-spacing-tight);

  /* Body */
  --text-body-lg-size: 18px;
  --text-body-lg-weight: var(--font-weight-medium);
  --text-body-lg-line-height: var(--line-height-146);
  --text-body-lg-letter-spacing: var(--letter-spacing-tight);

  --text-body-md-size: 15px;
  --text-body-md-weight: var(--font-weight-medium);
  --text-body-md-line-height: var(--line-height-146);
  --text-body-md-letter-spacing: var(--letter-spacing-tight);

  --text-body-md-14-size: 14px;
  --text-body-md-14-weight: var(--font-weight-medium);
  --text-body-md-14-line-height: var(--line-height-146);
  --text-body-md-14-letter-spacing: var(--letter-spacing-tight);

  --text-body-md-14-regular-size: 14px;
  --text-body-md-14-regular-weight: var(--font-weight-regular);
  --text-body-md-14-regular-line-height: var(--line-height-146);
  --text-body-md-14-regular-letter-spacing: var(--letter-spacing-tight);

  /* Label — 버튼, 칩, 태그, 필터, 입력창 등 구성 요소 내부 텍스트 */
  --text-label-xl-size: 18px;
  --text-label-xl-weight: var(--font-weight-bold);
  --text-label-xl-line-height: var(--line-height-146);
  --text-label-xl-letter-spacing: var(--letter-spacing-tight);

  --text-label-lg-size: 16px;
  --text-label-lg-weight: var(--font-weight-medium);
  --text-label-lg-line-height: var(--line-height-146);
  --text-label-lg-letter-spacing: var(--letter-spacing-tight);

  --text-label-md-size: 15px;
  --text-label-md-weight: var(--font-weight-medium);
  --text-label-md-line-height: var(--line-height-146);
  --text-label-md-letter-spacing: var(--letter-spacing-tight);

  --text-label-md-14-semibold-size: 14px;
  --text-label-md-14-semibold-weight: var(--font-weight-semibold);
  --text-label-md-14-semibold-line-height: var(--line-height-146);
  --text-label-md-14-semibold-letter-spacing: var(--letter-spacing-tight);

  --text-label-md-14-size: 14px;
  --text-label-md-14-weight: var(--font-weight-medium);
  --text-label-md-14-line-height: var(--line-height-146);
  --text-label-md-14-letter-spacing: var(--letter-spacing-tight);

  --text-label-sm-size: 13px;
  --text-label-sm-weight: var(--font-weight-medium);
  --text-label-sm-line-height: var(--line-height-140);
  --text-label-sm-letter-spacing: var(--letter-spacing-tight);

  --text-label-xs-size: 12px;
  --text-label-xs-weight: var(--font-weight-semibold);
  --text-label-xs-line-height: var(--line-height-146);
  --text-label-xs-letter-spacing: var(--letter-spacing-none);

  /* Detail — 보조 정보, 가이드, 차트 수치 */
  --text-detail-lg-size: 15px;
  --text-detail-lg-weight: var(--font-weight-medium);
  --text-detail-lg-line-height: var(--line-height-146);
  --text-detail-lg-letter-spacing: var(--letter-spacing-tight);

  --text-detail-md-size: 14px;
  --text-detail-md-weight: var(--font-weight-medium);
  --text-detail-md-line-height: var(--line-height-146);
  --text-detail-md-letter-spacing: var(--letter-spacing-none);

  --text-detail-sm-size: 13px;
  --text-detail-sm-weight: var(--font-weight-medium);
  --text-detail-sm-line-height: var(--line-height-140);
  --text-detail-sm-letter-spacing: var(--letter-spacing-tight);

  --text-detail-xs-size: 12px;
  --text-detail-xs-weight: var(--font-weight-semibold);
  --text-detail-xs-line-height: var(--line-height-146);
  --text-detail-xs-letter-spacing: var(--letter-spacing-none);

  /* ------------------------------------------------------------------------
     4. 간격 (Spacing)
     출처: Figma 디자인 시스템가이드 > Spacing (node 54:2547)
     - 8px의 배수를 기본으로, 상황에 따라 4px의 배수를 사용한다.
     - margin, padding, gap에 사용한다.
     ------------------------------------------------------------------------ */
  --spacing-0: 0;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 8px;
  --spacing-4: 12px;
  --spacing-5: 16px;
  --spacing-6: 20px;
  --spacing-7: 24px;
  --spacing-8: 32px;
  --spacing-9: 40px;
  --spacing-10: 48px;

  /* ------------------------------------------------------------------------
     5. 모서리 둥글기 (Radius)
     출처: Figma 디자인 시스템가이드 > Radius (node 54:2041)
     - 컴포넌트 크기별 권장 값은 docs/design-system/spacing-radius.md 참고
     ------------------------------------------------------------------------ */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  --radius-7: 20px;
  --radius-8: 24px;
  --radius-9: 40px;

  /* ------------------------------------------------------------------------
     6. 레이아웃
     출처: Figma 디자인 시스템가이드 > Layout (node 53:1415, 1920×1080 기준)
     ------------------------------------------------------------------------ */
  --layout-topbar-height: 60px;
  --layout-gnb-width: 76px;
  --layout-gnb-width-collapsed: 56px; /* 아이콘만 표시할 때 */
  --layout-footer-height: 58px;
  --layout-content-padding: var(--spacing-6); /* 20px */
  --layout-corner-radius: var(--radius-8);    /* Topbar 왼쪽 아래 곡선 24px */

  /* 그림자 — Figma Effect 스타일(Shadow/Normal 등)의 값을 받기 전까지 임시 값 */
  --shadow-normal: 0 2px 8px var(--color-alpha-10);
}