/* ============================================================
   토큰. 색·글자·간격·둥글기를 여기서만 정한다.
   화면 파일에서 #b83d1c 같은 값을 직접 쓰지 않는다.
   나중에 어두운 모드를 붙일 때 이 파일만 고치면 되게 하려는 것이다.
   ============================================================ */

:root {
  /* ---------- 색 ---------- */
  --bg: #faf5ee;          /* 바탕. 종이에 가까운 따뜻한 색 */
  --paper: #fffefb;       /* 카드 */
  --cream: #f1ece4;       /* 옅은 칸, 비활성 */
  --peach: #ffe4d6;       /* 오늘 출발 카드 */
  --peach-deep: #ffd2bd;
  --mint: #dcf2e3;        /* 끝낸 것 */
  --sky: #e3edfb;         /* 뒤 일정 */
  --butter: #fff0c2;      /* D-day 칩 */

  --ink: #15181e;         /* 본문 */
  --sub: #5b616b;         /* 보조 설명 */
  --muted: #6b717a;       /* 가장 옅은 글자. 이보다 옅게 쓰지 않는다 */
  --line: #e2d9cc;        /* 선 */

  --accent: #b83d1c;      /* 로고 빨강. 지금 할 것에만 쓴다 */
  --accent-deep: #8f2f15;
  --accent-soft: #f7e7e0;
  --ok: #1f7a4d;          /* 끝냈다 */
  --warn: #93580a;        /* 확인이 필요하다. 연분홍 칩 위에서 대비 4.8 (4.5 미만이던 #a4640a 에서 바꿈) */

  /* 마스코트와 맞춘 색. 달력 점과 등껍질 칸이 같은 색이어야 한 캐릭터로 보인다 */
  --shell: #6fbf8e;
  --shell-rim: #4f9d73;
  --tile-done: #ffd66b;
  --tile-todo: #b5e1c3;
  --scarf: #2f4b7c;

  /* ---------- 글자 ---------- */
  /* 옛 화면은 크기가 12종이었고 그중 절반이 12px 이하였다. 폰에서 안 읽혔다.
     6단으로 줄이고 바닥을 13px 로 올렸다. */
  --font: 'Backcast Sans', -apple-system, BlinkMacSystemFont, system-ui,
          'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-display: 'BagelFatOne', 'Backcast Sans', var(--font);

  --fs-hero: 30px;   /* 화면당 하나 */
  --fs-title: 22px;  /* 화면 제목 */
  --fs-lg: 18px;     /* 카드 제목 */
  --fs-md: 16px;     /* 본문. 기본값 */
  --fs-sm: 14px;     /* 보조 설명 */
  --fs-xs: 13px;     /* 라벨. 이보다 작게 쓰지 않는다 */

  --lh-tight: 1.3;
  --lh-normal: 1.55;
  --lh-loose: 1.65;

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

  /* ---------- 둥글기 ---------- */
  --r-pill: 100px;
  --r-lg: 28px;
  --r-md: 22px;
  --r-sm: 16px;
  --r-xs: 10px;

  /* ---------- 그림자 ---------- */
  --shadow-card: 0 1px 2px rgba(21, 24, 30, 0.04);
  --shadow-float: 0 6px 20px rgba(21, 24, 30, 0.12);
  --shadow-sheet: 0 -8px 32px rgba(21, 24, 30, 0.16);

  /* ---------- 크기 ---------- */
  --tap: 44px;             /* 손가락이 닿는 최소 크기. 이보다 작게 만들지 않는다 */
  --page-max: 480px;       /* 폰 기준 본문 폭 */
  --wide-max: 1120px;      /* 노트북에서 목록+달력을 나란히 둘 때 */
  --header-h: 56px;
  --tabbar-h: 60px;
  --side-w: 232px;         /* 노트북에서 왼쪽 세로줄. 폰에서는 안 쓴다 */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 움직임을 줄여달라고 설정한 사람에게는 애니메이션을 끈다.
   어지럼증이 있는 사람에게 이건 취향이 아니라 접근성 문제다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}