/* 3단계에서 확정한 토큰. 하드코딩된 값은 이 파일 밖에 존재하지 않는다. */

:root {
  /* ---- 타입: 본문 스케일 (비율 1.250, 5단계) ---- */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.5625rem;
  --step-3:  1.9531rem;

  /* ---- 타입: 디스플레이 (스케일 밖. 위계를 만드는 유일한 장치) ---- */
  --display-2: clamp(2rem,    1.4rem + 3vw,   2.5rem);
  --display-1: clamp(2.75rem, 1.8rem + 4.8vw, 4rem);

  --leading-tight:  1.05;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --measure: 68ch;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --tracking-display: -0.025em;
  --tracking-body: 0;

  /* ---- 간격: 4px 그리드 ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 10rem;
  --container: 70rem;
  --gutter: clamp(1rem, 4vw, 5rem);

  /* ---- 형태: 어휘 2종 ---- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- 모션 ---- */
  --dur-instant: 100ms;
  --dur-quick:   200ms;
  --dur-normal:  350ms;
  --dur-slow:    600ms;
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- 색: 다크가 저작 기준 (2단계에서 정당화) ---- */
  color-scheme: dark light;
  --surface:        #0D0F12;
  --surface-raised: #151A20;
  --line:           #262E37;
  --ink:            #E6E8E6;
  --ink-muted:      #9BA6B2;
  --accent:         #7FA6FF;
  --accent-ink:     #0D0F12;
  --cta-bg:         #E6E8E6;
  --cta-ink:        #0D0F12;
  --ok:   #4FA97A;
  --warn: #C9A227;
  --fail: #D46A55;
}

/* OS가 라이트를 선호하면 라이트. 토글이 명시적으로 다크를 잡으면 무시한다. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --surface:        #F7F5F0;
    --surface-raised: #FDFCF9;
    --line:           #DCD8CF;
    --ink:            #16181A;
    --ink-muted:      #5C646E;
    --accent:         #1B4FD8;
    --accent-ink:     #FAF9F6;
    --cta-bg:         #16181A;
    --cta-ink:        #FAF9F6;
    --ok:   #2F7D57;
    --warn: #8A6D14;
    --fail: #A8432E;
  }
}

/* 토글이 라이트를 잡으면 OS와 무관하게 라이트 */
:root[data-theme='light'] {
  --surface:        #F7F5F0;
  --surface-raised: #FDFCF9;
  --line:           #DCD8CF;
  --ink:            #16181A;
  --ink-muted:      #5C646E;
  --accent:         #1B4FD8;
  --accent-ink:     #FAF9F6;
  --cta-bg:         #16181A;
  --cta-ink:        #FAF9F6;
  --ok:   #2F7D57;
  --warn: #8A6D14;
  --fail: #A8432E;
}