/* Design tokens — official brand pass (2026-08).
   Source of truth: Boostree Design System (claude.ai/design · colors_and_type.css)
   brand green #3cc676 + slate neutrals + deep black #222 밴드 + 민트 글로우.
   Swap values here only; never hardcode colors/spacing in component files. */
:root {
  color-scheme: light;

  /* Color — Boostree DS slate neutrals */
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  /* 푸터처럼 '내려앉은' 크롬 영역 — .l-section 교차 밴드(surface)와 구분되는 한 단계 아래 바닥.
     푸터가 surface를 쓰면 섹션 개수가 짝수인 페이지에서 마지막 섹션과 같은 색이 되어 구획이 사라진다. */
  --color-surface-sunken: #f1f5f9;
  --color-text-muted-strong: #475569; /* sunken 바닥 위 뮤트 — #64748b는 #f1f5f9에서 4.34:1로 AA 미달, 이 값은 6.9:1 */

  /* Color — Boostree brand green scale */
  --color-primary: #3cc676; /* brand green — 로고·테두리·틴트·마커용. 흰 글자를 얹는 채움면에는 쓰지 않는다(2.20:1) → --color-primary-fill */
  --color-primary-hover: #33a864;
  --color-primary-contrast: #ffffff;
  --color-primary-soft: #e2f9ea;
  --color-primary-deep: #247a49; /* 밝은 배경 위 텍스트/링크용 — 흰 배경 5.3:1, surface 5.1:1 (AA, 11px 아이브로우 포함) */
  /* 흰 글자를 얹는 '채움면' 전용 — --color-primary(#3cc676)를 채움에 쓰면 흰 글자가 2.20:1 로
     WCAG AA(4.5:1) 미달이었다(2026-09-08 발견, 21페이지 전역 주 CTA). --color-primary 자체는
     로고·테두리·틴트·--color-primary-soft 에도 쓰여 값을 바꿀 수 없으므로 채움면만 분리한다.
     대비: fill #fff 5.31:1 / hover #fff 7.55:1. 다크 무대(#222 히어로) 위에서도 fill 은 3.00:1 로
     UI 경계 최소치(WCAG 1.4.11, 3:1)를 지킨다 — 이보다 어둡게 내리면 무대와 붙는다. */
  --color-primary-fill: #247a49;
  --color-primary-fill-hover: #1c6039;
  --color-mint: #d7ffe8;
  --color-glow: #9df8c3; /* 다크 밴드 위 그린 하이라이트 */

  /* 별도 브랜딩 운영사 컬러 — 홈 섹션2 브랜드 카드 전용 (공식 로고 픽셀 샘플 기준) */
  --color-bemytree-leaf: #60b060; /* be my tree 리프 그린 — 틴트 필드 전용(텍스트 대비 부족) */
  --color-kdermpass-rose: #c13b52; /* KDERM PASS 로즈 — 틴트 전용 (출처: kdermpass.com 공식 마크) */
  --color-dermanode-purple: #6244bb; /* 더마노드랩 퍼플 — 틴트 전용 (출처: dermanode.com 실측) */
  --color-dermanode: #6048c8; /* DERMA NODE LAB 퍼플 — 화이트 대비 6.4:1 (AA) */

  --color-ink: #222222; /* 다크 밴드(hero/CTA/footer) 배경 — brand deep black */
  --color-ink-contrast: #f8fafc;
  --color-accent: #6ed399; /* 다크 밴드 위 보조 그린 */
  --color-danger: #ef4444;

  /* Brand gradients */
  /* 주 전환 CTA 채움 — 2026-09-08 톤 하향: 이전 값(#3cc676 → #6ed399) 위의 흰 글자가
     2.20:1(어두운 쪽)~1.84:1(밝은 쪽)로 WCAG AA 미달이었다(14~18px 이라 large-text 3:1 완화 대상도 아니다).
     지금 값의 흰 글자 대비는 5.31:1 → 5.04:1(hover ×1.06 에서도 4.85:1 → 4.55:1).
     정지점 폭이 거의 없는 것은 의도다 — 세 제약이 동시에 조인다.
       ① 흰 글자 4.5:1 → 밝기 상한(흰 배경 대비 4.5:1 이하로 밝아질 수 없다)
       ② 다크 무대(.detail-hero #222) 위 UI 경계 3:1 → 밝기 하한(흰 배경 대비 5.3:1 보다 어두울 수 없다)
       ③ 이 토큰을 쓰는 hover 는 전부 filter: brightness(1.06)(buttons.css·cinematic.css 3곳)이라
          밝은 정지점의 hover 값도 4.5:1 을 넘어야 한다 → base 5.04:1 이 실질 상한
     그래서 남는 구간은 흰 배경 대비 5.0~5.3:1 뿐이고, 결과적으로 얇은 광택에 가깝다.
     정지점을 벌리려면 hover 를 밝히기에서 어둡게로 바꾸거나 다크 무대 경계를 포기해야 한다. */
  --grad-cta: linear-gradient(105deg, #247a49, #267e4b);
  --grad-hero-text: linear-gradient(100deg, #ffffff 35%, #9df8c3 85%);
  /* .detail-cta(상세페이지 인라인 전환 스트립) 전용 — 이 토큰을 쓰는 곳은 그 한 군데다.
     2026-09-08 톤 하향: 이전 값(#078d77 → #22b47e) 위의 흰 본문이 2.66:1(밝은 쪽)~4.13:1 로
     WCAG AA 미달이었다(.detail-cta p 는 18px/700 이라 large-text 3:1 완화도 못 받는다 — 14pt 미만).
     지금 값의 흰 글자 대비는 밝은 쪽 5.02:1 / 어두운 쪽 7.69:1. DS 원본이 갱신되면 이 주석을 근거로 재조정할 것. */
  --grad-deep: linear-gradient(to top, #075f45, #0d7f56);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Typography */
  --font-base: "Pretendard Variable", Pretendard, system-ui, -apple-system,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: clamp(2.25rem, 5vw, 3.75rem);
  --line-height-base: 1.6;
  --line-height-tight: 1.25;

  /* Radius / shadow — DS radii + soft elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px rgba(30, 41, 59, 0.06);
  --shadow-md: 5px 4px 34px rgba(128, 147, 166, 0.11);
  --shadow-cta: 4px 4px 12px rgba(0, 0, 0, 0.15);

  /* Layout */
  --header-height: 72px;
  --container-max: 1200px;
}