/* 디자인 토큰은 이 파일의 :root 에서만 정의한다. 그 밖에서는 var(--이름)으로만 쓴다. (CLAUDE.md '디자인 규칙') */

:root {
  color-scheme: light dark; /* 날짜 선택기·체크 상자도 다크 모드를 따른다 */

  /* 색 (라이트) */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1c1f26;
  --muted: #5b6270;
  --border: #d9dde5;
  --input-border: #7b8494; /* 입력 칸 테두리: 배경과 3:1 이상 */
  --accent: #1d5fd6;
  --accent-text: #ffffff;
  --warn-bg: #fff6e0;
  --warn-text: #7a5200;
  --brand-mint: #0b7a60; /* 큰 제목의 강조색 */
  --ink: #1d1d1f; /* 파스텔 카드 위의 글자 */
  --ink-muted: #46484f;
  --card-mint: #cdeee3; /* 파스텔 카드 배경. 다크 모드에서도 같은 색을 쓴다 */
  --card-blue: #cfe2f6;
  --card-lilac: #ddd3f4;
  --go-bg: #ffffff; /* 카드 오른쪽 아래 동그란 화살표 */
  --go-ink: #1d1d1f;

  /* 글꼴 */
  --font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  --font-xs: 0.85rem;
  --font-sm: 0.9rem;
  --font-md: 1rem;
  --font-lg: 1.1rem;
  --font-xl: 1.5rem;
  --font-xxl: 2rem;
  --font-card-title: 1.6rem;
  --font-hero: 2.25rem;
  --font-hero-lg: 3.5rem;
  --leading: 1.6;
  --leading-tight: 1.25;
  --tracking-tight: -0.02em;

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

  /* 모서리 */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* 크기 */
  --content-width: 960px; /* 화면이 좁으면 화면 폭을 따른다 */
  --wide-width: 1080px; /* 홈 화면의 카드 줄 */
  --reading-width: 640px; /* 글이 너무 길게 늘어지지 않게 하는 폭 */
  --input-width: 480px; /* 입력 칸과 버튼의 최대 폭 */
  --button-size: 48px;
  --tap-size: 44px;
  --border-width: 1px;
  --check-size: 18px;
  --card-height: 28rem;
  --card-column: 82%; /* 좁은 화면에서 카드 한 장의 폭(옆 카드가 살짝 보이게) */
  --page-art-width: 12rem;
  --hero-text-min: 16rem; /* 상단 배너의 글 칸 최소 폭(좁으면 그림이 아래로 내려간다) */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 색 (다크) */
    --bg: #14161b;
    --surface: #1d2027;
    --text: #eceef3;
    --muted: #a5adbb;
    --border: #353a45;
    --input-border: #7b8494;
    --accent: #6ea1ff;
    --accent-text: #0d1220;
    --warn-bg: #3a2f10;
    --warn-text: #ffd978;
    --brand-mint: #5fd9b7;
    --ink: #1d1d1f;
    --ink-muted: #46484f;
    --card-mint: #cdeee3;
    --card-blue: #cfe2f6;
    --card-lilac: #ddd3f4;
    --go-bg: #ffffff;
    --go-ink: #1d1d1f;
  }
}