/* Petsign 디자인 토큰 — 색·글꼴·모서리의 정본 (2026-10-01)
 *
 * 정문(/)과 서비스(/my/)가 같은 파일을 읽는다. 한쪽만 바뀌어 따로 노는 일을 막으려고 여기로 모았다.
 * 색을 바꿀 일이 생기면 각 페이지가 아니라 이 파일을 고친다.
 * 출처: 한상현 대표가 만든 A1 제품 페이지의 팔레트.
 *
 * 각 페이지는 자기 <style> 안에도 같은 값을 들고 있다(이 파일을 못 받아도 화면이 깨지지 않게).
 * 이 파일은 <style> 뒤에 실려서 그 값을 덮는다.
 */
:root{
  /* 바탕과 글자 */
  --page:#E9E9E6;
  --canvas:#F1EFEC;
  --card:#FFFFFF;
  --ink:#141414;
  --ink-2:#55554F;
  --ink-3:#8F8F88;
  --hair:#E1E0DA;
  --greige:#CFC8BF;
  --taupe:#A69E95;
  --stone:#BCB4AA;

  /* 제품 색 */
  --f-white:#EFEBE4;
  --f-sand:#D9CBB5;
  --f-sage:#B9C1AE;

  /* 상태 (왼쪽부터 무게 순) */
  --ok:#6F9A74;      --ok-d:#55795A;    --ok-l:#E7EDE6;
  --watch:#C7A64B;   --watch-l:#F6F0DE;
  --caution:#D08A4E; --caution-l:#F7EADE;
  --vet:#C2584E;     --vet-l:#F6E3E0;

  /* 모서리·글꼴·움직임 */
  --r-xl:44px; --r-lg:28px; --r-md:18px;
  --latin:"Poppins",system-ui,sans-serif;
  --kr:"Pretendard Variable","Pretendard",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* ── 서비스 화면(/my/)이 쓰는 이름. 전부 위 토큰에서 끌어다 쓴다 ── */
  --cream:var(--canvas);
  --sand:#EAE7E1;
  --line:var(--hair);
  --line2:#D4D1C9;
  --ink2:var(--ink-2);
  --muted:var(--ink-3);

  --sage:var(--ok); --sage-d:var(--ok-d); --sage-l:var(--ok-l); --sage-xl:#F2F5F1;
  --amber:var(--watch); --amber-l:var(--watch-l);
  --clay:var(--caution); --clay-l:var(--caution-l);
  --slate:#6D7E8A; --slate-l:#EAEEF1;

  /* 운영 화면(ops)이 쓰는 별칭 */
  --aqua:var(--ok); --aqua-d:var(--ok-d); --aqua-l:var(--ok-l);
  --peach:var(--watch); --peach-l:var(--watch-l);
  --coral:var(--vet); --coral-l:var(--vet-l);
  --sky:#6D7E8A; --sky-l:#EAEEF1;

  --r:26px; --r-sm:18px; --r-xs:12px;
  --shadow:0 1px 2px rgba(20,20,20,.03), 0 8px 24px rgba(20,20,20,.05);
  --shadow-lg:0 3px 10px rgba(20,20,20,.06), 0 18px 44px rgba(20,20,20,.09);
}

/* 글꼴도 한곳에서. 서비스 화면은 Noto Sans KR 로 떨어져 있었는데 정문과 획이 달라 보인다. */
html,body{
  font-family:var(--kr),-apple-system,BlinkMacSystemFont,"Malgun Gothic",sans-serif;
}