/* ════════════════════════════════════════════════════
   5ft.mag — 디자인 토큰
   변경하면 사이트 전체에 반영됩니다.
   ════════════════════════════════════════════════════ */

:root {
  /* 컬러 */
  --bg:           #ffffff;
  --bg-sub:       #f4f4f4;
  --text:         #000000;
  --text-muted:   rgba(0, 0, 0, 0.65);
  --border:       #e0e0e0;

  /* 매거진 정체성 컬러 */
  --accent:       #FFE600;   /* 메인 노란색 */
  --accent-soft:  #FFF399;   /* 카드 배경용 50% 옅은 노란색 */
  --accent-text:  #111111;

  /* 레이아웃 */
  --header-h:     60px;
  --read-width:   720px;    /* 본문 읽기 너비 (한 줄 38~42자) */

  /* 타이포그래피 */
  --font:         'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --fs-display:   40px;     /* 큰 제목 (Articles, Photo) */
  --fs-title:     24px;     /* 아티클 제목 + 본문 */
  --fs-body:      19px;     /* 서브텍스트, 일반 본문 */
  --fs-nav:       17px;     /* 네비게이션 */
  --fs-meta:      14px;     /* 페이지네이션, 캡션 */
  --fw-all:       600;      /* 일반 텍스트 굵기 (SemiBold) — 가독성 강화 */
  --fw-heading:   800;      /* 타이틀/제목 굵기 (ExtraBold) */
  --ls-default:   -0.02em;

  /* line-height 스케일 — 본문은 article.css 가 1.7~1.8 로 별도 정의(매거진 호흡) */
  --lh-display:   1.1;      /* 40px+ 큰 제목 */
  --lh-title:     1.3;      /* 24px+ 제목 */
  --lh-body:      1.5;      /* 본문/리스트 */
  --lh-meta:      1.4;      /* 캡션·메타데이터 */

  /* 인터랙션 형태 — 매거진 표면은 낮은 반경, 기능 표면은 안정적인 4px */
  --btn-radius:   4px;
  --chip-radius:  4px;
  --badge-radius: 2px;
  --field-radius: 4px;
  --ctrl-border:  #c4c4c4;

  /* ────── Semantic 컬러 (light) ──────
     status·intent 표현용. 다크모드에서 [data-theme="dark"] 가 같은 토큰 재정의. */
  --color-success-bg:   #d1fae5;
  --color-success-text: #064e3b;
  --color-warning-bg:   #fef3c7;
  --color-warning-text: #78350f;
  --color-danger-bg:    #fee2e2;
  --color-danger-text:  #7f1d1d;
  --color-danger-border:#fca5a5;
  --color-info-bg:      #e0e7ff;
  --color-info-text:    #3730a3;
  --color-info-border:  #c7d2fe;
  --color-neutral-bg:   #e5e7eb;
  --color-neutral-text: #4b5563;

  /* 좋아요/감정 강조 — 핑크 톤 */
  --color-heart:        #e0245e;
  --color-heart-soft:   #fce7f3;
  --color-heart-text:   #9d174d;

  /* ────── 간격 (8px grid) ────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ────── 반경 ────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* ────── 그림자 (elevation) ────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.30);

  /* ────── 포커스 링 (접근성) ────── */
  --ring:       0 0 0 3px rgba(0, 0, 0, 0.18);
  --ring-color: rgba(0, 0, 0, 0.18);

  /* ────── 모션 ────── */
  --duration-fast:  .15s;
  --duration-base:  .2s;
  --duration-slow:  .35s;
  --easing:         cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ────── 반응형 브레이크포인트 (참고용 — CSS @media 는 변수 못 받으므로 동일 px 직접 입력)
       --bp-sm: 640px   (모바일 ↔ 큰 폰)
       --bp-md: 768px   (큰 폰 ↔ 태블릿)
       --bp-lg: 1024px  (태블릿 ↔ 데스크탑)
       --bp-xl: 1280px  (데스크탑 ↔ 큰 데스크탑)
     컨벤션: 모바일 first — 베이스는 모바일, @media (min-width: N) 로 큰 화면 추가. */
}

/* 다크 모드 */
[data-theme="dark"] {
  --bg:           #0c0c0c;
  --bg-sub:       #181818;
  --text:         #f0f0f0;
  --text-muted:   rgba(240, 240, 240, 0.7);
  --border:       #282828;

  /* semantic 컬러 — 다크 배경 위에서 가독성 + 톤 다운 */
  --color-success-bg:   #064e3b;
  --color-success-text: #d1fae5;
  --color-warning-bg:   #3a2e0c;
  --color-warning-text: #fef3c7;
  --color-danger-bg:    #3f1212;
  --color-danger-text:  #fecaca;
  --color-danger-border:rgba(239, 68, 68, 0.45);
  --color-info-bg:      #1e1b4b;
  --color-info-text:    #a5b4fc;
  --color-info-border:  rgba(165, 180, 252, 0.35);
  --color-neutral-bg:   #2a2d33;
  --color-neutral-text: #c7c9cf;

  --color-heart:        #ff6b8a;
  --color-heart-soft:   rgba(255, 107, 138, 0.18);
  --color-heart-text:   #ffb1c1;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:  0 1px 3px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.60);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.75);

  --ring:       0 0 0 3px rgba(255, 255, 255, 0.22);
  --ring-color: rgba(255, 255, 255, 0.22);
}

/* 사용자 모션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0s; --duration-base: 0s; --duration-slow: 0s; }
}