/* PickPC 디자인 토큰
 *
 * 개편 전 상태: 색 22개만 있고 스케일이 없어서 화면마다 값이 임의였습니다.
 * 실측 분포 - font-size 14종(8~24px, 10.5px 포함), gap 12종(2~18px 거의 전부),
 * border-radius 7종, font-weight 26종(430/520/570/640/670/720/760/880 ...).
 * 750 과 760 의 차이는 보이지 않지만 일관성은 확실히 깨지므로, 아래 스케일로 모읍니다.
 *
 * 기존 이름(--color-*, --radius-*, --shadow-surface, --control-height 등)은
 * 다른 스타일시트가 1,200곳 넘게 참조하므로 하나도 바꾸지 않고 값만 정교화했습니다.
 */
:root {
  color-scheme: dark;

  /* ── 표면 ──
     보더로 칸을 나누던 방식에서 명도차로 나누는 방식으로 옮깁니다.
     그래서 캔버스를 더 깊게 내리고 보더는 헤어라인 쪽으로 낮췄습니다. */
  --color-canvas: #050e14;
  --color-canvas-soft: #071219;
  --color-surface: #0a1a21;
  --color-surface-raised: #0e2229;
  --color-surface-hover: #12303a;
  --color-border: #1d353f;
  --color-border-strong: #2e4e5a;
  /* 입력 필드처럼 경계가 유일한 식별 수단인 컨트롤용.
     WCAG 1.4.11 은 비텍스트 3:1 을 요구하는데 위 두 보더는 헤어라인이라 1.4~2.0 입니다.
     이 값은 surface/canvas-soft/raised 세 배경 모두에서 3.13~3.61 로 통과합니다. */
  --color-control-border: #4a7280;

  /* ── 텍스트 ── */
  --color-text: #eef4f3;
  --color-text-muted: #a4b4b8;
  --color-text-subtle: #7a9099;

  /* ── 브랜드 ── 민트/틸 유지. 넓은 면적용과 강조용을 분리합니다. */
  --color-primary: #4bd9b0;
  --color-primary-hover: #6fe9c5;
  --color-primary-ink: #02120d;
  --color-primary-soft: rgba(75, 217, 176, 0.12);
  --color-primary-line: rgba(75, 217, 176, 0.34);

  /* ── 상태 ── */
  --color-healthy: #42d5ad;
  --color-warning: #efb44a;
  --color-danger: #ef6969;
  --color-focus: #7be8ca;
  --color-warning-soft: rgba(239, 180, 74, 0.12);
  --color-warning-line: rgba(239, 180, 74, 0.36);
  --color-danger-soft: rgba(239, 105, 105, 0.12);
  --color-danger-line: rgba(239, 105, 105, 0.38);

  /* ── 상호작용 ── */
  --interaction-border: var(--color-border);
  --interaction-hover-gradient: linear-gradient(90deg, rgba(75, 217, 176, 0.1), rgba(75, 217, 176, 0.03));
  --interaction-selected-gradient: linear-gradient(90deg, rgba(75, 217, 176, 0.18), rgba(75, 217, 176, 0.06));
  --interaction-accent-line: inset 2px 0 0 var(--color-primary);
  --interaction-transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out), box-shadow 140ms var(--ease-out), transform 120ms var(--ease-out);

  /* ── 여백 ── 2~18px 전부 쓰던 것을 8단계로 모읍니다. 4px 배수 리듬. */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* ── 타이포 ── 1px 간격으로 촘촘하던 14종을 7단계로 정리합니다.
     관리 화면 밀도를 지켜야 해서 본문은 13px 로 두고, 9px 는 마이크로 라벨에만 남깁니다. */
  --text-micro: 10px;
  --text-caption: 11px;
  --text-small: 12px;
  --text-body: 13px;
  --text-lead: 15px;
  --text-title: 18px;
  --text-display: 24px;

  --leading-tight: 1.28;
  --leading-snug: 1.4;
  --leading-normal: 1.55;

  /* 한글은 자간을 조금 좁히면 읽기가 편해지고, 대문자 키커는 벌려야 읽힙니다. */
  --tracking-tight: -0.011em;
  --tracking-normal: 0;
  --tracking-kicker: 0.14em;

  /* ── 굵기 ── 26종을 4단계로. 그 사이 값은 눈에 보이지 않습니다. */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── 라운드 ── 2/3/4/5/6/8 로 흩어진 것을 4단계 + 알약으로. */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ── 엘리베이션 ── 그림자가 하나뿐이라 층이 없었습니다. */
  --shadow-hairline: 0 1px 0 rgba(255, 255, 255, 0.03);
  --shadow-raised: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-surface: 0 12px 32px rgba(0, 0, 0, 0.32);
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.5);

  /* ── 모션 ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;

  /* ── 포커스 ── 값을 흩뿌리지 않도록 링을 토큰으로 고정합니다. */
  --focus-ring: 2px;
  --focus-offset: 3px;

  /* ── 레이아웃 ── 기존 이름 유지. 테스트가 폭 비율을 검사하므로 값도 그대로 둡니다. */
  --font-sans: Pretendard, "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "D2Coding", ui-monospace, SFMono-Regular, Menlo, monospace;
  --content-width: 1520px;
  --control-height: 40px;
  --control-height-sm: 32px;
  --header-height: 64px;

  letter-spacing: 0;
}