/**
 * replen 디자인 토큰 — **단일 출처.**
 *
 * 기준은 `docs/design/tone.md` §7 이고 값은 토스 TDS 공식 토큰을 그대로 가져왔다
 * (https://tossmini-docs.toss.im/tds-mobile/foundation/colors/).
 * 스케일을 직접 만들지 않는 이유: 10단계가 이미 명도 간격이 맞춰져 있어 **대비(WCAG)를 다시
 * 재지 않아도 된다.**
 *
 * ## 규칙
 * 1. **색을 여기 밖에서 적지 않는다.** 앱 CSS 는 `var(--blue-500)` 처럼 참조만 한다.
 *    `tests/design-tokens.test.ts` 가 raw hex 를 찾아 실패시킨다 — 문서로만 있는 규칙은 썩는다.
 * 2. **보조색을 두지 않는다.** 파랑 하나 + 회색 단계. 색이 둘이면 "어느 쪽이 중요한가" 가 흐려진다.
 * 3. `--red-*`·`--green-*` 은 **상태에만** 쓴다(품절·위험·정상). 장식에 쓰지 않는다.
 *
 * 두 앱이 각자 `src/app.css` 맨 위에서 `@import '@replen/shared/tokens.css';` 로 가져온다.
 */
:root {
  /* Blue — 메인. blue-500 이 기본, blue-700 은 누른 상태 */
  --blue-50:  #e8f3ff;
  --blue-100: #c9e2ff;
  --blue-200: #90c2ff;
  --blue-300: #64a8ff;
  --blue-400: #4593fc;
  --blue-500: #3182f6;
  --blue-600: #2272eb;
  --blue-700: #1b64da;
  --blue-800: #1957c2;
  --blue-900: #194aa6;

  /* Grey — 글자·선·배경 */
  --grey-50:  #f9fafb;
  --grey-100: #f2f4f6;
  --grey-200: #e5e8eb;
  --grey-300: #d1d6db;
  --grey-400: #b0b8c1;
  --grey-500: #8b95a1;
  --grey-600: #6b7684;
  --grey-700: #4e5968;
  --grey-800: #333d4b;
  --grey-900: #191f28;

  /* Red — 상태에만 (품절·위험) */
  --red-50:  #ffeeee;
  --red-100: #ffd4d6;
  --red-500: #f04452;
  --red-700: #d22030;

  /* Green — 상태에만 (정상) */
  --green-50:  #f0faf6;
  --green-500: #03b26c;
  --green-700: #029359;

  /* Orange·Yellow — 주의. TDS 스케일에서 필요한 단계만 */
  --orange-50:  #fff4e6;
  --orange-500: #ff9500;
  --orange-700: #cc6f00;

  --white: #ffffff;

  /* ── 쓰임으로 부르는 이름 (semantic) ──
     화면 코드는 되도록 이쪽을 쓴다. "왜 이 색인가" 가 이름에 남는다. */
  --bg:           var(--white);
  --bg-soft:      var(--grey-50);
  --line:         var(--grey-200);
  --text:         var(--grey-900);   /* 제목·본문 */
  --text-sub:     var(--grey-700);   /* 설명 */
  --text-weak:    var(--grey-500);   /* 보조·단위 */
  --brand:        var(--blue-500);   /* 주 동작 */
  --brand-strong: var(--blue-700);   /* 누른 상태 */
  --brand-bg:     var(--blue-50);    /* 강조 배경 */
  --danger:       var(--red-500);
  --danger-bg:    var(--red-50);
  --ok:           var(--green-500);
  --warn:         var(--orange-500);
  --warn-bg:      var(--orange-50);

  /* 간격 — 4의 배수. 로드맵 톤앤매너 항목의 "간격/글자 토큰화" */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
}