/*
 * tokens.css — Bob Woo Chiropractic Clinic 디자인 토큰 (2026-09-25, 1단계)
 *
 * 전 페이지 공용 값의 단일 출처. 값은 사이트 54페이지 중 46페이지가 이미 쓰던 팔레트 기준
 * (디자인 감사 결과, Bob 결정: 46페이지 팔레트로 통일).
 *
 * 1단계(현재): 이 파일을 모든 페이지 <head>의 첫 <style> 앞에 링크만 한다.
 *   - 각 페이지의 인라인 :root 변수(--primary, --dark-gray 등)가 뒤에 오므로 여전히 우선한다.
 *   - 여기 정의된 이름을 아직 어떤 페이지도 새로 참조하지 않는다 → 화면 변화 없음.
 * 2단계(예정): 페이지의 하드코딩 값·옛 변수명을 아래 토큰으로 교체하고 인라인 :root를 제거.
 *
 * 캐시 주의: netlify.toml이 /css/*에 1년 immutable 캐시를 건다.
 * 이 파일을 수정하면 모든 페이지의 링크 ?v= 값을 올릴 것 (안 올리면 재방문자는 옛 파일을 본다).
 */
:root {
  /* ---- 색: 브랜드 ---- */
  --green: #1A5C38;          /* 메인 (기존 --primary) */
  --green-dark: #14472C;     /* hover·강조 */
  --green-light: #2A7A4E;    /* "영업 중" 등 긍정 상태 (#2E8B57 대체 예정) */
  --green-deep: #0F2318;     /* 푸터 배경 */
  --gold: #C8922A;           /* 포인트·CTA */
  --gold-dark: #A67822;
  --gold-light: #DBA83C;

  /* ---- 색: 중립 ---- */
  --ink: #0F172A;            /* 본문 (#1A1A1A, #333 대체 예정) */
  --muted: #64748B;          /* 보조 텍스트 (#6B7280, #555, #666 대체 예정) */
  --white: #FFFFFF;
  --surface: #F8FAFC;        /* 밝은 섹션 배경 (#F8F9FA, #FAFAF8, #F5F7F5 등 대체 예정) */
  --surface-green: #F0F5F2;  /* 초록 톤 배경 (#F0F4F0 대체 예정) */
  --border: #E5E7EB;         /* 테두리 (#F0F0F0, #EEE, #E0E0E0 등 대체 예정) */
  --danger: #9B3A3A;         /* "휴무" 등 부정 상태·폼 오류 (#E74C3C 대체 예정) */

  /* ---- 투명도: rgb(var(--green-rgb) / var(--a-subtle)) 형태로 사용 ---- */
  --green-rgb: 26 92 56;
  --gold-rgb: 200 146 42;
  --ink-rgb: 15 23 42;
  --a-subtle: 0.08;
  --a-soft: 0.15;
  --a-medium: 0.3;
  --a-strong: 0.5;

  /* ---- 글꼴 ---- */
  --font: 'Poppins', system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---- 글자 크기 ---- */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h1: clamp(2rem, 5vw, 3.25rem);

  --lh-tight: 1.2;      /* 제목 */
  --lh-body: 1.6;       /* 본문 */
  --lh-relaxed: 1.8;    /* 긴 글 */

  /* ---- 간격 (4px 기준) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px — 2026-09-25 추가 (기존 사용 165곳) */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px — 2026-09-25 추가 (기존 사용 78곳) */
  --space-section: 6rem;/* 96px — 섹션 상하 여백 */
  --space-section-lg: 8rem; /* 128px — appointment·benefits·services .content-section 등 — 2026-09-27 추가 */

  /* ---- 레이아웃 (2026-09-27 추가, 치료 페이지 외 26페이지에서 사용) ---- */
  --header-h: 120px;    /* 데스크톱 header 높이, 본문 첫 섹션 margin-top */
  --hero-pad-y: 60px;   /* hero·page-header 상하 padding */

  /* ---- 모서리 ---- */
  --r-xs: 2px;          /* 선·스크롤 표시줄 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;         /* 2026-09-25 추가 (기존 사용 41곳) */
  --r-pill: 999px;      /* 버튼 (기존 50px) */
  --r-round: 50%;
  --r-card: 20px;       /* 카드·정보 박스 — 2026-09-27 추가 */
  --r-nav: 25px;        /* 데스크톱 메뉴 링크 — 2026-09-27 추가 */

  /* ---- 그림자 ---- */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06);       /* 헤더·작은 드롭다운 — 2026-09-25 추가 */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-gold: 0 8px 24px rgba(200, 146, 42, 0.4);
  --shadow-gold-rest: 0 4px 15px rgba(200, 146, 42, 0.35);   /* 골드 버튼 평상시 — 2026-09-25 추가 */
  --shadow-gold-hover: 0 10px 30px rgba(200, 146, 42, 0.45); /* 골드 버튼 hover — 2026-09-25 추가 */
  --shadow-gold-soft: 0 6px 20px rgb(var(--gold-rgb) / 0.32); /* index·about 골드 버튼 — 전에는 인라인에서 --shadow-gold를 이 값으로 덮어썼다 (2026-09-27 이름 분리) */
  --shadow-drawer: -10px 0 30px rgba(0, 0, 0, 0.15);
  --ring: 0 0 0 3px rgba(26, 92, 56, 0.12);
}
