:root {
  /* ── 색상 원시값 */
  --c-black:      #0a0a0a;
  --c-white:      #ffffff;
  --c-off-white:  #fafaf8;
  --c-dim:        #8a8a85;
  --c-line:       #e6e6e1;

  /* ── 색상 시맨틱 */
  --bg:           var(--c-white);
  --bg-2:         var(--c-off-white);
  --fg:           var(--c-black);
  --fg-dim:       var(--c-dim);
  --line:         var(--c-line);
  --invert-bg:    var(--c-black);
  --invert-fg:    var(--c-white);

  /* ── 타이포그래피 */
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --slab: 'Roboto Slab', 'Rockwell', 'Courier New', serif;

  --t-base: 11px;
  --t-xs:   7.5px;

  /* ── 스페이싱 */
  --sp-2xs:  2px;
  --sp-xs:   4px;
  --sp-sm:  10px;
  --sp-md:  14px;
  --sp-lg:  22px;
  --sp-xl:  48px;
  --sp-2xl: 64px;
  --sp-row: 10px;

  /* ── 레이아웃 */
  --row-h:        22px;
  --gnb-h:        72px;
  --gnb-center-w: 60px;
  --footer-h:     56px;
  --header-gap:  126px;
  --gutter:       36px;

  /* ── 컴포넌트 크기 */
  --size-btn:   44px;
  --size-chip:  18px;

  /* ── 트랜지션 */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-mid:   300ms;
}

html[data-theme="dark"] {
  --bg:        var(--c-black);
  --bg-2:      #141413;
  --fg:        #ececea;
  --fg-dim:    #7a7a76;
  --line:      #232321;
  --invert-bg: #ececea;
  --invert-fg: var(--c-black);
}