/* =====================================================================
   섬물류 delivery — 디자인 토큰 (라이트 톤)
   SoT: Figma Variables "Collection 2" (20개). 값은 Figma 를 따르고,
   이름은 기존 --dlv-* 체계를 유지한다(참조 300여 곳을 건드리지 않기 위해).

   Figma ↔ 토큰 대응
     main500  #3182F6 → --dlv-blue-500
     main300  #AACDFF → --dlv-blue-300
     main200  #E9F3FF → --dlv-blue-50   ※ 이름은 200 이지만 명도상 50 슬롯이다.
                                          이름 우선으로 옮기면 weak-bg 가 흰색에
                                          가까워져 강조 배경이 사라진다.
     Color7~14        → --dlv-grey-800 ~ --dlv-grey-100
     bg_main  #F4F7FA → --dlv-bg-page
     card1    #E5EAEF → --dlv-card-line
     tag *            → --dlv-tag-* / --dlv-success|danger|warning(-bg)

   ⚠ 대비(WCAG AA) 미달 — Figma 값을 그대로 옮긴 결과다. 작은 글씨(12~13px)
     태그·라벨에 쓰면 본문 기준 4.5:1 을 넘지 못한다. 팔레트를 조정하거나
     해당 텍스트를 18px+/bold(3:1 기준)로 키우는 판단이 필요하다.
       --dlv-warning on --dlv-warning-bg  2.35:1  (미달)
       --dlv-success on --dlv-success-bg  2.65:1  (미달)
       --dlv-danger  on --dlv-danger-bg   3.20:1  (큰 글씨만 통과)
       --dlv-text-muted(#888888) on 흰 배경  3.54:1  (큰 글씨만 통과)

   사용: delivery-cms.css / delivery-app.css 보다 먼저 로드.
   ===================================================================== */
:root{
  /* ponytail: 라이트 전용 팔레트라 브라우저 canvas 도 라이트로 못박는다. 선언이 없으면
     시스템 다크 모드에서 WebKit 이 canvas 기본색을 검정으로 잡고, body(.dlv-app)의
     max-width 바깥 — 웹뷰 스와이프 백 스냅샷 등 — 이 검게 드러난다. */
  color-scheme: light;

  /* Grey scale — Figma Color7~14. 900/50 은 Figma 에 없어 양끝을 확장했다. */
  --dlv-grey-50:#fafafa;                      /* 확장 — hover/readonly 배경 */
  --dlv-grey-100:#f3f3f3;                     /* Color14 */
  --dlv-grey-200:#e3e3e3;                     /* Color13 */
  --dlv-grey-300:#d3d3d3;                     /* Color12 */
  --dlv-grey-400:#c3c3c3;                     /* Color11 */
  --dlv-grey-500:#9a9a9a;                     /* Color10 */
  --dlv-grey-600:#888888;                     /* Color9  */
  --dlv-grey-700:#555555;                     /* Color8  */
  --dlv-grey-800:#404040;                     /* Color7  */
  --dlv-grey-900:#262626;                     /* 확장 — 제목·금액용 최다크 */

  /* Blue scale — Figma main500/300/200. 400~900 은 Figma 에 없어 main500 의
     다크 톤(hover/pressed)으로 기존 값을 유지한다.
     ponytail: blue-100/200 슬롯은 삭제했다. main300 하나로 덮이는 자리라
     중간값을 창작하느니 참조 3곳을 blue-300 으로 옮기는 편이 짧다. */
  --dlv-blue-50:#e9f3ff;                      /* main200 */
  --dlv-blue-300:#aacdff;                     /* main300 */
  --dlv-blue-400:#4593fc;
  --dlv-blue-500:#3182f6;                     /* main500 */
  --dlv-blue-600:#2272eb;
  --dlv-blue-700:#1b64da;
  --dlv-blue-800:#1957c2;
  --dlv-blue-900:#194aa6;

  /* 시맨틱 별칭 — 라이트 톤 */
  --dlv-primary:var(--dlv-blue-500);          /* 포인트/주요 액션 */
  --dlv-primary-hover:var(--dlv-blue-600);
  --dlv-primary-pressed:var(--dlv-blue-700);
  --dlv-primary-weak-bg:var(--dlv-blue-50);   /* 선택/강조 배경 */

  --dlv-bg:#ffffff;                           /* 카드·패널 표면 */
  --dlv-bg-page:#f4f7fa;                      /* bg_main — 페이지 배경(앱 메인 배경) */
  --dlv-card-line:#e5eaef;                    /* card1 — 카드 테두리(페이지 배경 계열) */
  --dlv-line:var(--dlv-grey-200);             /* 테두리 */
  --dlv-divider:var(--dlv-grey-100);          /* 옅은 구분선 */

  --dlv-text-strong:var(--dlv-grey-900);      /* 제목·금액 */
  --dlv-text:var(--dlv-grey-800);             /* 본문 */
  --dlv-text-secondary:var(--dlv-grey-700);
  --dlv-text-muted:var(--dlv-grey-600);       /* 라벨·보조 */
  --dlv-text-sub:var(--dlv-grey-500);         /* 힌트 */
  --dlv-text-disabled:var(--dlv-grey-400);

  /* 상태색 — Figma tag * */
  --dlv-tag-bg:#dee3e8;                       /* tag gray — 중립 태그 */
  --dlv-tag-text:var(--dlv-grey-700);
  --dlv-success:#419c71;--dlv-success-bg:#d7e8e0;   /* tag green txt / tag green */
  --dlv-danger:#e85656;--dlv-danger-bg:#ffefef;     /* tag red txt / tag red */
  --dlv-warning:#e68e41;--dlv-warning-bg:#fff6e5;   /* tag yellow txt / tag yellow */

  --dlv-th-bg:#eff6fd;                        /* 표 헤더 — 페이지 배경 계열 하늘색 */

  /* 형태 — 둥근 모서리 + 하드보더 대신 부드러운 그림자 */
  --dlv-radius:16px;--dlv-radius-sm:12px;
  --dlv-shadow:0 1px 3px rgba(38,38,38,.04),0 4px 16px rgba(38,38,38,.06);
}