/* DOYEONMATH 사이트 디자인 토큰 — WEB-DESIGN.md 2~5
   색·글꼴·크기·간격·움직임은 이 파일에만 값으로 적고, 다른 CSS에서는 var(--…)만 쓴다.
   이 파일만 고치면 사이트 전체가 바뀐다. (인스타 이미지는 DESIGN.md를 따르며 이 파일과 무관)

   면(surface) 두 가지: 기본은 종이. 먹 섹션은 요소에 data-surface="ink"를 붙이면 의미 변수(--bg, --fg …)가 반전된다.
   글자 대비 (WCAG): 글자/바탕 14.7 · 보조 글자 5.6(종이) 6.3(먹) 4.8(짙은 종이) · 남색/종이 9.3 */

:root {
  /* ── 원색 (교재 Mind Set 표지·내지에서 가져옴) ── */
  --c-ink: #161614;          /* 먹: 표지 키캡 */
  --c-ink-raised: #201F1C;   /* 먹 위의 받침면 (교재 무대 등) */
  --c-paper: #ECE7DE;        /* 종이: 표지 종이 */
  --c-paper-deep: #DCD5C9;   /* 짙은 종이: 문제 지면 받침, 사고 흐름 띠 */
  --c-graphite: #5E5950;     /* 흑연: 종이 위 보조 글자 */
  --c-graphite-light: #9D978C; /* 흑연(밝은): 먹 위 보조 글자 */
  --c-rule: #CBC3B5;         /* 종이 위 가는 선 (장식선, 글자 아님) */
  --c-rule-ink: #34322D;     /* 먹 위 가는 선 */
  --c-mindset: #1F3A5E;      /* Mind Set 남색: 교재·링크·선택 표시. 한 화면에 한 군데 */
  --c-sheet: #FFFFFF;        /* 교재 표지·책등의 흰 종이 (3D 책에만) */
  --c-sheet-edge: #E9E7E2;   /* 3D 책 종이 단면 */

  /* ── 의미 변수 (기본 = 종이 면) ── */
  --bg: var(--c-paper);
  --bg-raised: var(--c-paper-deep);
  --fg: var(--c-ink);
  --fg-muted: var(--c-graphite);
  --rule: var(--c-rule);
  --rule-strong: var(--c-ink);        /* 탭 밑줄·표 머리선 등 구분이 정보인 선 */
  --accent: var(--c-mindset);
  --focus: var(--c-mindset);
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-paper);

  /* ── 글꼴 (Paperlogy 하나 + 수식은 KaTeX) ── */
  --font-sans: 'Paperlogy', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --w-regular: 400;
  --w-bold: 700;
  --w-display: 800;          /* 첫 화면 DOYEONMATH 한 곳만 */

  /* ── 글자 크기 (1.25배 간격) ── */
  --fs-xs: 14px;     /* 캡션, 꼬리말 */
  --fs-body: 17px;   /* 본문 — 이보다 작게 쓰지 않음 (캡션 제외) */
  --fs-lead: 21px;   /* 긴 소개 문장 */
  --fs-h4: 26px;
  --fs-h3: 33px;
  --fs-h2: 41px;
  --fs-h1: 52px;
  --fs-display: 80px;
  --fs-hero: clamp(72px, 12vw, 160px);   /* 첫 화면 DOYEON MATH */
  --lh-body: 1.75;
  --lh-heading: 1.25;
  --lh-display: 0.95;
  --tracking-nav: 0.02em;   /* 메뉴 대문자: 넓히지 않음 */

  /* ── 간격 (8px 기준) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 144px;
  --gutter: 20px;           /* 모바일 좌우 여백 (768px 이상 32px) */

  /* ── 폭 ── */
  --w-page: 1200px;         /* 페이지 최대 폭 (1920에서도 그대로, 여백만 커짐) */
  --w-text: 680px;          /* 본문 단: 한글 한 줄 38~42자 */

  /* ── 모양 ── */
  --radius: 0;              /* 모서리는 모두 직각 */
  --rule-w: 1px;
  --rule-w-strong: 2px;

  /* ── 움직임 (5단계 emil-design-eng에서 다듬음) ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* 나타남·누름: 바로 반응 */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* 화면 안에서 자리 이동 (책이 옆으로, 다이얼 회전) */
  --dur-fast: 160ms;        /* 누름, 탭 전환 */
  --dur-base: 240ms;        /* 해설 펼침, 확대 창, 메뉴 열기 */
  --dur-move: 420ms;        /* 다이얼 회전, 접기(되돌아가기) */
  --dur-slow: 900ms;        /* 교재 펼침, 첫 화면 등장 */
  --stagger: 70ms;          /* 내지 차라락 간격 */
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --fs-body: 18px; }
}

/* 먹 면: 섹션 요소에 data-surface="ink" */
[data-surface="ink"] {
  --bg: var(--c-ink);
  --bg-raised: var(--c-ink-raised);
  --fg: var(--c-paper);
  --fg-muted: var(--c-graphite-light);
  --rule: var(--c-rule-ink);
  --rule-strong: var(--c-paper);
  --accent: var(--c-paper);          /* 먹 위에서는 남색 대신 종이색으로 강조 */
  --focus: var(--c-paper);
  --btn-bg: var(--c-paper);
  --btn-fg: var(--c-ink);
}

/* 교재 섹션만 남색 면을 쓸 수 있음: data-surface="mindset" */
[data-surface="mindset"] {
  --bg: var(--c-mindset);
  --bg-raised: var(--c-ink);
  --fg: var(--c-paper);
  --fg-muted: var(--c-paper);
  --rule: var(--c-paper);
  --rule-strong: var(--c-paper);
  --accent: var(--c-paper);
  --focus: var(--c-paper);
  --btn-bg: var(--c-paper);
  --btn-fg: var(--c-mindset);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-move: 0ms; --dur-slow: 0ms; --stagger: 0ms; }
}