/* =====================================================================
   HCORE 디자인 시스템 — 토큰 (2026-10-20)
   민트 → 피치 그라데이션 바탕 + 반투명 흰 카드(글래스) + 틸(기본) · 코랄(포인트)
   모든 페이지는 이 파일과 components.css를 먼저 불러오고, 색·간격·모서리는
   여기 변수만 쓴다. 페이지 <style>에서 :root 색을 다시 정의하지 않는다.
   ===================================================================== */
:root {
  color-scheme: light; /* 밝은 화면 고정(휴대폰이 다크 모드여도) */

  /* ---- 색: 기본 팔레트 ---- */
  --c-primary: #1f8a7a;        /* 틸 — 주요 버튼·선택 상태(흰 글자 대비 4.5:1) */
  --c-primary-strong: #176d61; /* 눌림·글자용 진한 틸(흰 바탕 6.3:1) */
  --c-primary-soft: #dff2ec;   /* 틸 옅은 바탕(선택 칩·아이콘 배지) */
  --c-primary-tint: rgba(31, 138, 122, 0.10);
  --c-primary-light: #cfe9e2;   /* 틸 옅은 단계(오늘 카드 준비 구간) */
  --c-primary-mid: #6dbcaa;     /* 틸 중간 단계(오늘 카드 유산소 구간) */
  --c-accent: #f2836b;         /* 코랄 — 강조 버튼·차트·진행 막대 */
  --c-accent-strong: #b9492f;  /* 코랄 글자용(흰 바탕 5:1) */
  --c-accent-soft: #fdebe4;    /* 코랄 옅은 바탕(맞춤 조정 표시) */
  --c-violet-soft: #ece8fb;    /* 아이콘 배지 보조색 */
  --c-violet: #6a58c9;
  --c-amber-soft: #fdf1dc;
  --c-amber: #b9741c;
  --c-amber-border: #efd3a3;   /* 주의 상자 테두리(ds-note--warn) */

  --c-ink: #1b2a28;            /* 본문 글자(초록빛 먹색) */
  --c-ink-2: #34413e;
  --c-sub: #47524f;            /* 보조 글자(흰 카드 위 7.6:1 — 40~50대도 읽기 편하게) */
  --c-line: #dbe6e1;           /* 구분선 */
  --c-line-strong: #c3d3cd;

  --c-surface: rgba(255, 255, 255, 0.86);        /* 글래스 카드(글씨 뒤로 바탕이 덜 비치게) */
  --c-surface-solid: #ffffff;
  --c-surface-2: rgba(255, 255, 255, 0.7);       /* 카드 안 칸·입력 바탕 */
  --c-surface-border: rgba(255, 255, 255, 0.9);
  --c-sunken: #eef5f2;                            /* 카드 안 눌린 칸 */

  --c-success: #1f8a7a;
  --c-danger: #c8372d;
  --c-danger-text: #a32a22;
  --c-danger-soft: #fdeceb;

  /* ---- 바탕 그라데이션 ---- */
  --bg-solid: #eef5f0;
  --bg-gradient: linear-gradient(165deg, #d9f0e8 0%, #eaf4ee 34%, #f8efe6 70%, #fadccc 100%);
  --hero-gradient: linear-gradient(150deg, #cdeee3 0%, #e7f4ee 55%, #fbe7da 100%);

  /* ---- 모서리 ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

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

  /* ---- 그림자 ---- */
  --sh-1: 0 1px 2px rgba(27, 74, 64, 0.05), 0 4px 14px rgba(27, 74, 64, 0.06);
  --sh-2: 0 2px 4px rgba(27, 74, 64, 0.05), 0 12px 32px rgba(27, 74, 64, 0.10);
  --sh-primary: 0 8px 20px rgba(31, 138, 122, 0.28);
  --sh-accent: 0 8px 20px rgba(242, 131, 107, 0.32);
  --blur: saturate(160%) blur(18px);

  /* ---- 글자 ---- */
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Malgun Gothic', sans-serif;
  --fs: 1.15; /* 글자 크기 배수 — 내 정보 "글자 크기"(html[data-fs])가 바꾼다. 크기는 calc(14px * var(--fs)) 식으로 쓴다 */
  --fw-regular: 500;
  --fw-bold: 700;
  --fw-heavy: 800; /* 제목·큰 숫자만 */

  /* ---- 이전 이름(기존 페이지 CSS 호환) — 새 코드는 위 --c-* 이름을 쓴다 ---- */
  --brand: var(--c-primary);
  --brand-text: var(--c-primary-strong);
  --brand-soft: var(--c-primary-tint);
  --gold: var(--c-accent);
  --gold-text: var(--c-accent-strong);
  --gold-soft: var(--c-accent-soft);
  --tuned: var(--c-accent-soft);
  --tuned-border: var(--c-accent);
  --danger: var(--c-danger);
  --danger-text: var(--c-danger-text);
  --danger-soft: var(--c-danger-soft);
  --red: var(--c-danger);
  --red-text: var(--c-danger-text);
  --red-soft: var(--c-danger-soft);
  --bg: var(--c-sunken);
  --card: var(--c-surface-solid);
  --surface: var(--c-surface-solid);
  --ink: var(--c-ink);
  --ink-soft: var(--c-ink-2);
  --sub: var(--c-sub);
  --muted: var(--c-sub);
  --line: var(--c-line);
  --line-soft: var(--c-line);
  --focus: var(--c-primary-strong);
  --black: var(--c-ink);
}
html[data-fs="2"] { --fs: 1.3; }
html[data-fs="3"] { --fs: 1.45; }