:root {
  /* Brand (Violet) — Figma 변수 Primary=#605BFF, 실제 렌더 브랜드=#5B2BF3 */
  --violet-100: #ebe9fb;   /* 활성 네비 배경 tint */
  --violet-300: #827dff;   /* soft/보조 */
  --violet-500: #605bff;   /* Figma Primary 변수값 */
  --violet-600: #5b2bf3;   /* 실사용 브랜드(로고·버튼·활성) */
  --violet-700: #4a1fd6;   /* hover(파생) */

  --cyan-400: #14fae3;     /* 강조/차트 accent */

  /* 상태색 (Semantic base) */
  --red-500: #ff0101;   --red-100: #ffdada;
  --green-500: #0eb519; --green-100: #ecffed;
  --blue-500: #026ef3;  --blue-100: #f3f8ff;
  --amber-500: #f97316; --amber-100: #ffedd5;   /* 경고(심각/확인) */

  /* 뉴트럴 (배경→텍스트 순으로 어두워짐) */
  --white:      #ffffff;
  --gray-25:    #f7f7fb;   /* 페이지 배경 */
  --gray-50:    #f1f1f8;   /* 보조 surface */
  --gray-100:   #ebebf1;   /* 입력필드 배경 */
  --gray-200:   #e5e5ec;   /* 경계선/구분선 */
  --gray-300:   #c9c9d9;   /* 진한 경계선 */
  --gray-400:   #949494;   /* 아이콘 기본 */
  --gray-500:   #797979;   /* 보조 텍스트 */
  --gray-550:   #767676;   /* placeholder */
  --gray-700:   #505050;   /* 본문 텍스트 */
  --gray-900:   #3b3850;   /* 제목/강조 텍스트 */
  --ink:        #28303f;   /* Figma 변수 Dark */

  /* Brand */
  --color-primary:        var(--violet-600);
  --color-primary-hover:  var(--violet-700);
  --color-primary-soft:   var(--violet-300);
  --color-primary-tint:   var(--violet-100);
  --color-on-primary:     var(--white);
  --color-accent:         var(--cyan-400);

  /* 상태 (foreground / tint 배경 쌍) */
  --color-danger:       var(--red-500);    --color-danger-tint:   var(--red-100);
  --color-success:      var(--green-500);  --color-success-tint:  var(--green-100);
  --color-warning:      var(--amber-500);  --color-warning-tint:  var(--amber-100);
  --color-info:         var(--blue-500);   --color-info-tint:     var(--blue-100);

  /* 표면 / 배경 */
  --color-page:         var(--gray-25);
  --color-surface:      var(--white);
  --color-surface-2:    var(--gray-50);
  --color-field:        var(--gray-100);

  /* 경계선 */
  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);

  /* 텍스트 / 아이콘 */
  --color-heading:      var(--gray-900);
  --color-text:         var(--gray-700);
  --color-text-muted:   var(--gray-500);
  --color-text-subtle:  var(--gray-550);
  --color-icon:         var(--gray-400);

  --font-sans: 'Pretendard', system-ui, -apple-system, 'Segoe UI',
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --text-2xs: 12px;
  --text-xs:  13px;
  --text-sm:  14px;
  --text-md:  15px;
  --text-base:16px;
  --text-lg:  18px;
  --text-xl:  21px;
  --text-2xl: 28px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --tracking-base: -0.025em;

  /* ---------------------------------------------------------------------------
   * 간격 스케일 (4px 기반)
   * ------------------------------------------------------------------------ */
  --space-0-5: 2px;
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;

  /* ---------------------------------------------------------------------------
   * 모서리 반경
   * ------------------------------------------------------------------------ */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-pill: 100px;

  /* ---------------------------------------------------------------------------
   * 그림자 — 디자인의 뉴모피즘 인셋 + 모던 카드 그림자(재사용성 위해 일반화)
   * ------------------------------------------------------------------------ */
  --shadow-sm:      0 1px 2px rgba(40, 48, 63, 0.06);
  --shadow-card:    0 1px 3px rgba(40, 48, 63, 0.08), 0 1px 2px rgba(40, 48, 63, 0.04);
  --shadow-md:      0 6px 16px rgba(40, 48, 63, 0.10);
  --shadow-primary: 0 4px 5px rgba(38, 0, 255, 0.20);           /* 브랜드 버튼(디자인) */
  --shadow-neu:     inset -1px -1px 2px var(--white),
                    inset 1px 1px 2px rgba(17, 0, 116, 0.15);   /* 뉴모피즘(디자인) */

  --header-height: 80px;
  --sidebar-width: 280px;
  --content-max:   1600px;
  --gutter:        var(--space-8);   /* 헤더/메인 좌우 여백 32px */

  /* z-index 레이어 */
  --z-header:  50;
  --z-sidebar: 40;
  --z-overlay: 30;

  /* 트랜지션 */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}