/* 나혼자사장 공통 디자인 토큰
 * 사용법:  <link rel="stylesheet" href="https://www.isolo.co.kr/shared/tokens.css">
 * 각 사이트는 아래 변수만 참조하면 색·간격·서체가 자동으로 통일됩니다.
 * 값이 바뀌면 이 파일 하나만 고치면 전 사이트에 반영됩니다. */

:root {
  /* 브랜드 색 */
  --isolo-primary:        #4C7361;   /* 세이지 그린 — 주요 버튼·강조 */
  --isolo-primary-deep:   #42605A;
  --isolo-primary-soft:   #EDF0E9;
  --isolo-accent:         #B07A4F;   /* 테라코타 — 보조 강조·뱃지 */
  --isolo-accent-soft:    #FBF2E8;
  --isolo-gold:           #C9A06B;

  /* 배경·면 */
  --isolo-bg:             #F4F2EC;   /* 기본 배경(따뜻한 아이보리) */
  --isolo-surface:        #ffffff;
  --isolo-surface-alt:    #FAF9F5;
  --isolo-dark:           #2C3B38;   /* 어두운 섹션·푸터 */
  --isolo-dark-2:         #37463F;

  /* 글자 */
  --isolo-text:           #1F231E;
  --isolo-text-sub:       #5A5D52;
  --isolo-text-muted:     #8E8B7E;
  --isolo-text-invert:    #ffffff;

  /* 선 */
  --isolo-line:           #E4DED0;
  --isolo-line-soft:      #F0EDE5;

  /* 상태 */
  --isolo-success:        #4C7361;
  --isolo-warning:        #B07A4F;
  --isolo-danger:         #b5462f;

  /* 서체 */
  --isolo-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --isolo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 모서리 */
  --isolo-radius-sm: 8px;
  --isolo-radius:    12px;
  --isolo-radius-lg: 18px;
  --isolo-radius-xl: 24px;

  /* 그림자 */
  --isolo-shadow-sm: 0 6px 16px -10px rgba(40,46,38,.35);
  --isolo-shadow:    0 24px 50px -30px rgba(40,46,38,.40);
  --isolo-shadow-lg: 0 40px 80px -36px rgba(40,46,38,.50);

  /* 전환 바 높이 — nav.js 가 사용 */
  --isolo-navbar-h: 36px;
}

/* 다크 배경 위에서 쓰는 보조 토큰 */
.isolo-on-dark {
  --isolo-text:       #ffffff;
  --isolo-text-sub:   #cdd3bf;
  --isolo-line:       rgba(255,255,255,.18);
  --isolo-surface:    rgba(255,255,255,.08);
}

/* 자주 쓰는 최소 유틸 (선택 사용) */
.isolo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--isolo-font); font-size: 14.5px; font-weight: 700;
  padding: 11px 20px; border: none; border-radius: var(--isolo-radius);
  background: var(--isolo-primary); color: var(--isolo-text-invert);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .18s ease, transform .18s ease;
}
.isolo-btn:hover { background: var(--isolo-primary-deep); }
.isolo-btn--ghost {
  background: var(--isolo-surface); color: var(--isolo-text);
  border: 1px solid var(--isolo-line);
}
.isolo-card {
  background: var(--isolo-surface); border: 1px solid var(--isolo-line);
  border-radius: var(--isolo-radius-lg); box-shadow: var(--isolo-shadow-sm);
}