/**
 * GA 정산시스템 디자인 토큰 — 토스(Toss) 톤 조정
 * main.tsx ConfigProvider 의 theme 에 주입되며,
 * styles/variables.css 의 CSS 변수와 동기하여 사용한다.
 */

// ────────────────────────────────────────────────
// 색상
// ────────────────────────────────────────────────

/** 브랜드 — 토스 시그니처 블루 */
export const COLOR_PRIMARY        = '#3182F6';
export const COLOR_PRIMARY_HOVER  = '#1B64DA';
export const COLOR_PRIMARY_LIGHT  = '#EBF3FF';
export const COLOR_PRIMARY_DARK   = '#0E4FC4';

/** 시맨틱 — 토스 팔레트 */
export const COLOR_SUCCESS        = '#13B47A';
export const COLOR_SUCCESS_BG     = '#E8FAF3';
export const COLOR_SUCCESS_BORDER = '#A3E6C8';

export const COLOR_WARNING        = '#F2A024';
export const COLOR_WARNING_BG     = '#FFF6E6';
export const COLOR_WARNING_BORDER = '#F6D08A';

export const COLOR_ERROR          = '#F04452';
export const COLOR_ERROR_BG       = '#FEF0F1';
export const COLOR_ERROR_BORDER   = '#F9B0B6';

export const COLOR_INFO           = '#3182F6';
export const COLOR_INFO_BG        = '#EBF3FF';
export const COLOR_INFO_BORDER    = '#A8CAFE';

/** Neutral Gray — 토스 팔레트 (8단계) */
export const GRAY = {
  50:  '#F9FAFB',
  100: '#F2F4F6',
  200: '#E5E8EB',
  300: '#D1D6DB',
  400: '#B0B8C1',
  500: '#8B95A1',
  600: '#4E5968',
  700: '#333D4B',
  800: '#191F28',
  900: '#191F28',
} as const;

/** 금액 색상 */
export const COLOR_MONEY_PLUS  = COLOR_SUCCESS;
export const COLOR_MONEY_MINUS = COLOR_ERROR;
export const COLOR_MONEY_ZERO  = GRAY[500];

// ────────────────────────────────────────────────
// 타이포그래피
// ────────────────────────────────────────────────

export const FONT_FAMILY = "'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif";

export const FONT_SIZE = {
  xs:   11,
  sm:   13,
  base: 15,   // 본문 기준 — 토스는 14보다 한 단계 키움
  md:   16,
  lg:   20,
  xl:   24,
  '2xl': 32,
} as const;

export const FONT_WEIGHT = {
  normal:   400,
  medium:   500,
  semibold: 600,
  bold:     700,
} as const;

export const LINE_HEIGHT = {
  tight:  1.3,
  normal: 1.5,
  loose:  1.7,
} as const;

// ────────────────────────────────────────────────
// 공간 (Spacing)
// ────────────────────────────────────────────────

export const SPACING = {
  1:  4,
  2:  8,
  3: 12,
  4: 16,
  6: 24,
  8: 32,
  12: 48,
  16: 64,
} as const;

// ────────────────────────────────────────────────
// Border Radius — 토스 비율
// ────────────────────────────────────────────────

export const RADIUS = {
  sm:   8,   // 칩, 작은 요소
  md:   12,  // 버튼, 입력창
  lg:   16,  // 카드
  xl:   20,  // 큰 모달
  full: 9999,
} as const;

// ────────────────────────────────────────────────
// 그림자 — 매우 옅고 부드럽게 (토스 스타일)
// ────────────────────────────────────────────────

export const SHADOW = {
  sm:  '0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04)',
  md:  '0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06)',
  lg:  '0 4px 16px rgba(0,0,0,0.10), 0 16px 48px rgba(0,0,0,0.08)',
} as const;

// ────────────────────────────────────────────────
// 레이아웃
// ────────────────────────────────────────────────

export const LAYOUT = {
  siderWidth:          240,
  siderCollapsedWidth: 64,
  headerHeight:        56,
  contentPadding:      24,
  pageMaxWidth:        1440,
} as const;
