/* tokens.css */
/* 송파 프로젝트 공통 디자인 토큰 */

:root {
    /* 브랜드 컬러 */
    --color-primary: #41A67E;   /* 메인 컬러 */
    --color-primary-deep: #05339C;  /* 포인트, 헤더/강조 */
    --color-primary-mid: #1055C9;   /* 서브 포인트 */
    --color-accent: #E5C95F;   /* 강조, 뱃지, 작은 포인트 */
  
    /* 중립 컬러 (회색 계열만 사용) */
    --color-bg-body: #f5f6f8;
    --color-bg-surface: #ffffff;
    --color-bg-soft: #f0f2f5;
  
    --color-border-subtle: #e1e4ea;
    --color-border-strong: #c2c7d0;
  
    --color-text-strong: #1f2430;
    --color-text-body: #333843;
    --color-text-muted: #777c88;
    --color-text-disabled: #adb1bc;
  
    /* 폰트 */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif;
  
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
  
    --line-height-tight: 1.2;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;
  
    /* 간격 (spacing scale) */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
  
    /* 모서리(raduis) */
    --radius-xs: 3px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;
  
    /* 그림자 */
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 8px 20px rgba(0, 0, 0, 0.08);
  
    /* 브레이크포인트 (참고용) */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1200px;
  }
  
  /* 리셋 & 기본 타이포 */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-text-body);
    background-color: var(--color-bg-body);
  }
  
  /* 공통 유틸 클래스 */
  .text-muted {
    color: var(--color-text-muted);
  }
  
  .text-strong {
    color: var(--color-text-strong);
  }
  
  .text-accent {
    color: var(--color-primary-mid);
  }
  
  .m-0 {
    margin: 0;
  }