/* countersign — 디자인 시스템 정본 (Tailwind 4 @theme 이름공간, 선언은 :root — @theme 블록은 브라우저가 읽지 않는다 #73)
 * 원칙: 색은 서명된 것에만. 실패만 붉다. 나머지는 올리브 먹 위 무채.
 * 대비 실측표는 _design/DESIGN.md. 서체 링크(쓰는 가족만):
 *   /_shared/fonts/sora/font.css · /_shared/pretendard.css · /_shared/fonts/jetbrains-mono/font.css
 */
:root {
  color-scheme: dark;

  /* ── 색 · 바탕(올리브 먹, oklch 0.20 0.03 108) ── */
  --color-bg: #171706;              /* 페이지 바탕 */
  --color-surface: #212114;         /* 카드·사이드바·표 머리 */
  --color-surface-raised: #2c2c21;  /* 펼친 행·입력·눌린 면 */
  --color-surface-signed: #12361e;  /* 서명된 줄의 옅은 바탕 — 한 줄 높이까지만(큰 면 금지 #52) */
  --color-surface-failed: #47211c;  /* 실패 단계 한 줄 바탕 */

  /* ── 색 · 글자 ── */
  --color-ink: #f0efe6;             /* 본문·제목 */
  --color-ink-muted: #b5b5a9;       /* 보조 문장·메타 */
  --color-ink-faint: #8d8d82;       /* 캡션 — bg·surface 위에서만(raised 위 4.21 이라 금지) */
  --color-on-accent: #171706;       /* 승인 단추 글자 */

  /* ── 색 · 선 ── */
  --color-line: #404136;            /* 장식 구분선(글자·조작 경계 아님) */
  --color-line-strong: #7b7b70;     /* 입력·단추 테두리 — 모든 바탕에서 ≥3:1 */

  /* ── 색 · 의미 ── */
  --color-accent: #77de96;          /* 서명 초록 oklch(0.82 0.14 152) — 서명선·서명됨·승인 단추·실행 완료 체크에만 */
  --color-danger: #f68678;          /* 실패·반송·중지 */
  --color-caution: #e8c270;         /* 일시정지·기한 60초 이하·보류 — 글자와 2px 표식만 */
  --color-focus: #f0efe6;           /* 포커스 링 = 잉크(강조색을 포커스에 쓰지 않는다) */

  /* ── 서체 ── */
  --font-display: "Sora", "Pretendard Variable", system-ui, sans-serif;   /* Sora 는 라틴·숫자만 — 한글은 스택의 Pretendard 가 그린다 */
  --font-body: "Pretendard Variable", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Pretendard Variable", ui-monospace, monospace;

  /* ── 글자 크기 (폭 표: wireframe.md §폭) ── */
  --text-display: clamp(2rem, 0.5rem + 3.6vw, 4rem);          /* 히어로 H1 — 2줄, 줄당 한글 ≤11자 */
  --text-display--line-height: 1.12;
  --text-display--letter-spacing: -0.02em;
  --text-h2: clamp(1.75rem, 1rem + 1.6vw, 2.75rem);            /* 구간 제목 */
  --text-h2--line-height: 1.18;
  --text-title: clamp(1.5rem, 1.1rem + 0.8vw, 2rem);           /* 콘솔 작업 제목 */
  --text-title--line-height: 1.25;
  --text-figure: clamp(1.5rem, 1rem + 1vw, 2.25rem);           /* 요금·합계 같은 큰 숫자(Sora, tabular) */
  --text-figure--line-height: 1.1;
  --text-index: clamp(2.5rem, 1.6rem + 2vw, 4rem);             /* 작동 순서 01·02·03 (Sora 300) */
  --text-lead: 1.125rem;
  --text-lead--line-height: 1.6;
  --text-body: 1rem;
  --text-body--line-height: 1.6;
  --text-small: 0.875rem;
  --text-small--line-height: 1.5;
  --text-micro: 0.75rem;                                        /* mono 라벨·kbd — 12px 아래로 내리지 않는다 */
  --text-micro--line-height: 1.4;

  /* ── 간격 (4px 바탕, 쓰는 단계만) ── */
  --spacing-2xs: 0.25rem;   /* 4 */
  --spacing-xs: 0.5rem;     /* 8 */
  --spacing-sm: 0.75rem;    /* 12 */
  --spacing-md: 1rem;       /* 16 */
  --spacing-lg: 1.5rem;     /* 24 */
  --spacing-xl: 2rem;       /* 32 */
  --spacing-2xl: 3rem;      /* 48 */
  --spacing-3xl: 4.5rem;    /* 72 */
  --spacing-4xl: 7rem;      /* 112 — 홈 구간 사이 */
  --spacing-gutter: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);    /* 본문 좌우 — 390 에서 20, 1440 에서 40 (margin·gap 에만 #50) */
  --spacing-section: clamp(4.5rem, 3rem + 4vw, 7rem);          /* 구간 사이 (margin 에만) */
  --spacing-sidebar: 15.5rem;        /* 홈 사이드바 248 (≥1024) */
  --spacing-sidebar-app: 14.5rem;    /* 콘솔 사이드바 232 (≥720 은 위 막대, ≥1024 부터 세로) */
  --spacing-queue: 18.75rem;         /* 콘솔 대기함 열 300 (≥1024, 1024–1279 는 17.5rem) */
  --spacing-rail: 18.75rem;          /* 콘솔 오른쪽 기록 열 300 (≥1280) */
  --spacing-bar: 3.5rem;             /* 머리 막대·명령 막대 높이 56 */
  --spacing-hit: 2.75rem;            /* 누르는 것 최소 44 */
  --spacing-content: 82.5rem;        /* 홈 본문 최대 폭 1320 */

  /* ── 모서리 — 서류처럼 거의 각지게 ── */
  --radius-xs: 2px;     /* kbd·위험 눈금 */
  --radius-sm: 4px;     /* 단추·입력 */
  --radius-md: 6px;     /* 카드·견본 칸 */
  --radius-lg: 10px;    /* 명령 시트(모바일 전체 화면은 0) */

  /* ── 그림자 — 거의 없음. 띄우는 것은 명령 결과 목록 하나 ── */
  --shadow-none: none;
  --shadow-pop: 0 12px 32px -12px rgb(0 0 0 / 0.55), 0 0 0 1px #404136;
  --shadow-inset: inset 0 0 0 1px #404136;

  /* ── 이징·길이 (DESIGN.md 모션 규칙의 이름) ── */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);          /* 사람 입력에 답하는 모든 것 */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);      /* 화면에 이미 있는 것이 A→B (Morph 접힘) */
  --ease-sign: cubic-bezier(0.65, 0, 0.35, 1);         /* 서명선 Line drawing — 펜처럼 느리게 시작해 느리게 끝 */
  --ease-linear: linear;                               /* 스피너·진행 막대만 */
  --duration-press: 120ms;
  --duration-quick: 160ms;
  --duration-base: 220ms;
  --duration-fold: 320ms;
  --duration-sign: 520ms;
  --duration-stream: 18ms;   /* 스트리밍 한 글자 간격 */
}