/* ==========================================================================
   tokens.css — Innored Ink 디자인 토큰
   출처: .doc/design/innored_basic.md
   이 파일은 토큰 정의만 둔다. 컴포넌트 스타일은 components.css, 어드민 화면
   스타일은 admin.css 에 쓴다.
   ========================================================================== */

/* Pretendard Variable — CDN 금지 규칙에 따라 저장소에 사본을 둔다
   (public/fonts/pretendard/). 사내망에서 외부가 막혀도 글꼴이 살아 있어야 한다. */
@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* --- 색상 ------------------------------------------------------------ */
  --ink: #111111;          /* Primary. indigo/navy 로 브랜드화하지 않는다 */
  --ink-70: #4a4a48;
  --ink-50: #77776f;
  --ink-30: #a3a39b;

  --bg: #f7f7f5;
  --bg-subtle: #efefea;
  --surface: #ffffff;
  --border: #e6e6e1;

  --accent: #0e7490;       /* 시스템 블루 대신 반드시 이 틸을 쓴다 */
  --success: #047857;
  --warn: #b45309;
  --danger: #b91c1c;

  /* 브랜드 레드 — "INNORED" 라는 단어 자체에만 쓴다.
     경고·위험 텍스트에는 --danger 를 쓴다. */
  --innored: #f91112;

  /* 상태 tint — 배지·스트라이프·배경에만 쓴다. 본문/제목은 항상 --ink */
  --success-tint: #e6f2ee;
  --warn-tint: #f8eede;
  --danger-tint: #f7e5e5;
  --accent-tint: #e2eff2;

  /* 어두운 셸(사이드바) */
  --ink-surface: #111111;
  --ink-surface-2: #1c1c1a;
  --on-ink: #f7f7f5;
  --on-ink-dim: #9c9c94;
  --on-ink-border: #2e2e2b;

  /* --- 타이포그래피 ----------------------------------------------------- */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, 'Malgun Gothic', '맑은 고딕', sans-serif;

  --fs-display: 32px;   --lh-display: 1.22;  --fw-display: 700;
  --fs-title: 22px;     --lh-title: 1.3;     --fw-title: 700;
  --fs-heading: 17px;   --lh-heading: 1.4;   --fw-heading: 600;
  --fs-lead: 15px;      --lh-lead: 1.6;      --fw-lead: 400;
  --fs-body: 14px;      --lh-body: 1.6;      --fw-body: 400;
  --fs-caption: 12.5px; --lh-caption: 1.5;   --fw-caption: 400;

  /* --- 간격 · 모양 ------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17, 17, 17, .06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, .10);
  --shadow-lg: 0 24px 64px rgba(17, 17, 17, .18);

  --sidebar-w: 232px;
  --topbar-h: 56px;

  /* 모션은 페이드 수준으로만 제한한다 (하드 룰) */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}