:root {
  /* Brand */
  --color-primary:       #5B5BFF;
  --color-primary-hover: #4747E6;
  --color-primary-soft:  #EEEEFF;
  --color-accent:        #FF6B6B;

  /* Point / CTA — 하단 탭 박스구매 원형 아이콘과 동일한 보라 그라데이션.
     모든 주요 결제/환급/구매 액션 버튼은 이 색을 사용. */
  --color-point:         #5B5BFF;
  --color-point-hover:   #4747E6;
  --gradient-point:      linear-gradient(135deg, #7B5BFF 0%, #5B5BFF 55%, #3D7BFF 100%);
  --gradient-point-hover:linear-gradient(135deg, #6B4BEF 0%, #4B4BEF 55%, #2D6BEF 100%);

  /* Neutrals */
  --color-bg:        #FFFFFF;
  --color-surface:   #F7F7FB;
  --color-border:    #E5E7EF;
  --color-text:      #111827;
  --color-text-sub:  #6B7280;
  --color-text-muted:#9CA3AF;

  /* Status */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger:  #EF4444;

  /* Spacing (4px grid) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 48px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px; --text-sm: 13px; --text-base: 15px;
  --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 28px;
  --leading-tight: 1.25; --leading-normal: 1.5;
  --weight-normal: 400; --weight-medium: 500; --weight-bold: 700;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17,24,39,0.05);
  --shadow-md: 0 4px 12px rgba(17,24,39,0.08);
  --shadow-lg: 0 12px 32px rgba(17,24,39,0.12);

  /* Layout */
  --container-max: 600px;
  --bottom-nav-height: 64px;
  --header-height: 52px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  /* 박스구매 탭 가운데 원형 아이콘이 nav 위로 돌출되는 높이.
     모든 하단 고정 액션바는 이 만큼 추가로 위로 밀어 올려 돌출 영역을 침범하지 않는다. */
  --bottom-nav-protrude: 22px;
  --bottom-bar-clear: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + var(--bottom-nav-protrude));

  /* z-index */
  --z-nav: 50; --z-modal: 100; --z-toast: 9999;
}