/* ============================================================
   DASAA 디자인 토큰 — 팔레트 A "Soft Coral"
   색을 바꾸려면 이 파일만 고치면 사이트 전체에 반영됩니다.

   2026-08-26 개편: 색 값은 그대로 두되 역할을 바꿨습니다.
   잉크(--ink)가 '다크 섹션 배경'에서 '플레이트를 만드는 재료'로,
   코랄(--primary)이 '가는 선'에서 '채워진 면'으로 옮겨갔습니다.
   근거는 docs/디자인-결정-기록.md 4절.
   ============================================================ */

:root {
  /* --- 팔레트 (값 변경 없음) --------------------------------- */
  --primary: #D9755A;        /* 신호색. 채워진 면으로 씁니다. 본문 텍스트에는 쓰지 않습니다. */
  --primary-deep: #A4472D;   /* hover · 링크·흐름 라인 글자색.
                                #C25F45 은 15px 글자에서 3.91:1 로 AA 미달이라 한 단계 낮췄습니다.
                                배경 5.57 · 카드 5.97 · 틴트 4.96 으로 전부 통과합니다. */
  --primary-soft: #E9A48F;   /* 다크 배경 위의 코랄 */
  --secondary: #4A5568;      /* 본문·서브 텍스트 */
  --tint: #F6E7E1;           /* 배지·콜아웃 배경 */
  --bg: #F8F7F4;             /* 페이지 기본 배경 (웜 라이트) */
  --paper: #FFFFFF;          /* 카드·타일 배경 */
  --ink: #131313;            /* 헤딩 + 플레이트 재료 + 다크 섹션 배경 */
  --mid: #A8A29E;            /* 캡션 */
  --border: #E5E1DC;         /* 헤어라인 */

  /* 다크 배경 위에서 쓰는 값 */
  --on-dark: #FAF9F7;
  --on-dark-mid: #9C9791;
  --on-dark-border: #2A2A2A;

  /* --- 타이포 ------------------------------------------------
     서체는 둘뿐입니다. 국문 Pretendard, 라틴·숫자 Archivo.

     폭(wdth) 축은 세 개까지 쓰다가 "제각각"으로 읽혀서 규칙을 세웠습니다:
       기본 100  — 이게 기본값입니다. 특별한 이유가 없으면 이걸 씁니다
       라벨 112  — 대문자 라벨(플레이트·메뉴·섹션 라벨)에만
       코드 125  — 지역 보드의 TH·SG 두 글자 코드에만. 사이트에서 한 곳뿐입니다
     즉 기본에서 벗어나는 건 딱 두 가지 용도이고, 둘 다 이유가 분명합니다.
     ------------------------------------------------------------ */
  --font-kr: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-en: 'Archivo', var(--font-kr);

  --normal: 'wdth' 100;      /* 기본 — 본문·데이터·캡션 */
  --wide: 'wdth' 112;        /* 대문자 라벨 전용 */
  --wider: 'wdth' 125;       /* 지역 코드 전용 */

  /* --- 글자 크기 ----------------------------------------------
     두 갈래로 나뉩니다. 이 목록 밖의 크기는 쓰지 마세요 —
     일회용 clamp() 를 흩어놓으면 규칙이 사라집니다.

       본문 계열  13 · 15 · 17          (2px 간격, 촘촘하게 구분)
       제목 계열  21 · 26 · 33 · 41 · 52 · 65   (본문 17px 에서 1.25배씩)

     2026-08-26: 전반적으로 작다는 지적에 따라 한 단계씩 올렸습니다.
     (본문 16→17, 보조 14→15, 캡션 12→13, 플레이트 11→13)
     ------------------------------------------------------------ */
  --fs-xs: 0.8125rem;        /* 13 — 플레이트·캡션·태그 */
  --fs-sm: 0.9375rem;        /* 15 — 보조 텍스트·버튼·설명 */
  --fs-body: 1.0625rem;      /* 17 — 본문 */

  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);    /* 17 → 21 */
  --fs-h3: clamp(1.1875rem, 1.025rem + 0.67vw, 1.625rem);   /* 19 → 26 */
  --fs-h2: clamp(1.4375rem, 1.15rem + 1.2vw, 2.0625rem);    /* 23 → 33 */
  --fs-h1: clamp(1.75rem, 1.3rem + 1.9vw, 2.5625rem);       /* 28 → 41 */
  --fs-display: clamp(2rem, 1.3rem + 3vw, 3.25rem);         /* 32 → 52 — 지역 코드·대형 영문 */
  --fs-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4.0625rem);     /* 36 → 65 */

  --lh-tight: 1.14;
  --lh-body: 1.72;

  /* --- 공간 -------------------------------------------------- */
  --wrap: 1200px;
  --wrap-narrow: 720px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* 사이니지 판때기 — 모서리를 바짝 조입니다.
     둥근 카드(예전 14/22px)도 아니고 각진 신문(0px)도 아닌 지점입니다. */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 8px;

  /* 보드 좌측 레일 — 코드 플레이트가 서는 자리. 사이트 전체가 이 선에 맞춰 정렬됩니다. */
  --rail: clamp(3.25rem, 7vw, 5.25rem);
  --rail-gap: clamp(1rem, 2.4vw, 2rem);

  --shadow-sm: 0 1px 2px rgba(19, 19, 19, .05);
  --shadow: 0 12px 32px -18px rgba(19, 19, 19, .28);
  --shadow-lg: 0 28px 64px -32px rgba(19, 19, 19, .38);

  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (max-width: 640px) {
  :root { --header-h: 60px; }
}