@charset "utf-8";

/* ============================================================
   tokens.css — 디자인 토큰 → CSS 변수

   reset.css는 수정하지 않습니다.
   ============================================================ */

:root {
  /* ============ Palette — component/colors 원본 29종 ============ */

  /* Text */
  --text-primary: #121213;
  --text-secondary: #5d5d63;
  --text-disabled: #c7c7c7;

  /* Primary — 이 제품의 베이지 톤 */
  --primary-light: #fbf9f7; /* gnb·사이드바 배경 */
  --primary-main: #f3ebe4; /* hover 배경 */
  --primary-dark: #d8c9bf; /* 보더·구분선·pressed/선택 배경 */

  /* Secondary */
  --secondary-light: #6cbdff;
  --secondary-main: #1293fd;
  --secondary-dark: #0049a2;

  /* Tertiary */
  --tertiary-light: #b18efd;
  --tertiary-main: #774ece;
  --tertiary-dark: #472b82;

  /* Success */
  --success-light: #7deff0;
  --success-main: #00d6d8;
  --success-dark: #0896af;

  /* Warning */
  --warning-light: #ffd48f;
  --warning-main: #ffa440;
  --warning-dark: #ce6f06;

  /* Error */
  --error-light: #ff8f9a;
  --error-main: #ff383c;
  --error-dark: #bd0c0f;

  /* Grey */
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #eeeeee;
  --grey-300: #e0e0e0;
  --grey-400: #c7c7c7;
  --grey-500: #9e9e9e;
  --grey-700: #666666;
  --grey-900: #252525;

  /* ============ Semantic — 용도별 별칭 ============ */
  --color-text-primary: var(--text-primary);
  --color-text-strong: var(--grey-900); /* gnb "/" "20" */
  --color-icon-primary: var(--grey-900);
  --color-icon-disabled: var(--text-disabled);
  --color-bg-white: #ffffff;
  --color-bg-gnb: var(--primary-light); /* top_gnb·sidebar_right 배경 */
  --color-line: var(--primary-dark); /* 보더·ver_line·bt_line 전부 #d8c9bf */
  --color-border-main: var(--grey-400); /* field 테두리 */
  --color-neutral: #333747;

  /* 팔레트에 없는 raw fill */
  --color-bg-canvas: #e6e2df; /* main 뷰어 배경 + 활성 파일탭 */
  --color-bg-thumb-list: var(--primary-main); /* 썸네일 리스트 배경 #f3ebe4 */
  --color-panel-border: #ddd0c7; /* panel_arrow 테두리 */
  --color-thumb-selected-bg: rgba(216, 201, 191, 0.5); /* primary-dark 50% */
  --color-thumb-selected-border: var(--color-neutral); /* #333747 */

  --point: #7c553b; /* 브랜드 포인트 — 챗봇 퀵버튼 */
  --text-assistive: #afafc3; /* placeholder */
  --color-bubble: #5d5753; /* 챗봇 말풍선 */
  --color-dropdown-bg: var(--primary-light); /* #fbf9f7 */
  --color-dropdown-sub-bg: #f5efe9; /* 서브메뉴만 다른 배경 */
  --color-dropdown-hover: rgba(216, 201, 191, 0.6); /* primary-dark 60% */
  --shadow-dropdown:
    0 0.1rem 0.2rem rgba(12, 12, 13, 0.1),
    0 0.1rem 0.2rem rgba(12, 12, 13, 0.05);
  --shadow-alert:
    0 1.6rem 3.2rem -0.4rem rgba(12, 12, 13, 0.1),
    0 0.4rem 0.4rem -0.4rem rgba(12, 12, 13, 0.05);

  /* btn_iconOnly 상태 */
  --color-btn-hover: #f4efec; /* hover — pressed(#d8c9bf)와 구분되는 옅은 톤 */
  --color-btn-pressed: var(--primary-dark); /* #d8c9bf */
  --color-btn-selected: var(--primary-dark); /* pressed와 동일 */

  /* ============ Radius ============ */
  --radius-s: 0.4rem;
  --radius-m: 0.6rem; /* caret형 btn_iconOnly */

  /* ============ Spacing ============ */
  --padding-med: 1.2rem;

  /* ============ Size ============ */
  --gnb-height: 6rem;
  --sidebar-left-width: 14rem;
  --sidebar-right-width: 6rem;
  --footer-height: 3rem;

  /* btn_iconOnly 4종 */
  --btn-size-large: 4.6rem;
  --btn-size-medium: 4rem;
  --btn-size-small: 3.2rem;
  --btn-size-xsmall: 2rem;

  --icon-size: 2rem;
  --icon-size-s: 1.6rem;

  /* ============ Typography ============ */
  --font-family-base: "Pretendard", sans-serif;
  --font-size-base: 1.6rem;
  --font-size-lg: 2rem; /* gnb "/" */
  --font-weight-regular: 400;
  --line-height-body1: 1.4;
}