/* * 농부사전 디자인 토큰 (Design Tokens) * ------------------------------------------------------------------ * Figma 파일 "농부사전 — 화면 디자인" 에서 추출. * - 색/그림자: Figma Variables 기준 (정확) * - 타이포/간격/반경: 화면 CSS에서 추출 (11개 화면 대조) * 단일 모드(라이트) 기준. 다크모드 추가 시 [data-theme="dark"] 블록으로 확장. * * 사용법: color: var(--color-fg-brand); padding: var(--space-5); * 원칙: 화면/컴포넌트 CSS에서는 primitive(--color-farmer-orange-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-750: #676D79; /* 캡션 AA 하한용 — gray-700은 밝은 배경 대비 3.1~3.4 (TASK-086 H2) */ --color-gray-800: #555D6D; --color-gray-900: #2A3038; --color-gray-1000: #1A1C20; /* Farmer (brand) — 브랜드매뉴얼 VER1.0 (TASK-065, 구 Carrot 대체) * 매뉴얼 정본 5색 + 파생 틴트/셰이드(#F2552B 기준 산정 — 매뉴얼 외, T65-D05) */ --color-farmer-orange-100: #FEEEEA; --color-farmer-orange-200: #FDE0D9; --color-farmer-orange-400: #F9B3A0; --color-farmer-orange-500: #F79175; --color-farmer-orange-600: #F2552B; /* Farmer Orange — 메인 포인트 */ --color-farmer-orange-800: #C13E1B; --color-farmer-yellow: #FFC84D; /* 보조 — 용처 확정 전 primitive만 */ --color-farmer-beige: #FFF7E1; /* 로고 코인 내부·연한 브랜드 배경 */ --color-farmer-brown: #251611; /* 강조 타이포·그래픽 (semantic 매핑은 추후 판단) */ --color-farmer-pearl: #FFFCF8; /* White 외 배경 권장색 */ /* Status */ --color-red-50: #FDEEEC; --color-red-500: #E8402C; --color-red-600: #D62F1C; --color-red-700: #C22A19; /* 틴트(red-50) 위 소형 텍스트 — 대비 5.12, red-600은 4.35 (TASK-086 H2) */ --color-green-50: #EAFAF0; --color-green-600: #12894A; --color-green-700: #0F7A42; /* 틴트(green-50) 위 소형 텍스트 — 대비 5.00, green-600은 4.13 (TASK-086 H2) */ --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-750); /* 캡션/placeholder — AA 하한(구 gray-700은 3.1~3.4, TASK-086 H2) */ --color-fg-brand: var(--color-farmer-orange-600); /* 소형(18.66px bold 미만) 텍스트용 브랜드색 — orange-600은 밝은 배경 대비 상한 3.4라 * AA(4.5) 불가. orange-800 실측 = white 5.29 · gray-100 4.97 · pearl 5.17 · beige 4.94 (TASK-086 H2) */ --color-fg-brand-strong: var(--color-farmer-orange-800); --color-fg-on-brand: var(--color-gray-00); /* 브랜드 배경 위 텍스트 */ --color-fg-critical: var(--color-red-600); --color-fg-critical-strong: var(--color-red-700); /* 틴트 배경(badge 등) 위 (TASK-086 H2) */ --color-fg-success: var(--color-green-600); --color-fg-success-strong: var(--color-green-700); /* 틴트 배경(badge 등) 위 (TASK-086 H2) */ --color-fg-info: var(--color-blue-500); /* 순위 하락 등 중립 지표 */ --color-fg-faint: var(--color-gray-750); /* 취소선 정가 등 최저 강조 — AA 하한(4.72~5.20). 구 gray-600은 2.1, gray-700은 3.2로 미달. gray-800은 fg-muted와 붕괴 + 위계 역전이라 배제. 단 이 값도 fg-subtle과 동일값 — 팔레트가 AA 하한 아래 faint 단계를 표현 못 한다 (TASK-086 H2, 리뷰 R1·R2) */ /* Background */ --color-bg: var(--color-farmer-pearl); /* 기본 레이어 — 순백→Pearl (TASK-065 D3, 유저 확정) */ --color-bg-muted: var(--color-gray-100); /* 섹션 구분(8px 띠) */ --color-bg-subtle: var(--color-gray-200); /* 칩/썸네일 배경 */ --color-bg-brand: var(--color-farmer-beige); /* 브랜드 연한 배경(배너) — 매뉴얼 Beige */ --color-bg-brand-solid: var(--color-farmer-orange-800); /* 브랜드 강조 배경(버튼·CTA·배지 — 흰 글씨 면) — 흰글씨 대비 5.29. 구 orange-600은 3.44로 AA 미달 (TASK-086 H2, 유저 승인) */ --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-10: 40px; /* 랜딩 등 대형 섹션 상하 여백 (TASK-042) */ --space-14: 56px; /* 랜딩 섹션 상하 여백 — hi-fi Figma 랜딩 py-56 (TASK-042) */ --space-page: 20px; /* 화면 좌우 기본 여백 */ --space-content-top: var(--space-4); /* page-header 아래 본문 첫 오브젝트까지 간격 — 전 페이지 통일, 랜딩만 예외 (TASK-099) */ /* ============================================================ * 5. RADIUS * ============================================================ */ --radius-sm: 4px; /* 태그 */ --radius-md: 8px; --radius-btn: 10px; /* 버튼/CTA — hi-fi Figma r/4 (auth·campaign 기존 10px 리터럴의 토큰화, TASK-042) */ --radius-lg: 12px; /* 카드/썸네일 — hi-fi Figma r/5 */ --radius-xl: 16px; /* 대형 카드/히어로 이미지 — hi-fi Figma r/6 (TASK-042) */ --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-farmer-orange-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-header: 56px; /* 구 소형 헤더 높이 (TASK-086 M5) — TASK-092 대형 배너 통일로 사용처 없음. 삭제하지 않는 이유 = 향후 소형 변형 복원 대비 기록 */ /* 대형 배너 헤더 높이 (TASK-092, T92-D01) — 유저 대면 전 페이지 상단 배너 공통. * 산정 = 구 상품탭 실측(패딩 24 + 타이틀 24px×1.4=33.6 + 패딩 16 + 보더 1 ≈ 74.6px)을 * 4px 그리드로 정렬한 76px. 콘텐츠 의존 높이(패딩만)는 로고(26px)·타이틀(33.6px) 페이지가 * 갈라지므로 금지 — 고정 높이 + 내용 수직 중앙이 계약. border-bottom 1px 포함(border-box). */ --size-header-lg: 76px; --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); }