/* Design tokens — 02-design-system.md §1 (values verbatim) and §6.2 (mobile values).
   Link this before site.css; the @import below is what loads the self-hosted fonts. */

@import url("../fonts/fonts.css");

:root {
  /* ── 색 · 밝은 면(기본) ─────────────────────────────── */
  /* §14.23 — 읽는 분들이 대부분 어르신이다. 바탕은 한지 톤(#f6f3ec)에서 순백으로
     올리고, 눌린 잉크는 전부 AAA(7:1) 위로 당겼다. 본문·내비는 9:1을 넘긴다.
     AA(4.5:1)는 통과선이지 잘 보이는 선이 아니었다. */
  --bg: #ffffff;              /* 바탕 */
  --ink: #1d1b17;             /* 본문 잉크. 제목·본문·링크 기본색 — 17.2:1 */
  --ink-soft: #2f2b24;        /* 정의형 표 값 등 살짝 눌린 잉크 — 14.1:1 */
  --body: #4f483f;            /* 본문 서브 문단 (16px 안팎) — 9.0:1 */
  --nav: #4e483e;             /* 내비게이션 링크 — 9.1:1 */
  --label: #625844;           /* 섹션 라벨(자간 0.3em)·카드 건수 — 7.0:1 */
  --faded: #4e483c;           /* 연표 연도·푸터·캡션 — 9.1:1 */
  --faded-deco: #8a7f6d;      /* 시안 원값 — 텍스트가 아닌 장식 요소에만 허용 */
  --link-hover: #942618;      /* 링크 호버 — 붉은 글자색과 같음, 8.2:1 */

  /* ── 색 · 강조 (home-a-archive 시안의 주홍을 인주 진홍으로 정착) ──
     §14.27 — 붉은색은 면이 아니라 포인트고, 붉은색은 하나다: 취지문 붉은 면,
     후원 컨트롤, 연도, 히어로 획이 전부다. 라벨·본문은 붉히지 않고, 무늬도
     넣지 않는다 — 민무늬 붉은 판이 이 팔레트의 힘이다. */
  --accent: #a5271b;        /* 인주 진홍 — 흰 글자·흰 바탕 어느 쪽과도 7.2:1(AAA) */
  --accent-hover: #841e12;
  --accent-text: var(--accent); /* 같은 붉은색 — 7.2:1이라 작은 글자에도 쓴다 */
  --accent-dark: oklch(0.72 0.17 32); /* 먹지 위 주홍 — 7.7:1 */
  --paper: #f6f3ec;         /* 한지 톤 — 히어로·여는 글 면. 본문 면은 순백을 지킨다(§14.23) */
  /* §13.4 입력 가능한 면. 바탕이 순백이 된 뒤로는 색이 아니라 테두리가 칸을 세운다. */
  --field-bg: #ffffff;

  /* ── 색 · 먹지 면(이안실 등 반전 섹션) ────────────────── */
  --dark-bg: #1a1915;         /* 먹지 배경 */
  --dark-ink: #e9e4d7;        /* 먹지 위 본문 — 13.9:1 */
  --dark-label: #bfb28a;      /* 먹지 위 라벨 — 8.3:1 */
  --dark-body: #bdbaaf;       /* 먹지 위 서브 문단 — 9.1:1 */

  /* ── 경계선 ─────────────────────────────────────────── */
  /* §14.23 — 한지 바탕에서 순백으로 올리자 같은 알파가 더 옅어 보인다. 한 단씩 올렸다. */
  --line: rgba(29, 27, 23, 0.22);        /* 구획선 1px */
  --line-strong: rgba(29, 27, 23, 0.50); /* 텍스트 링크 밑줄 */
  /* 입력칸·버튼처럼 경계선 자체가 컨트롤의 윤곽인 곳. --line-strong은 종이 위 2.17:1,
     입력칸 위 2.18:1이라 1.4.11(3:1)에 못 미친다. 0.55는 3.75:1 / 3.83:1. */
  --line-control: rgba(29, 27, 23, 0.55);
  --line-dark: rgba(233, 228, 215, 0.16);/* 먹지 면 위 구획선. 시안 확장 — --line의 명도 반전 */

  /* ── 서체 ───────────────────────────────────────────── */
  --serif: 'Nanum Myeongjo', 'Noto Serif KR', serif;  /* 400 / 700 / 800 */
  --sans:  'Noto Sans KR', sans-serif;                 /* 300 / 400 / 500 */

  /* §14.23 — 고딕 본문은 300(Light)이었다. 획이 가늘어 같은 크기라도 흐리게 읽힌다.
     크기를 올리기 전에 굵기부터 올린다: 어르신께는 이쪽이 더 크게 작용한다. */
  --w-text: 400;

  /* ── 타입 스케일 (데스크톱, §5에 모바일 값) ───────────── */
  /* §14.23 — 고딕 계열은 한 단씩 올렸다. 명조 제목은 이미 크고 굵어 그대로 둔다. */
  --fs-display: 72px;   /* 메인 표제 (명조 700, lh 1.5) */
  --fs-quote: 44px;     /* 인용 블록 (명조 400, lh 1.85) */
  --fs-h2: 34px;        /* 시기 제목·화면 표제 (명조 400, lh 1.6) */
  --fs-lead: 31px;      /* 소개 리드 문장 (명조 400, lh 1.8) */
  --fs-card: 25px;      /* 자료실 카드 제목 (명조 400) */
  --fs-year: 22px;      /* 연표 연도 (명조 400, 자간 0.06em) */
  --fs-body: 18px;      /* 본문 (고딕 400, lh 2.2) */
  --fs-read: 18.5px;    /* §9.5 읽는 글 본문 (고딕 400, lh 2.1) */
  --fs-prose: 20px;     /* §9.5 선생·추모자의 말 (명조 400, lh 2.2) */
  --fs-body-s: 17px;    /* 서브 문단 (고딕 400, lh 2.1~2.15) */
  --fs-nav: 15.5px;     /* 내비 (고딕 400, 자간 0.08em) */
  --fs-label: 15px;     /* 섹션 라벨 (자간 0.3em) */
  --fs-small: 15px;     /* 정의형 표 레이블·건수 (자간 0.16em) */
  --fs-footer: 14.5px;  /* 푸터 (자간 0.06em) */

  /* ── 여백 스케일 ────────────────────────────────────── */
  --sp-1: 22px;    /* 제목→본문 (시안 22) */
  --sp-2: 28px;    /* 표 레이블↔값 간격 */
  --sp-3: 44px;    /* 링크·버튼 위 여백 */
  --sp-4: 64px;    /* 연표 행 상하 / 카드 안쪽 / 표제→리드 */
  --sp-5: 84px;    /* 섹션 라벨→콘텐츠 */
  --sp-6: 120px;   /* 2열 그리드 열 간격 */
  --sp-section: 200px;       /* 섹션 세로 여백 표준 */
  --sp-section-hero: 210px;  /* 메인 히어로 상단 (하단 230px) */

  /* ── 레이아웃 ───────────────────────────────────────── */
  --max-w: 1240px;
  --gutter: 60px;
  /* 실측한 헤더 높이 (§14.10) — 먹지 여는 글이 화면 하나에 맞으려면 그만큼을 빼야 한다.
     §14.25에서 이름이 16 → 19px가 되며 71px로 자랐고, 주홍 윗선 4px가 더해져 75px. */
  --header-h: 75px;
  --measure-body: 26em;   /* 본문 문단 최대 폭. 시안 24~27em의 중간값 */
  --measure-article: 34em;/* 글 상세 본문 폭. 시안 확장 — 긴 산문 가독 기준(한 줄 30자 안팎) */

  /* ── 포커스 (시안 확장 — WCAG 2.4.7, 시안에 포커스 정의 없음) ── */
  --focus-ring: 2px solid #1d1b17;
  --focus-offset: 4px;
}

:root {
  /* §5.1 히어로 하단, §4.4 먹지 패딩, §4.7 이미지 여백, §8.1 저해상도 여백.
     §1에 없지만 §3.3 다섯 단계에서 파생된 값이라 여기에 모아 둔다. */
  --sp-section-hero-end: 230px;
  --sp-figure: 96px;
  --sp-figure-small: 120px;
  --sp-admin-section: 96px;
  /* §4.13's error colour. It reaches the public site only through the card
     donation form, which the design document predates. */
  --error: #7c3535;
}

/* §6.1 tablet — 거터 40px, 연표 연도 열 140px/gap 48px, 반반형 gap 64px */
@media (max-width: 1023px) {
  :root {
    --gutter: 40px;
    --sp-6: 64px;
  }
}

/* §6.2 mobile — 여백은 비율로 줄이고 본문 글자 크기는 지킨다 */
@media (max-width: 719px) {
  :root {
    --gutter: 24px;
    /* 이름 줄 + 내비 줄 + 아래 선 (§13.2·§14.10·§14.20 실측).
       §14.25 — 이름 19 → 22px로 91px, 주홍 윗선 4px를 더해 95px. */
    --header-h: 95px;
    --sp-section: 112px;
    --sp-section-hero: 128px;
    --sp-section-hero-end: 136px;
    --sp-5: 48px;
    --sp-4: 40px;
    --sp-6: 64px;
    --fs-display: clamp(38px, 10.5vw, 72px);
    --fs-quote: 28px;
    --fs-h2: 26px;
    --fs-card: 22px;
    --fs-label: 14.5px;
    --sp-figure: 56px;
    --sp-figure-small: 72px;
  }
}