/* CIPHER 디자인 토큰 — 유일한 스타일 상수 출처. 하드코딩 금지. */
:root {
  color-scheme: dark;

  /* ---- surface: 청색 편향 다크 5단 ---- */
  --bg-rail: #0F1116;  /* 플랫폼 레일 */
  --bg-0:    #14161C;  /* 페이지 바탕 */
  --bg-1:    #191C23;  /* 사이드바 · 카드 */
  --bg-2:    #20242D;  /* 입력 · hover · 활성 */
  --bg-3:    #272C37;  /* 모달 · 최상위 표면 */

  --border:        #262B35;
  --border-strong: #39404E;  /* hover · 포커스 직전 단계 */

  /* ---- text 3단 ---- */
  --text-1: #E4E6EC;  /* 본문 */
  --text-2: #9BA1AF;  /* 보조 */
  --text-3: #6B7280;  /* 비활성 · 캡션 */

  /* ---- accent: 화면당 주 CTA 1곳 + 포커스/활성 표시에만 ---- */
  --accent:      #4CC2E0;
  --accent-hi:   #6AD4EF;               /* hover */
  --accent-ink:  #06232B;               /* accent 배경 위 텍스트 */
  --accent-soft: rgba(76,194,224,.10);  /* 포커스 링 · 활성 배경 */

  /* ---- semantic (accent와 별개) ---- */
  --ok:     #57C98F;  --ok-soft:     rgba(87,201,143,.12);
  --warn:   #E8A84C;  --warn-soft:   rgba(232,168,76,.12);
  --danger: #F0616D;  --danger-soft: rgba(240,97,109,.12);

  /* ---- type ---- */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace; /* 익명 핸들 · 코드 */
  --fs-caption: 11px;  /* 캡션 · 뱃지 */
  --fs-small:   12px;  /* 메타 · 칩 */
  --fs-ui:      13px;  /* 버튼 · 탭 · 사이드바 */
  --fs-body:    14px;  /* 본문(댓글) */
  --fs-md:      16px;  /* 소제목 */
  --fs-lg:      19px;  /* 섹션 제목 */
  --fs-xl:      24px;  /* 페이지 제목 */
  --fs-display: 32px;  /* 히어로 */
  --lh-tight: 1.25;  --lh-base: 1.5;

  /* ---- radius 2종 + full ---- */
  --r-sm: 8px;    /* 버튼 · 입력 · 아바타 · 레일 타일 */
  --r-md: 12px;   /* 카드 · 모달 · 임베드 프레임 */
  --r-full: 999px; /* 칩 · 토스트 · 도트 전용. 버튼 금지 */

  /* ---- spacing: 8pt 그리드 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- motion ---- */
  --dur-1: 120ms;  /* 마이크로 (hover · press) */
  --dur-2: 200ms;  /* 표준 (탭 · 모달 · 토스트) */
  --dur-3: 320ms;  /* 등장 (reveal · 바 성장) */
  --ease:        cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .4, 1); /* 좋아요 pop 전용 */

  /* ---- shadow: 무채색 2종만. 색 있는 그림자(글로우) 금지 ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 12px 32px rgba(0,0,0,.5);
}