/* ==========================================================================
   황금나이 — 디자인 토큰
   여기 숫자만 고치면 사이트 전체가 바뀝니다. 다른 파일에 색/크기를 직접 쓰지 마세요.
   ========================================================================== */

:root {
  /* --- 색상 ---------------------------------------------------------- */
  --c-orange:       #DB5A00;  /* 포인트 — 로고, 활성탭, 배지 */
  --c-orange-dark:  #B84A00;  /* 눌림 상태 */
  --c-orange-soft:  #FFF0E2;  /* 배지 배경 */
  --c-orange-bg:    #FFF5EC;  /* 오늘의 좋은글 배경 */

  --c-text:         #26251F;  /* 본문 — 대비 14.8:1 */
  --c-text-sub:     #6B6862;  /* 보조 — 대비 5.9:1 (WCAG AA 통과) */
  --c-text-mute:    #8A8781;  /* 메타 정보 — 대비 3.8:1, 15px 이상에서만 사용 */

  --c-bg:           #FFFFFF;
  --c-bg-gap:       #F6F5F2;  /* 섹션 사이 8px 띠 */
  --c-bg-thumb:     #F1EFEA;  /* 이미지 로딩 전 자리 */

  --c-line:         #F0EFEC;  /* 행 사이 구분선 */
  --c-line-strong:  #E8E6E1;  /* 영역 경계 */
  --c-border:       #DEDCD6;  /* 버튼·입력창 테두리 */

  --c-danger:       #C0392B;
  --c-success:      #1E7A45;

  /* --- 글자 크기: 보통 (기본값) --------------------------------------- */
  --fs-xs:    13px;  /* 하단 탭 라벨 */
  --fs-sm:    15px;  /* 메타 정보 */
  --fs-base:  17px;  /* 본문 */
  --fs-md:    18px;  /* 목록 제목 */
  --fs-lg:    20px;  /* 섹션 제목 */
  --fs-xl:    22px;  /* 화면 제목, 로고 */

  --lh-tight: 1.45;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  /* --- 간격 ----------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;

  /* --- 형태 ----------------------------------------------------------- */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  10px;
  --radius-pill: 999px;

  --tap-min:    48px;  /* 최소 터치 영역 — 이보다 작은 버튼 금지 */
  --tabbar-h:   62px;
  --header-h:   58px;
  --content-w:  600px; /* 태블릿·PC에서 본문 최대 폭 */

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* --- 글자 크게 ------------------------------------------------------- */
body.fs-large {
  --fs-xs:    15px;
  --fs-sm:    17px;
  --fs-base:  20px;
  --fs-md:    21px;
  --fs-lg:    23px;
  --fs-xl:    25px;
  --tabbar-h: 68px;
}

/* --- 글자 아주 크게 --------------------------------------------------- */
body.fs-xlarge {
  --fs-xs:    16px;
  --fs-sm:    19px;
  --fs-base:  23px;
  --fs-md:    24px;
  --fs-lg:    26px;
  --fs-xl:    28px;
  --tabbar-h: 72px;
}