/*
  해몽 디자인 토큰. 모든 화면의 유일한 스타일 근거예요.
  세계: 한 화면에 한 가지 일. 흰 바탕, 회색 상자, 둥근 카드, 깊은 남빛 강조색 하나.
  굵고 큰 제목, 넉넉한 여백, 화면 아래에 붙는 넓은 버튼. 상징은 손으로 그린 그림 아이콘으로 보여요.
  페이지는 /styles/tokens.css 다음에 /styles/base.css 순서로 링크해요.
  색은 6자리 hex로 써요 (tests/tokens.test.js가 읽어요).
  웹폰트는 쓰지 않아요. 시스템 한글 서체만 써요.
*/
:root {
  /* 색: 바탕과 글씨 */
  --color-bg: #ffffff;          /* 바탕. 먹색 글씨와 16.46:1 */
  --color-surface: #f3f4f7;     /* 회색 상자(카드, 입력칸, 칩). 먹색 글씨와 14.96:1 */
  --color-raised: #ffffff;      /* 회색 바탕 위에 올린 흰 카드 */
  --color-wash: #f7f8fa;        /* 구역을 나누는 아주 옅은 회색 띠 */
  --color-ink: #1b1f2a;         /* 글씨 */
  --color-muted: #474f5f;       /* 보조 글씨. 바탕 8.0:1, 회색 상자 7.3:1. 흐리게 쓰지 않아요 */
  --color-line: #e4e6eb;        /* 아주 옅은 나눔선 (글씨에는 쓰지 않아요) */
  --color-line-strong: #80868f; /* 꼭 보여야 하는 경계. 바탕 3.67:1 */
  --color-veil: #e3e6ee;        /* 비활성 버튼, 누르는 중인 회색 요소, 회색 상자 안 나눔선 */
  --color-lock-from: #e9ecfa;   /* 잠긴 낱말(가린 말) 바탕의 밝은 쪽 */
  --color-lock-to: #d5dbf6;     /* 잠긴 낱말 바탕의 진한 쪽. 그 위 남빛 자물쇠 6.4:1 */
  --color-wash-indigo: #f5f6fd; /* 구역 띠: 옅은 남빛 (사주, 리포트 차례) */
  --color-wash-warm: #fff8ec;   /* 구역 띠: 따뜻한 크림 (이어지는 말, 핵심 문장). 먹색 글씨 15.6:1 */
  --color-tier-mint: #2f7d68;   /* 티어 점·그림 선 (글씨에는 쓰지 않아요) */
  --color-tier-amber: #b07612;
  --color-tier-indigo: #3341a8;

  /* 색: 강조는 깊은 남빛 하나. 누르는 것, 고른 것, 진행 막대 */
  --color-accent: #3341a8;      /* 남빛. 흰 바탕 위 글씨로도 8.53:1 */
  --color-accent-ink: #ffffff;  /* 남빛 위 글씨 8.53:1 */
  --color-accent-press: #26318a;/* 누르는 중 */
  --color-accent-soft: #eceefa; /* 고른 칩·고른 요금 바탕. 남빛 글씨 7.38:1 */
  --color-notice: #f3f4f7;      /* 차분한 안내 바탕 */
  --color-selection: #d6daf5;   /* 글자를 고를 때 */

  /* 색: 머리 색면. 결과 화면의 요약 카드와 사전 머리에만 써요 */
  --color-field: #1f2a63;       /* 깊은 남색. 흰 글씨 13.38:1 */
  --color-field-ink: #ffffff;
  --color-field-muted: #d3d8f2; /* 색면 위 보조 글씨 9:1 이상 */

  /* 색: 상징 그림 물감. 그림에만 써요 (글씨 색으로 쓰지 않아요) */
  --icon-indigo: #4252c4;
  --icon-navy: #26318a;
  --icon-coral: #f07a5f;
  --icon-amber: #f6b743;
  --icon-mint: #3fb495;
  --icon-sky: #8fb4f5;
  --icon-pale: #dfe4fb;
  --icon-cream: #fff4dd;
  --icon-white: #ffffff;
  --icon-ink: #2a2f45;
  --tile-indigo: #eceefa;
  --tile-amber: #fff3dc;
  --tile-mint: #e3f5ef;
  --tile-coral: #fdebe6;
  --tile-sky: #e8effd;

  /* 서체: 시스템 한글 서체만 */
  --font-body: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", "맑은 고딕", system-ui, -apple-system, sans-serif;
  --font-display: var(--font-body);
  --font-numeric: var(--font-body);
  --weight-regular: 400;
  --weight-bold: 700;
  --tracking-display: -0.03em;
  --tracking-body: -0.01em;

  /* 글자 크기: 본문 18px 이상, 작은 글자 16px 이상 */
  --text-small: 16px;
  --text-body: 18px;
  --text-lead: 20px;
  --text-title: 22px;
  --text-h2: 26px;
  --text-h1: clamp(30px, 2.4vw + 21px, 40px);
  --text-display: clamp(32px, 3.4vw + 20px, 60px);
  --text-price: 30px;
  --line-body: 1.7;
  --line-heading: 1.35;
  --line-tight: 1.25;

  /* 간격: 4의 배수 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --gutter: 20px;               /* 좁은 화면 좌우 여백 */

  /* 모양: 둥근 카드, 테두리 없이 */
  --radius: 16px;
  --radius-small: 8px;
  --radius-large: 24px;
  --radius-pill: 999px;
  --hairline: 1px;
  --border-width: 2px;          /* 입력칸 초점, 고른 칩·요금 (강제 색 모드에서도 보여요) */
  --seam-gap: 4px;
  --shadow-raise: 0 2px 6px #1b1f2a14, 0 8px 20px #3341a833;
  --shadow-card: 0 1px 3px #1b1f2a0f, 0 8px 28px #1b1f2a14;
  --shadow-float: 0 -8px 24px #1b1f2a14;
  --shadow-soft: 0 1px 2px #1b1f2a0d, 0 6px 18px #1b1f2a0f; /* 회색 띠 위에 올린 흰 판 (상징 줄, 목차, 장) */
  --shadow-hero: 0 2px 4px #1f2a6314, 0 16px 40px #1f2a6329; /* 남색 요약 색면 */

  /* 누르는 곳: 버튼 56px 이상, 그 밖에 48px 이상 */
  --button-height: 60px;
  --tap-min: 48px;
  --focus-width: 3px;
  --focus-offset: 3px;

  /* 폭 */
  --measure: calc(34 * var(--text-body)); /* 본문 최대 폭. 한글 18px 기준 한 줄 약 33자 */
  --page-max: 40em;
  --wide-max: 1120px;

  /* 하단 바와 안전 영역 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sticky-gap: var(--space-4);

  /* 움직임: 짧고 조용하게 */
  --duration-quick: 120ms;
  --duration-calm: 240ms;
  --duration-settle: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-wait-step: 5000ms; /* 대기 화면 한 단계. src/intake.js의 setInterval(tick,5000)과 같아야 해요 */

  /* 화면 낭독기 전용 요소 */
  --sr-size: 1px;
  --sr-offset: -1px;

  color-scheme: light;
}