/* ─────────────────────────────────────────────────────────
   Hyunjun-Kim.me · Design Tokens
   Editorial Sharpness — 웹 확장 (아디 Visual v1 기반)
   단일 악센트: Deep Navy #1E3A5F
   ───────────────────────────────────────────────────────── */

:root {
  /* ─── Color · Base (이력서와 완전 일치) ─── */
  --color-ink:       #0F1419;
  --color-graphite:  #4B5563;
  --color-stone:     #E5E7EB;
  --color-hairline:  #D1D5DB;
  --color-paper:     #FFFFFF;
  --color-whisper:   #FAFAFA;

  /* ─── Color · Accent (Web 단일: Deep Navy) ─── */
  --color-accent:        #1E3A5F;
  --color-accent-hover:  #152A47;
  --color-accent-light:  #E8EEF5;

  /* ─── Color · Semantic / State ─── */
  --color-focus-ring:    #1E3A5F;
  --color-selection-bg:  rgba(30, 58, 95, 0.15);
  --color-disabled:      #9CA3AF;

  /* ─── Color · Overlay (Modal) ─── */
  --color-overlay:       rgba(15, 20, 25, 0.85);

  /* ─── Typography · Font stack ─── */
  --font-ko:   "Pretendard Variable", "Pretendard", "Noto Sans KR",
               -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Malgun Gothic", sans-serif;
  --font-en:   "Inter", "Pretendard Variable", "Pretendard",
               -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Arial, sans-serif;
  --font-num:  "Inter", "Pretendard Variable", sans-serif;

  /* ─── Typography · Scale (Desktop · ≥1024px) ─── */
  --fs-hero:         3rem;       /* 48px — Welcome 이름 */
  --fs-display:      2.5rem;     /* 40px — 페이지 타이틀 / 404 */
  --fs-declaration:  1.5rem;     /* 24px — Profile 선언 */
  --fs-h1-section:   0.8125rem;  /* 13px — 섹션 제목 (uppercase) */
  --fs-h2-case:      1.125rem;   /* 18px — Case Study 제목 */
  --fs-h3-tile:      1.125rem;   /* 18px — Overview 타일 제목 */
  --fs-body:         1rem;       /* 16px — 본문 */
  --fs-body-sm:      0.875rem;   /* 14px — 타일 요약 */
  --fs-meta:         0.6875rem;  /* 11px — 연도·회사·Credential */
  --fs-caption:      0.5625rem;  /* 9px — 푸터·캡션 */
  --fs-note-label:   0.75rem;    /* 12px — "Note" 라벨 */

  /* ─── Typography · Weight ─── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ─── Typography · Line-height ─── */
  --lh-tight:    1.2;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.6;
  --lh-loose:    1.7;
  --lh-note:     1.8;

  /* ─── Typography · Letter-spacing ─── */
  --ls-hero:        -0.02em;
  --ls-declaration: -0.01em;
  --ls-section:     0.08em;
  --ls-meta:        0.02em;
  --ls-mono:        0.04em;
  --ls-note:        0.06em;

  /* ─── Spacing ─── */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4 */
  --space-2:   0.5rem;   /* 8 */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-24:  6rem;     /* 96 */

  /* ─── Layout ─── */
  --header-h-desktop:  56px;
  --header-h-mobile:   48px;
  --subnav-h:          48px;
  --content-max:       960px;
  --portfolio-max:     1200px;

  /* ─── Radius (Sharp edges · Editorial) ─── */
  --radius-0:  0;
  --radius-1:  2px;
  --radius-2:  4px;

  /* ─── Border ─── */
  --border-hair:  1px;
  --border-rule:  2px;

  /* ─── Z-index ─── */
  --z-sticky-header:  100;
  --z-sticky-subnav:  90;
  --z-modal-overlay:  1000;
  --z-modal:          1010;
  --z-toast:          1100;

  /* ─── Motion ─── */
  --ease-std:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick:    0.1s;
  --dur-base:     0.2s;
  --dur-entry:    0.3s;
  --dur-slow:     0.5s;
}

/* ─── Typography · Responsive Scale (Mobile · <768px) ─── */
@media (max-width: 767px) {
  :root {
    --fs-hero:         2rem;       /* 32 */
    --fs-display:      1.75rem;    /* 28 */
    --fs-declaration:  1.25rem;    /* 20 */
    --fs-h1-section:   0.75rem;    /* 12 */
    --fs-h2-case:      1rem;       /* 16 */
    --fs-h3-tile:      1rem;       /* 16 */
    --fs-body:         0.9375rem;  /* 15 */
    --fs-body-sm:      0.8125rem;  /* 13 */
    --fs-meta:         0.6875rem;  /* 11 */
    --fs-caption:      0.5625rem;  /* 9 */
    --fs-note-label:   0.75rem;    /* 12 */
  }
}

/* ─── Reduced Motion 전역 대응 ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick:  0.01ms;
    --dur-base:   0.01ms;
    --dur-entry:  0.01ms;
    --dur-slow:   0.01ms;
  }
}