/* tokens.css — 단일 출처. 색·타이포·간격은 여기서만 정의한다.
   값을 바꿀 일이 있으면 이 파일만 고친다. 컴포넌트 파일에서 리터럴 색을 쓰지 않는다. */

:root {
  color-scheme: light;

  /* 바탕·글자 — sanarae-brand-showcase의 warm-bg / ink 그대로 가져온다. */
  --paper: #faf8f2;
  --surface: #ffffff;
  --surface-sunk: #f3f8f5;   /* forest-50 */

  --ink: #14221a;
  --ink-2: #3d4a42;
  --ink-3: #6b776f;

  --line: #e3dfd3;
  --line-strong: #c4b9a5;

  /* 포레스트 스케일 — 브랜드 토큰과 동일값. 밝은 바탕이라 700을 1차 동작색으로 쓴다. */
  --forest-800: #163a24;
  --forest-700: #1e4e30;
  --forest-600: #235c31;
  --forest-100: #ebf4ee;

  /* 선옐로 — 브랜드 단일 악센트.
     밝은 바탕에서는 채움색으로 쓰면 대비가 안 나오고 제초제 황색 띠와도 헷갈린다.
     그래서 포커스링·eyebrow 선·선택 표시에만 쓴다. */
  --sun: #f2cd38;
  --sun-deep: #e5b800;
  --sun-light: #fef9c3;

  /* 동작색 별칭 */
  --leaf: var(--forest-700);
  --leaf-dark: var(--forest-800);
  --leaf-wash: var(--forest-100);

  /* 주의 — 미기록·라벨 확인 전용. 다른 데 쓰지 않는다. */
  --caution: #a3401a;
  --caution-wash: #fbeee6;
  --caution-line: #e4c3aa;

  /* 농약 라벨 용도 구분색 (바탕·뚜껑 규격).
     조회된 용도명이 규격에 해당할 때만 쓴다. 조회값이 없으면 --band-unknown. */
  --band-fungicide: #e06e96;   /* 살균제 — 분홍 */
  --band-insecticide: #2e8b57; /* 살충제 — 녹색 */
  --band-herbicide: #e8b21e;   /* 제초제 — 황색 */
  --band-nonselect: #c6362e;   /* 비선택성 제초제 — 적색 */
  --band-growth: #2f6fbf;      /* 생장조정제 — 청색 */
  --band-other: #ffffff;       /* 기타 약제 — 백색 */
  --band-unknown: #b7beb8;     /* 용도 미확인 — 무채색. 색을 지어내지 않는다. */
  /* 혼합제·동시방제제는 해당 약제 색깔을 병용한다(고시 제4조3호 "배색"). */
  --band-mixed: linear-gradient(
    var(--band-fungicide) 0 50%,
    var(--band-insecticide) 50% 100%
  );

  /* 기본 띠. [data-use]가 덮어쓴다. */
  --band: var(--band-unknown);

  /* 타이포 — 시스템 한글 스택. 웹폰트 없음(현장 통신 고려). */
  --font-ui: "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "Noto Sans KR",
    system-ui, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
    "맑은 고딕", "Malgun Gothic", monospace;

  --step--1: 0.8125rem;  /* 13 — 각주 */
  --step-0: 0.9375rem;   /* 15 — 본문 */
  --step-1: 1.0625rem;   /* 17 — 소제목 */
  --step-2: 1.3125rem;   /* 21 — 카드 제목 */
  --step-3: 1.625rem;    /* 26 — 패널 제목 */
  --step-4: 2rem;        /* 32 — 페이지 제목 */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* 모서리 — 브랜드 사이트(12/16/20)와 같은 계열로 맞춘다. 색띠만 각지게 남긴다. */
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --tap: 48px;          /* 장갑 낀 손 기준 최소 터치 타깃 */
  --track-dot: 14px;    /* 작기 흐름의 차수 점. 잇는 선이 이 값을 따라간다. */
  --rail: 244px;        /* 데스크탑 좌측 레일 폭 */
  --shadow: 0 10px 30px rgb(22 58 36 / 0.08);
}

@media (min-width: 900px) {
  :root {
    --step-0: 0.875rem;
    --step--1: 0.75rem;
    --tap: 40px;
  }
}