:root {
  /* Color (피그마 이미지에서 추정한 값 — 정확한 hex를 받으면 교체) */
  --c-ink: #10281c;
  --c-text: #1a1f1c;
  --c-white: #ffffff;
  --c-green: #167a35;
  --c-mint: #a9d9a8;

  /* 참고 디자인(phytorevolution-bioactives.hykimson.chatgpt.site)에서 추출한 팔레트.
     섹션별 배경색과 파이프라인(= 참고의 "03 Responsible Pathway") 색에 씁니다. */
  --c-paper: #fbfaf5;   /* 따뜻한 오프화이트 */
  --c-deep: #1c3d3a;    /* 푸터와 같은 배경색 (파이프라인 배경) */
  --c-lime: #dbe79e;    /* 어두운 배경 위 라임 포인트 */

  /* Font */
  --font-base: 'Manrope', 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale: 피그마가 1280px 폭 기준(hero 60 / 제목 40 / 본문 17)이라
     1280px에서 정확히 그 크기가 되고, 화면 폭에 비례해 커지고 줄어듭니다. */
  --fs-title: clamp(36px, 4.51vw, 55px);
  --fs-body: clamp(16px, 1.45vw, 22px);      /* 일반 설명글 */
  --fs-desc-sm: clamp(15px, 1.2vw, 18px);    /* 카드 안 설명글 */
  --fs-caption: clamp(14px, 1.1vw, 16px);   /* 학명·작은 안내문 */

  /* Layout */
  --header-h: 88px;
  /* 홈 섹션 사이 간격(히어로 제외): 앞 섹션 내용이 끝나고 다음 섹션 내용이 시작될 때까지의 빈칸. 여기만 바꾸면 전부 같이 바뀝니다. */
  --section-gap: clamp(96px, 9vw, 180px);
  /* 좌우 여백: 화면 폭의 6%, 넓은 화면에서는 내용 폭이 --content-max에서 멈추고 가운데로 모입니다.
     여백을 더 주고 싶으면 6vw를, 내용 최대 폭을 줄이고 싶으면 --content-max를 바꾸세요. */
  --content-max: 1600px;
  --gutter: max(4.5vw, calc((100vw - var(--content-max)) / 2));
  --sub-gutter: max(7vw, calc((100vw - 1300px) / 2));
  /* 헤더 전용 여백: 콘텐츠처럼 가운데로 모으지 않고, 화면이 아주 커져도 80px에서 멈춰
     양 끝에 가깝게 붙습니다(완전히 붙지는 않음). */
  --header-gutter: clamp(24px, 5vw, 80px);
  --c-line: #e1e5e1;
  --c-muted: #8da093;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 데스크탑(모바일 레이아웃 전환 기준인 900px 초과)에서만 글씨 크기를
   기존의 85%로 줄입니다. 모바일은 위 :root 값(100%) 그대로 유지됩니다. */
@media (min-width: 901px) {
  :root {
    --fs-title: clamp(30.6px, 3.8335vw, 46.75px);
    --fs-body: clamp(13.6px, 1.2325vw, 18.7px);
    --fs-desc-sm: clamp(12.75px, 1.02vw, 15.3px);
    --fs-caption: clamp(11.9px, 0.935vw, 13.6px);
  }
}