/* tokens.css - 환경장애인신문 디자인 토큰 정본 (design-kit v6.3)
 * 컴포넌트는 아래 "역할" 토큰만 참조한다. 값을 바꾸면 DESIGN.md 결정 로그에 남긴다. */
:root {
  color-scheme: light;

  /* ---- 서체: 지면처럼 고딕 제목 + 명조 부제 ---- */
  --font-display: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;

  /* ---- 타입 스케일: 360px → 1440px 유동, 비율 약 1.25 ---- */
  --text-xs: 0.8125rem;                                        /* 13 */
  --text-sm: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem); /* 14 → 15 */
  --text-base: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);   /* 16 → 17 */
  --text-article: 1.125rem; /* 18 기사 본문 (국내 언론 4곳 390폭 모두 18px, 2026-10-22) */
  --text-lg: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);   /* 18 → 20 */
  --text-xl: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);     /* 20 → 24 */
  --text-2xl: clamp(1.375rem, 1.2292rem + 0.6481vw, 1.875rem); /* 22 → 30 */
  --text-3xl: clamp(1.625rem, 1.3333rem + 1.2963vw, 2.5rem);   /* 26 → 40 */
  --text-4xl: clamp(1.75rem, 1.3333rem + 1.8519vw, 2.75rem);   /* 28 → 44 */
  --text-5xl: var(--text-4xl); /* 뉴스: 디스플레이 최대 44px */

  --leading-display: 1.3;
  --leading-heading: 1.35;
  --leading-body: 1.8;
  --tracking-display: -0.025em;
  --tracking-body: -0.005em;
  --tracking-caps: 0.06em;
  --measure: 34em;
  --measure-narrow: 24em;

  /* ---- 간격: 4px 기반 ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem;   --space-8: 2rem;    --space-12: 3rem;   --space-16: 4rem;
  --space-24: 6rem;    --space-32: 8rem;   --space-40: 10rem;
  --section-y: clamp(2.5rem, 2rem + 2.2222vw, 4rem);           /* 40 → 64 */
  --section-y-tight: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem); /* 24 → 36 */
  --gutter: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);           /* 16 → 32 */
  --container: 76rem;
  --container-wide: 90rem;
  --header-h: 3.5rem;
  --aside-w: 20rem;

  /* ---- 형태: 각짐 ---- */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-full: 999px;
  --border-width: 1px;

  /* ---- 색 (대비는 DESIGN.md 3장) ---- */
  --color-bg: #FFFFFF;
  --color-surface: #F6F7F4;            /* 종이색 */
  --color-surface-2: #ECEEE9;
  --color-border: #DADFD8;
  --color-border-strong: #8A938C;      /* bg 3.2:1 */
  --color-text: #1A1A1A;               /* bg 17.4:1 */
  --color-text-muted: #5F6661;         /* bg 5.9:1 */
  --color-accent: #2E6B1A;             /* bg 6.5:1 */
  --color-accent-hover: #234F14;
  --color-accent-tint: #EEF5E6;
  --color-accent-line: rgb(46 107 26 / 0.7); /* 지면 기사 영역 테두리, 흰 바탕 3.4:1 */
  --color-on-accent: #FFFFFF;
  --color-float: rgb(255 255 255 / 0.94);  /* 사진 위 둥근 버튼 바탕 */
  --color-overlay: rgb(26 26 26 / 0.66);   /* 사진 위 글자 바탕(흰 글자, 흰 사진 위에서도 5.3:1) */
  --color-accent-wash: rgb(46 107 26 / 0.12);   /* 지면 기사 영역 hover 바탕 */
  --color-overlay-hover: rgb(255 255 255 / 0.12); /* 어두운 바탕 위 버튼 hover */
  --color-brand-green: #88C040;        /* 제호 연두. 장식 선 전용, 글자 금지 */
  --color-brand-red: #C8161E;          /* bg 5.9:1 */
  --color-focus: #2E6B1A;
  --color-success: #2E6B1A;
  --color-warning: #8A5A00;            /* bg 5.6:1 */
  --color-danger: #C8161E;

  /* ---- 깊이: 그림자 없음, 선으로 나눈다 ---- */
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgb(26 26 26 / 0.14); /* 모바일 메뉴 패널만 */
  --shadow-float: 0 2px 8px rgb(26 26 26 / 0.22); /* 사진 위에 얹은 버튼(광고 화살표)만 */

  /* ---- 모션 ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* ---- 레이어 ---- */
  --z-raised: 10; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400;
}