/* ═══════════════════════════════════════════════════════════════
   김의영 — Design Tokens
   ───────────────────────────────────────────────────────────────
   3계층. 아래 방향으로만 참조한다.

     1. PRIMITIVE   원시값. 색 ramp · 타입 스케일 · 공간 스케일.
                    역할을 모른다. 테마와 무관하다.
     2. SEMANTIC    역할. bg-page / fg-muted / border 처럼 "무엇에 쓰는가".
                    ★ 테마 전환은 오직 이 계층에서만 일어난다.
     3. COMPONENT   components.css. SEMANTIC 만 참조한다.

   규칙
     · 컴포넌트가 --n-500 같은 PRIMITIVE 를 직접 쓰면 안 된다.
       그 순간 다크 모드에서 깨진다.
     · 색 리터럴(#hex)은 이 파일 PRIMITIVE 블록에만 존재한다.
     · 새 색이 필요하면 ramp 에서 고른다. ramp 에 없으면 ramp 를 늘린다.

   타이포그래피는 type.css 가 담당한다. 이 파일은 색 · 공간 · 레이아웃만 다룬다.

   컨셉
     제도용지(차가운 회록) 위의 잉크. 신호색은 둘 뿐이다.
       accent = 도면 블루 — "그은 선", 채택된 것
       danger = 벽돌     — "포기한 것"
     모든 결정에 남긴 쪽과 버린 쪽이 있어서 신호색이 두 개다.
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. PRIMITIVE
   ─────────────────────────────────────────────────────────────── */
:root{

  /* ── 중립 ramp — 회록(hue ≈ 150) 저채도. 밝음 → 어두움 ────── */
  --n-0:    #FFFFFF;
  --n-25:   #F3F5F1;
  --n-50:   #E9EBE7;   /* 제도용지 */
  --n-100:  #E3E6E1;
  --n-200:  #D8DCD5;
  --n-300:  #C9CEC7;
  --n-400:  #AEB7B3;
  --n-500:  #9AA49F;
  --n-600:  #8C958F;
  --n-700:  #616A68;
  --n-800:  #3F4645;
  --n-850:  #2C3330;
  --n-900:  #242A28;
  --n-925:  #1E2422;
  --n-950:  #1A1F1D;
  --n-960:  #16191A;   /* 잉크 */
  --n-975:  #131715;
  --n-1000: #0B0E0D;

  /* ── 도면 블루 — 그은 선 · 채택 ───────────────────────────── */
  --b-100: #DCE6EF;
  --b-300: #6FB2E8;
  --b-500: #0F5FA6;
  --b-900: #16303F;

  /* ── 벽돌 — 포기한 것 ─────────────────────────────────────── */
  --r-300: #DE8B77;
  --r-500: #A33A2A;

  /* ── 공간 — 4px 베이스 ────────────────────────────────────── */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;   --sp-6: 24px;   --sp-7: 28px;  --sp-8: 32px;
  --sp-10:40px;   --sp-12:48px;   --sp-14:56px;  --sp-16:64px;
  /* 2026-08-17 타입 스케일 개정에 맞춰 축소 (86 → 62).
     제목이 33→25 로 내려갔는데 섹션 간격을 두면 비율이 어긋난다. */
  --sp-section: clamp(36px, 4.8vw, 62px);
  --sp-gutter:  clamp(20px, 5vw,   52px);

  /* ── 측정 — 한 줄 길이. 한글은 라틴보다 짧게 잡는다 ───────── */
  --measure-narrow: 44ch;
  --measure:        52ch;
  --measure-wide:   60ch;

  /* ── 선 ───────────────────────────────────────────────────── */
  --bw:        1px;
  --bw-accent: 3px;

  /* ── 레이아웃 ─────────────────────────────────────────────── */
  --w-page: 1080px;
  --w-rail: 132px;   /* 왼쪽 레일 — 세로 괘선이 여기서 시작한다 */
  --w-gap:  40px;
  --h-nav:  56px;

  /* ── 층위 ─────────────────────────────────────────────────── */
  --z-jump: 15;
  --z-nav:  20;

}


/* ───────────────────────────────────────────────────────────────
   2. SEMANTIC — 라이트
   ★ 테마 전환은 이 블록의 재정의로만 이루어진다.
   ─────────────────────────────────────────────────────────────── */
:root{
  /* 면 */
  --bg-page:     var(--n-50);
  --bg-raise:    var(--n-25);    /* 페이지보다 뜬 면 — 카드 hover, 현재 직장 */
  --bg-sunken:   var(--n-100);
  --bg-inverse:  var(--n-900);   /* 다크 배너 — 판단·근거를 담는 면 */

  /* 글 */
  --fg-strong:   var(--n-960);   /* 제목 · 키워드 */
  --fg:          var(--n-800);   /* 본문 */
  --fg-muted:    var(--n-700);   /* 개조식 보조설명 — AA 확보 필수 */
  --fg-on-inverse:       var(--n-0);
  --fg-body-on-inverse:  #DFE4DF;
  --fg-muted-on-inverse: var(--n-500);

  /* 선 */
  --border:            var(--n-300);
  --border-subtle:     var(--n-200);
  --border-on-inverse: #333A38;

  /* 신호 */
  --accent:         var(--b-500);
  --accent-surface: var(--b-100);
  --accent-on-inverse: var(--b-300);   /* 어두운 면 위 신호색 */
  --danger:         var(--r-500);

  /* 합성 */
  --bg-nav: rgba(233, 235, 231, .86);
}

/* SEMANTIC — 다크 (OS 설정. 명시적 라이트 선택이 이긴다) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-page:     var(--n-975);
    --bg-raise:    var(--n-925);
    --bg-sunken:   var(--n-950);
    --bg-inverse:  var(--n-1000);

    --fg-strong:   #E7EBE6;
    --fg:          var(--n-400);
    --fg-muted:    var(--n-600);
    --fg-on-inverse:       #E7EBE6;
    --fg-body-on-inverse:  #C7CEC9;
    --fg-muted-on-inverse: #98A29D;

    --border:            var(--n-850);
    --border-subtle:     var(--n-900);
    --border-on-inverse: var(--n-900);

    --accent:         var(--b-300);
    --accent-surface: var(--b-900);
    --accent-on-inverse: var(--b-300);
    --danger:         var(--r-300);

    --bg-nav: rgba(19, 23, 21, .86);
  }
}

/* SEMANTIC — 다크 (명시적 선택. 토글이 OS 를 이긴다) */
:root[data-theme="dark"]{
  --bg-page:     var(--n-975);
  --bg-raise:    var(--n-925);
  --bg-sunken:   var(--n-950);
  --bg-inverse:  var(--n-1000);

  --fg-strong:   #E7EBE6;
  --fg:          var(--n-400);
  --fg-muted:    var(--n-600);
  --fg-on-inverse:       #E7EBE6;
  --fg-body-on-inverse:  #C7CEC9;
  --fg-muted-on-inverse: #98A29D;

  --border:            var(--n-850);
  --border-subtle:     var(--n-900);
  --border-on-inverse: var(--n-900);

  --accent:         var(--b-300);
  --accent-surface: var(--b-900);
  --accent-on-inverse: var(--b-300);
  --danger:         var(--r-300);

  --bg-nav: rgba(19, 23, 21, .86);
}