/* ============================================================
   designpaca 소개 페이지 — 디자인 토큰
   프리셋: swiss-minimal / 비율 1.25 / 강조색 1개 / radius 2종
   ============================================================ */

:root {
  /* ---- 폰트 패밀리 ---------------------------------------- */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono-size: 0.9375em;          /* 부모 대비. 새 스케일 단계를 만들지 않는다 */

  /* ---- 색: 라이트 (기본) ----------------------------------- */
  --surface:            #FAF9F6;  /* 웜 오프화이트. 순백 아님 (A-07) */
  --surface-raised:     #F2F0EA;
  --surface-inverse:    #14161A;  /* 다크 밴드. 순흑 아님 */
  --ink:                #16181C;  /* 대비 16.88:1 */
  --ink-muted:          #5A5F66;  /* 대비  6.11:1 */
  --ink-inverse:        #E9E7E2;  /* 밴드 위 14.66:1 */
  --ink-muted-inverse:  #9AA0A6;  /* 밴드 위  6.86:1 */
  --line:               #DFDCD4;  /* 1.30:1 — 장식 구분선 전용 */
  --line-inverse:       #2A2E34;  /* 1.33:1 — 장식 구분선 전용 */
  --line-strong:        var(--ink-muted);      /* 입력·컨트롤 테두리. WCAG 1.4.11 (3:1) */
  --accent:             #0E6B63;  /* 딥 틸. 대비 6.04:1 */
  --accent-ink:         #FFFFFF;  /* 강조 위 글자. 6.36:1 */
  --accent-inverse:     #3FA89D;  /* 밴드 위 강조. 6.30:1 */
  --accent-ink-inverse: #0B1A18;  /* 밴드 위 강조 위의 글자. 6.43:1 */

  /* ---- 형태: radius 2종 (게이트 #3) ------------------------ */
  --radius-sm: 3px;               /* 버튼·입력·배지 */
  --radius-md: 6px;               /* 카드·코드 블록 */

  /* ---- 간격 ------------------------------------------------ */
  --space-1: 0.25rem;   /*   4 */
  --space-2: 0.5rem;    /*   8 */
  --space-3: 1rem;      /*  16 */
  --space-4: 1.5rem;    /*  24 */
  --space-5: 2.5rem;    /*  40 */
  --space-6: 4rem;      /*  64 */
  --space-7: 6rem;      /*  96 — 일반 섹션 상하 */
  --space-8: 8rem;      /* 128 — 다크 밴드 상하. 본문 간격의 8배 */

  /* ---- 모션 ------------------------------------------------ */
  --dur-instant: 100ms;           /* 호버·포커스 */
  --dur-quick:   200ms;           /* 작은 등장·퇴장 */
  --dur-normal:  320ms;           /* 패널·전환. 2단계 상한 */
  --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);
  /* bounce·elastic 없음 (E-02) */
}

/* ---- 색: 다크 테마 — 라이트와 동등하게 정의 ------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:            #14161A;
    --surface-raised:     #1C1F24;
    --surface-inverse:    #FAF9F6;  /* 다크에서는 밴드가 밝아진다 */
    --ink:                #E9E7E2;
    --ink-muted:          #9AA0A6;
    --ink-inverse:        #16181C;
    --ink-muted-inverse:  #5A5F66;
    --line:               #2A2E34;
    --line-inverse:       #DFDCD4;
    --line-strong:        var(--ink-muted);
    --accent:             #3FA89D;  /* 6.30:1 */
    --accent-ink:         #0B1A18;  /* 6.21:1 */
    --accent-inverse:     #0E6B63;
    --accent-ink-inverse: #FFFFFF;
  }
}

/* ---- 타입: 한국어판 --------------------------------------- */
[lang="ko"] {
  --font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;

  --step-0: 1.0625rem;            /* 17 — 본문 · eyebrow · 코드 */
  --step-1: 1.328rem;             /* 21.3 — 리드 */
  --step-2: 1.660rem;             /* 26.6 — h3 */
  --step-3: 2.076rem;             /* 33.2 — h2 */
  --step-4: 2.595rem;             /* 41.5 — h1 */
  --display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem);  /* → 68 */

  --leading-tight:  1.15;
  --leading-normal: 1.7;          /* 한글은 넉넉하게 */
  --measure: 33em;                /* ≈ 561px. 한글 글자폭 ≈ 1em */

  --tracking-display: -0.01em;    /* 한글은 음수 자간을 크게 주지 않는다 */
  --tracking-body: 0;             /* 한글 본문 음수 자간 금지 */
  --tracking-label: 0.08em;

  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---- 타입: 영어판 ------------------------------------------ */
[lang="en"] {
  --font-sans: "Switzer", system-ui, -apple-system, sans-serif;

  --step-0: 1rem;                 /* 16 */
  --step-1: 1.25rem;              /* 20 */
  --step-2: 1.5625rem;            /* 25 */
  --step-3: 1.953rem;             /* 31.3 */
  --step-4: 2.441rem;             /* 39 */
  --display: clamp(2.441rem, 1.5rem + 4vw, 4rem);       /* → 64 */

  --leading-tight:  1.1;
  --leading-normal: 1.55;
  --measure: 65ch;                /* ≈ 640px */

  --tracking-display: -0.025em;
  --tracking-body: 0;
  --tracking-label: 0.08em;
}

/* ---- 다크 밴드: 게이트 #4가 요구하는 "규칙으로 정의된 반전" ---- */
/* 사용처는 히어로와 설치 섹션 두 곳뿐이다. 그 외 사용 금지.        */
.band-inverse {
  --surface:       var(--surface-inverse);
  --ink:           var(--ink-inverse);
  --ink-muted:     var(--ink-muted-inverse);
  --line:          var(--line-inverse);
  --accent:        var(--accent-inverse);
  --accent-ink:    var(--accent-ink-inverse);
  background: var(--surface);
  color: var(--ink);
  padding-block: var(--space-8);
}