/* ============================================
   Design Tokens - 디자인 토큰 변수
   모든 색상, 둥글기, 그림자, 폰트를 여기서 관리
   ============================================ */

:root {

  /* ── 색상: Primary (브랜드 퍼플) ─────────── */

  --c-primary-50: #F5F7FD;
  --c-primary-100: #E9EDF9;
  --c-primary-200: #D3DBF3;
  --c-primary-300: #B2BEEA;
  --c-primary-400: #8796D6;
  --c-primary-500: #5E70C4;
  --c-primary-600: #5160A8;
  --c-primary-700: #434F8A;
  --c-primary-800: #353F6C;
  --c-primary-900: #232945;



  /* ── 색상: Gray (그레이스케일) ───────────── */

  --c-gray-50: #f9fafb;
  --c-gray-100: #eef1f7;
  --c-gray-200: #e8eaf6;
  --c-gray-300: #d4d8ee;
  --c-gray-400: #9fa8d1;
  --c-gray-500: #6b739f;
  --c-gray-600: #4c547c;
  --c-gray-700: #353c5a;
  --c-gray-800: #1f243d;
  --c-gray-900: #0e1226;

  /* ── 색상: 기본 ─────────────────────────── */

  --c-white: #ffffff;
  --c-black: #000000;

  /* ── 색상: Dark (다크모드 기본) ─────────── */

  --c-dark-bg: #0F1324;
  /* 배경 */

  --c-dark-card: #2A304C;
  /* 카드 */

  --c-dark-card-alt: #343B5E;
  /* 카드 내부 강조 (Hover) */

  --c-dark-text: #F3F5FB;
  /* 메인 텍스트 */

  --c-dark-text-sub: #C4CAE3;
  /* 보조 텍스트 */

  /* ── 색상: 상태 (Green / Red) ───────────── */

  --c-green-100: #dcfce7;

  --c-green-800: #166534;

  --c-red-50: #fef2f2;

  --c-red-300: #fca5a5;

  --c-red-400: #f87171;

  --c-red-600: #f42d2d;

  --c-red-900-20: rgba(127, 29, 29, 0.2);

  /* ── 색상: Design Token (퍼블리셔 지정) ── */

  --c-navy: #1B3A6B;

  --c-navy-mid: #2D5A9E;

  --c-navy-light: #E8EFF9;

  --c-navy-hover: #162F57;

  --c-surface: #F7F6F3;

  --c-surface-2: #EFEDE8;

  --c-border: #E2DDD6;

  --c-border-strong: #C8C2BA;

  --c-text-1: #1f2333;

  --c-text-2: #4b5270;

  --c-text-3: #8b93b0;

  /* ── 색상: Semantic ─────────────────────── */

  /* --c-success: #3B82F6;
  --c-success-light: #93C5FD; */

  --c-success: #0F8F83;
  --c-success-light: #91D5CD;

  --c-warning: #f08a2e;
  --c-warning-light: #f5a45c;

  --c-error: #d65a4f;
  --c-error-dark: #c35046;
  --c-error-light: #f1786e;

  --c-info: #e0b83f;
  --c-info-light: #e8cc65;

  /* ── 폰트 ───────────────────────────────── */

  --font-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-heading: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── 둥글기 (Border Radius) ─────────────── */

  --radius-sm: 0.25rem;
  /* 4px */

  --radius-md: 0.375rem;
  /* 6px */

  --radius-lg: 0.5rem;
  /* 8px */

  --radius-xl: 0.75rem;
  /* 12px */

  --radius-2xl: 1rem;
  /* 16px */

  --radius-full: 9999px;

  /* ── 그림자 (Box Shadow) ────────────────── */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);

  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ── 시맨틱 토큰 (용도별 변수) ─────────── */

  --c-line: var(--c-gray-200);
  /* 구분선, 섹션/카드 border */

  --c-input-border: var(--c-gray-300);
  /* input/select/textarea border */

  --c-bg-muted: var(--c-gray-200);
  /* 스크롤바, 뱃지, 구분 배경 */

  --c-bg-hover: var(--c-gray-100);
  /* hover/active 배경 */

  /* ── 전환 (Transition) ──────────────────── */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast: 150ms;
  --duration-normal: 420ms;
}

/* ── 다크모드 변수 오버라이드 ─────────────── */

.dark {

  /* Primary (퍼플 반전) */
  --c-primary-50: #232945;
  --c-primary-100: #2C3360;
  --c-primary-200: #353F6C;
  --c-primary-300: #434F8A;
  --c-primary-400: #5160A8;
  --c-primary-500: #5E70C4;
  --c-primary-600: #8796D6;
  --c-primary-700: #B2BEEA;
  --c-primary-800: #D3DBF3;
  --c-primary-900: #E9EDF9;
  --c-primary-900-30: rgba(94, 112, 196, 0.18);

  /* Gray (반전) */
  --c-gray-50: #0E1226;
  --c-gray-100: #14192E;
  --c-gray-200: #1B2036;
  --c-gray-300: #242A43;
  --c-gray-400: #353C5A;
  --c-gray-500: #4C547C;
  --c-gray-600: #6B739F;
  --c-gray-700: #9FA8D1;
  --c-gray-800: #D4D8EE;
  --c-gray-900: #EEF1F7;

  /* Text */
  --c-text-1: #F3F5FB;
  --c-text-2: #BCC2D2;
  --c-text-3: #7E869C;

  /* Surface */
  --c-surface: #13151D;
  --c-surface-1: #171922;
  --c-surface-2: #20273b;
  --c-surface-3: #383D4C;

  /* Border */
  --c-border: #313646;
  /* 테이블/인풋 보더 */
  --c-border-strong: #454C61;
  /* 카드 외곽 보더 */

  /* 인터랙션 (Hover / Active / Selected) */
  --c-hover: rgba(255, 255, 255, 0.04);
  --c-active: rgba(255, 255, 255, 0.08);
  --c-selected: rgba(94, 112, 196, 0.16);
  --c-selected-hover: rgba(94, 112, 196, 0.24);

  /* Semantic tokens (다크모드 보정) */
  --c-success: #14A596;
  --c-success-light: #7DD7CC;
  --c-warning: #F7A044;
  --c-warning-light: #FFC57A;
  --c-error: #E26B60;
  --c-error-dark: #D85A4E;
  --c-error-light: #FF958D;
  --c-info: #E4C14F;
  --c-info-light: #F0D87C;

  /* 시맨틱 에일리어스 (기존 호환) */
  --c-line: var(--c-border);
  --c-input-border: var(--c-border);
  --c-dark-line: var(--c-border);
  --c-bg-muted: var(--c-active);
  --c-bg-hover: var(--c-hover);

  /* Dark aliases (기존 --c-dark-* 호환) */
  --c-dark-bg: #0F1324;
  --c-dark-card: #2A304C;
  --c-dark-card-alt: #343B5E;
  --c-dark-text: #F3F5FB;
  --c-dark-text-sub: #C4CAE3;

  /* White (다크모드에서 활용되는 컨텍스트) */
  --c-white: #ffffff;
}