/* ============================================================
   RE:WALK 공용 디자인 토큰 (단일 소스)
   ------------------------------------------------------------
   모든 도구는 <head>에서 이 파일을 가장 먼저 불러옵니다.
     <link rel="stylesheet" href="css/tokens.css">
   각 도구의 로컬 변수(--navy, --ok, --high …)는 이름을 유지한 채
   값만 아래 토큰(var(--t-…))을 가리키도록 재지정합니다.
   → 색/폰트/라운드/그림자를 바꿀 때는 이 파일만 수정하면 됩니다.
   ============================================================ */
:root{
  /* 2026-09 브랜드 통일: 일반 모드와 같은 네이비·크림·앰버 팔레트 */
  /* ── 브랜드 ───────────────────────────── */
  --t-navy:        #1E2A4A;   /* 기본 네이비(제목·주요 버튼) */
  --t-navy-soft:   #2B3B63;   /* 살짝 밝은 네이비(측면 navy2) */
  --t-blue:        #3A4F7E;   /* 중간 네이비블루(보조 강조) */
  --t-blue-soft:   #7C8DB0;   /* 밝은 네이비블루 */
  --t-sky:         #2B3B63;   /* 액션 버튼(네이비 계열) */
  --t-amber:       #E08E12;   /* 앰버 강조 */
  --t-amber-dark:  #B5651D;   /* 진한 앰버 */
  --t-amber-tint:  #FCEBCF;   /* 앰버 배경 틴트 */
  --t-green:       #2E8B57;   /* 성공/정상 */
  --t-green-dark:  #247046;   /* 진한 성공 */
  --t-danger:      #C0392B;   /* 경고/삭제 */

  /* ── 중립(텍스트·면·선) ───────────────── */
  --t-ink:         #243244;   /* 진한 제목 텍스트 */
  --t-text:        #2C3E50;   /* 본문 텍스트 */
  --t-gray:        #6B7787;   /* 흐린 텍스트(muted) */
  --t-line:        #E4DCCF;   /* 기본 경계선 */
  --t-line-soft:   rgba(30,42,74,.14);  /* 반투명 경계선(측면) */
    --t-line-strong: rgba(30,42,74,.24);
  --t-paleblue:    #F4EFE7;   /* 아주 옅은 크림 면(이름은 호환용 유지) */
  --t-lightblue:   #EDE4D5;   /* 옅은 크림 면/선(이름은 호환용 유지) */
  --t-bg:          #FBF8F3;   /* 도구 배경(크림) */
  --t-surface:     #FFFFFF;   /* 카드/패널 */
  --t-stage:       #0B1220;   /* 영상 스테이지(카메라 프리뷰 배경) */
  --t-grid:        rgba(58,79,126,.05);  /* 옅은 격자 오버레이(측면) */

  /* ── 타이포그래피 ─────────────────────── */
  --t-sans: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  --t-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── 라운드 ───────────────────────────── */
  --t-r-sm:  8px;
  --t-r:     12px;
  --t-r-lg:  16px;
  --t-pill:  999px;

  /* ── 그림자 ───────────────────────────── */
  --t-shadow-sm: 0 1px 3px rgba(30,42,74,.06);
  --t-shadow:    0 6px 18px rgba(30,42,74,.10);
  --t-shadow-lg: 0 10px 24px rgba(30,42,74,.18);
}