/* 감성오브제 디자인 토큰 — 브랜드 로고(brand/logo-original.webp)의 크림 + 에스프레소 브라운.
   스토어(store.css)와 관리자(admin.css)가 함께 읽는다. 색·글꼴·간격은 여기서만 정한다.
   로고에서 뽑은 두 값(--bg, --accent)이 기준이고, 나머지는 그 둘 사이에서 대비를 맞춰 만들었다. */

:root {
  /* 바탕 */
  --bg: #f7f1e4;            /* 로고 바탕 크림 */
  --bg-deep: #efe5d3;       /* 구획을 나눌 때 한 톤 깊게 */
  --surface: #fffdf9;       /* 순백은 크림 옆에서 차갑게 떠 보여서 아주 살짝 데웠다 */
  --surface-soft: #fbf7ef;

  /* 글자 */
  --ink: #2d211b;           /* 브라운이 도는 먹색 — 회색 먹은 로고 옆에서 탁해 보인다 */
  --ink-soft: #5c4a40;
  --ink-mute: #73605a;      /* 크림 위 5.3:1, --bg-deep 위 4.7:1 — 더 밝히면 본문 대비 기준(4.5:1) 아래로 떨어진다 */

  /* 선 */
  --line: #e7dcca;
  --line-strong: #d2c3ab;

  /* 포인트 */
  --accent: #552f1d;        /* 로고 브라운. 크림 위 10.3:1 */
  --accent-hover: #43241a;
  --accent-soft: #efe2d2;
  --accent-ink: #f7f1e4;    /* 브라운 위 글자는 흰색이 아니라 로고 크림 — 로고를 뒤집은 모양이 된다 */

  --sale: #ab4a29;          /* 할인율 — 테라코타. 브라운보다 밝고 붉어서 둘이 섞여 보이지 않는다. 크림 위 5.0:1 */
  --star: #a67933;
  --danger: #a33b2b;
  --ok: #556636;            /* 성공 표시만 쓰는 세이지. 브랜드 색이 아니다 */

  /* 글꼴 */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  /* 로고가 둥근 기하학 산세리프라 제목도 산세리프(Pretendard)로 맞춘다. 명조는 로고와 부딪힌다 */
  --font-display: var(--font-sans);
  /* 영문 브랜드명은 로고 아래 'od.obje' 처럼 자간을 넓힌 기하학 서체 */
  --font-brand: "Jost", "Futura", "Century Gothic", var(--font-sans);

  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-md: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem; /* 17 */
  --fs-xl: 1.375rem;  /* 22 */
  --fs-2xl: 1.75rem;  /* 28 */

  /* 간격 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;

  --gutter: 16px;           /* 모바일 좌우 여백 */
  --maxw: 1120px;

  /* 모서리·그림자
     2026-10-02 사용자 결정: 직사각형은 전부 직각. 둥근 모서리는 링크 모음(인포크) 페이지처럼 보여 고급스럽지 않다.
     원형으로 남기는 것은 로고 아바타·스피너처럼 원래 동그란 것뿐이다 (50% 를 직접 쓴다). */
  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-pill: 0;
  /* 넓게 퍼지는 그림자는 앱 같은 느낌을 낸다. 면은 선으로 나누고 그림자는 아주 얕게만 */
  --shadow-card: 0 1px 0 rgba(45, 33, 27, 0.04);
  --shadow-pop: 0 18px 48px -18px rgba(45, 33, 27, 0.38);
  --scrim: rgba(45, 33, 27, 0.45);

  /* 움직임 */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;

  /* iOS 노치·홈바 (인스타 인앱 브라우저 포함) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
  :root { --gutter: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}