/* =====================================================================
   styles/tokens.css — 시니어 안전 글래스모피즘 디자인 토큰 (단일 출처)
   전 페이지는 이 변수만 사용합니다. 수치는 임의로 바꾸지 마세요.
   원칙: 글씨가 올라가는 영역은 '불투명 흰 카드 + 고대비'.
        유리/블러는 장식 영역(헤더 띠·떠있는 네비·배경)에만.
   ===================================================================== */
:root {
  /* ── 색상 (고대비, 4.5:1+ 보장) ── */
  --green-700: #1B5E20;   /* 진한 초록: 제목 강조 */
  --green-600: #2E7D32;   /* 메인 초록: 버튼·포인트 */
  --green-100: #E8F3E9;   /* 연한 초록: 선택 배경 */
  --beige:     #F5F0E1;   /* 따뜻한 베이지: 페이지 여백 */
  --earth:     #5D4037;   /* 흙색: 보조 텍스트 */
  --card:      #FFFFFF;   /* 카드: 항상 불투명 흰색 */
  --ink:       #1A1A1A;   /* 본문 글씨 (흰 배경 대비 약 16:1) */
  --ink-sub:   #4A4A4A;   /* 보조 글씨 (대비 약 9:1) */
  --on-green:  #FFFFFF;   /* 초록 버튼 위 흰 글씨 */
  --line:      #E0E0E0;   /* 구분선 */

  /* ── 글자 크기 (시니어: 본문 18px+) ── */
  --fs-body:   18px;
  --fs-lead:   20px;      /* 중요한 본문 */
  --fs-h3:     20px;
  --fs-h2:     24px;
  --fs-h1:     32px;
  --lh:        1.7;       /* 줄간격 넉넉히 */
  --font:      'Pretendard', 'Noto Sans KR', sans-serif;
  --weight-body: 500;     /* 얇은 폰트 금지 → Medium 이상 */
  --weight-head: 700;

  /* ── 모서리·여백·그림자 ── */
  --radius-card: 24px;
  --radius-btn:  16px;
  --radius-pill: 999px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px;
  --pad-card: 24px;
  --shadow-card: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-float: 0 8px 28px rgba(0,0,0,0.14);

  /* ── 유리 효과 (장식 영역 전용) ── */
  --glass-bg: rgba(255,255,255,0.55);
  --glass-blur: blur(12px);

  /* ── 버튼·터치 영역 ── */
  --btn-min-h: 56px;       /* 일반 버튼 (>48px) */
  --choice-min-h: 96px;    /* 질문 선택 버튼 */
  --tap-min: 48px;         /* 최소 터치 영역 */
}
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh);
  font-weight: var(--weight-body);
  color: var(--ink);
}