/*
 * 농부사전 디자인 토큰 (Design Tokens)
 * ------------------------------------------------------------------
 * Figma 파일 "농부사전 — 화면 디자인" 에서 추출.
 * - 색/그림자: Figma Variables 기준 (정확)
 * - 타이포/간격/반경: 화면 CSS에서 추출 (11개 화면 대조)
 * 단일 모드(라이트) 기준. 다크모드 추가 시 [data-theme="dark"] 블록으로 확장.
 *
 * 사용법: color: var(--color-fg-brand); padding: var(--space-5);
 * 원칙: 화면/컴포넌트 CSS에서는 primitive(--color-carrot-600)보다
 *       가능하면 semantic(--color-fg-brand)을 쓰세요. 브랜드 변경에 강해집니다.
 */

:root {
  /* ============================================================
   * 1. COLOR — Primitive (원시 팔레트)
   * ============================================================ */

  /* Gray */
  --color-gray-00:   #FFFFFF;
  --color-gray-100:  #F7F8F9;
  --color-gray-200:  #F3F4F5;
  --color-gray-300:  #EEEFF1;
  --color-gray-400:  #DCDEE3;
  --color-gray-450:  #D7DAE0;
  --color-gray-500:  #D1D3D8;
  --color-gray-600:  #B0B3BA;
  --color-gray-700:  #868B94;
  --color-gray-800:  #555D6D;
  --color-gray-900:  #2A3038;
  --color-gray-1000: #1A1C20;

  /* Carrot (brand) */
  --color-carrot-100: #FFF0EA;
  --color-carrot-200: #FFE3D8;
  --color-carrot-400: #FFB293;
  --color-carrot-500: #FF885E;
  --color-carrot-600: #FF540F;
  --color-carrot-800: #BD3A08;

  /* Status */
  --color-red-50:    #FDEEEC;
  --color-red-500:   #E8402C;
  --color-red-600:   #D62F1C;
  --color-green-50:  #EAFAF0;
  --color-green-600: #12894A;
  --color-blue-500:  #1F75D9;

  /* Brand partner */
  --color-kakao: #FEE500;

  /* ============================================================
   * 2. COLOR — Semantic (role/*) — 화면에서 이걸 쓰세요
   * ============================================================ */

  /* Foreground (text/icon) */
  --color-fg:          var(--color-gray-900); /* 기본 본문 */
  --color-fg-muted:    var(--color-gray-800); /* 보조 텍스트 */
  --color-fg-subtle:   var(--color-gray-700); /* 캡션/placeholder */
  --color-fg-brand:    var(--color-carrot-600);
  --color-fg-on-brand: var(--color-gray-00);  /* 브랜드 배경 위 텍스트 */
  --color-fg-critical: var(--color-red-600);
  --color-fg-success:  var(--color-green-600);
  --color-fg-info:     var(--color-blue-500); /* 순위 하락 등 중립 지표 */
  --color-fg-faint:    var(--color-gray-600); /* 취소선 정가 등 최저 강조 */

  /* Background */
  --color-bg:          var(--color-gray-00);  /* 기본 레이어 */
  --color-bg-muted:    var(--color-gray-100); /* 섹션 구분(8px 띠) */
  --color-bg-subtle:   var(--color-gray-200); /* 칩/썸네일 배경 */
  --color-bg-brand:    var(--color-carrot-100); /* 브랜드 연한 배경(배너) */
  --color-bg-brand-solid: var(--color-carrot-600); /* 브랜드 강조 배경 */
  --color-bg-critical: var(--color-red-50);
  --color-bg-success:  var(--color-green-50);
  --color-bg-inverse:  var(--color-gray-900); /* 활성 정렬칩 등 반전 배경 */

  /* Border */
  --color-border:        var(--color-gray-300); /* 구분선 기본 */
  --color-border-strong: var(--color-gray-450); /* 인풋/아웃라인 버튼 */

  /* ============================================================
   * 3. TYPOGRAPHY
   * ============================================================ */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic",
    "맑은 고딕", sans-serif;

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

  /* Size — 화면에서 확인된 본문 스케일 */
  --font-size-2xs:  10px; /* 뱃지 카운트 */
  --font-size-xs:   11px; /* 캡션/태그/탭 라벨/메타 */
  --font-size-sm:   13px; /* 보조 텍스트/칩/정렬 */
  --font-size-md:   14px; /* 강조 라벨 */
  --font-size-base: 15px; /* 기본 본문/제목/가격/섹션 헤더 */
  /* 헤딩 — 시안 기준 유추(페이지 타이틀 등). 필요 시 조정 */
  --font-size-lg:   17px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;

  /* Line height */
  --line-height-tight:  1.4;  /* 11px 소형 텍스트 */
  --line-height-snug:   1.45; /* 13~14px */
  --line-height-normal: 1.6;  /* 15px 본문 */

  /* ============================================================
   * 4. SPACING — 4px 기반 (2/6/10/14 하프스텝 포함)
   * ============================================================ */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-page: 20px; /* 화면 좌우 기본 여백 */

  /* ============================================================
   * 5. RADIUS
   * ============================================================ */
  --radius-sm:   4px;   /* 태그 */
  --radius-md:   8px;
  --radius-lg:   12px;  /* 카드/썸네일 */
  --radius-full: 999px; /* 칩/pill/아바타/프로그레스바 */

  /* ============================================================
   * 6. BORDER & SHADOW
   * ============================================================ */
  --border-width: 1px;
  --color-overlay-card: rgba(26, 28, 32, 0.60);
  --color-overlay-dim:  rgba(26, 28, 32, 0.50); /* 바텀시트/모달 배경 딤 */

  /* 반전(다크) 표면 위 색 — 토스트/활성 정렬칩/시트 CTA */
  --color-fg-on-inverse:       var(--color-gray-00);
  --color-fg-on-inverse-muted: rgba(255, 255, 255, 0.70);
  --color-fg-brand-on-inverse: var(--color-carrot-400);
  --color-bg-on-inverse-subtle: rgba(255, 255, 255, 0.15);

  /* 이미지 위 스캐림 — 히어로 플로팅 버튼/캐러셀 도트 */
  --color-bg-scrim:       rgba(255, 255, 255, 0.92);
  --color-bg-scrim-muted: rgba(255, 255, 255, 0.60);

  /* 플로팅 버튼 그림자 */
  --shadow-float: 0 1px 3px 0 rgba(0, 0, 0, 0.08);

  /* shadow/3 — 오버레이/팝업용 드롭섀도우 */
  --shadow-overlay: 0 8px 28px 0 rgba(23, 27, 33, 0.12);

  /* ============================================================
   * 7. LAYOUT / SIZE (앱 셸 상수)
   * ============================================================ */
  --size-statusbar:  44px; /* 상태바 높이 */
  --size-bottomnav:  60px; /* 하단 탭바 높이 */
  --size-actionbar:  76px; /* 상세 하단 액션바 높이 (52px 버튼 + 12px×2) */
  --size-control:    48px; /* 버튼/주요 컨트롤 높이 */
  --size-touch-min:  44px; /* 최소 터치 영역 */

  /* Icon */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;

  /* 모바일 프레임 기준 폭(웹에서 중앙 컨테이너 max-width로 활용) */
  --layout-mobile-width: 393px;

  /* iOS safe-area 대응(노치/홈바) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}