/**
 * 모아반트 웹(moavant.com) 디자인 토큰 — SUS-230
 *
 * 출처(정본 아님, 사본): moavant-blog 레포 src/styles/tokens.css (추출일 2026-08-15)
 * 블로그 토큰이 바뀌어도 이 파일은 자동으로 따라가지 않는다 — 수동 동기화한다.
 * 동기화 확인:
 *   diff <(sed -n '/^:root/,/^}/p' ../../moavant-blog/src/styles/tokens.css) \
 *        <(sed -n '/^:root/,/^}/p' web/styles/tokens.css)
 *
 * 다크모드 변수는 정의하지 않는다 — 라이트 단일 (DEC-089).
 */

:root {
  /* Brand (§2.3 — #1A73E8 은 머니핏 색이 아니라 모아반트 코퍼릿 컬러) */
  --color-primary: #1a73e8;
  --color-primary-dark: #1557b0;
  --color-primary-light: #eff6ff;
  --color-secondary: #7c3aed;

  /* Semantic */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-warning-surface: #fffbeb;
  --color-warning-text: #92400e;
  --color-error: #ef4444;
  --color-error-text: #dc2626;
  --color-error-surface: #fff5f5;
  --color-info: #3b82f6;

  /* Finance-specific */
  --color-income: #22c55e;
  --color-income-text: #15803d;
  --color-expense: #ef4444;

  /* Neutral */
  --color-text: #111827;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-border-subtle: #f3f4f6;
  --color-divider: #e5e7eb;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-background: #f9fafb;
  --color-background-secondary: #f3f4f6;
  --color-surface: #ffffff;

  /* 웹 전용 파생 토큰 — 키트 스냅샷(블로그 tokens.css) 외 항목. 아래 2개 토큰을 담는 공용 블록(용도는 각 토큰별 개별 주석 참고) */
  --color-surface-glass: rgba(255, 255, 255, 0.85);
  /* --color-text-secondary(#6b7280) 는 밝은 틴트 배경(예: --color-primary-light #eff6ff) 위에서 AA 경계 미달(4.39:1) —
     키트에 대응 토큰이 없어 웹 전용으로 신설. 밝은 틴트 배경 위 보조 텍스트에 사용 (SUS-230 P2-1 재수정 권고) */
  --color-text-secondary-strong: #374151;

  /* 서비스 accent 훅 — 기본값 = 회사색. 서비스별 색이 확정되면 아래에 한 줄씩 추가한다(§2.3). */
  --color-accent: var(--color-primary);
  /* [data-service="cluebox"] { --color-accent: #____; } ← 클루박스 브랜드색 확정 시 채운다 */

  /* Typography — 웹은 CDN static pretendard.css 사용 → 패밀리는 'Pretendard' 하나, 굵기는
     font-weight 로 지정한다. (블로그는 self-host 서브셋이라 웨이트별 패밀리명을 쓴다 — 여기서만 다르다) */
  --font-family-regular:  'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-medium:   var(--font-family-regular);
  --font-family-semibold: var(--font-family-regular);
  --font-family-bold:     var(--font-family-regular);

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-size-heading1: 28px;
  --line-height-heading1: 36px;
  --font-size-heading2: 24px;
  --line-height-heading2: 32px;
  --font-size-heading3: 20px;
  --line-height-heading3: 28px;
  --font-size-heading4: 18px;
  --line-height-heading4: 26px;
  --font-size-body1: 16px;
  --line-height-body1: 24px;
  --font-size-body2: 14px;
  --line-height-body2: 22px;
  --font-size-caption: 12px;
  --line-height-caption: 18px;

  /* Display scale — 랜딩 히어로 전용 확장(블로그 키트에는 없음). 블로그로 역이식하지 않는다. */
  --font-size-display1:   clamp(32px, 5vw, 52px);
  --line-height-display1: 1.18;
  --font-size-display2:   clamp(26px, 3.5vw, 38px);
  --line-height-display2: 1.22;
  --font-size-display3:   clamp(20px, 2.2vw, 26px);
  --line-height-display3: 1.30;
  --letter-spacing-display: -0.02em;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-xxl: 24px;
  --space-xxxl: 32px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-full: 999px;

  /* 본문 가독 폭 */
  --content-max-width: 65ch;

  /* 섹션 간격 — 데스크톱 기본값, 모바일(≤768px)은 아래 미디어쿼리에서 축소. */
  --space-section-sm: 48px;
  --space-section-md: 64px;
  --space-section-lg: 80px;

  /* Elevation — 키트 미포함 확장. 라이트 톤에서 카드 깊이를 색이 아닌 그림자로 낸다. */
  --shadow-sm:      0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md:      0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg:      0 12px 32px rgba(17, 24, 39, 0.10);
  --shadow-primary: 0 8px 24px rgba(26, 115, 232, 0.18);

  /* Layout — blog global.css .container 와 동일 폭 */
  --layout-max-width: 1120px;

  /* Semantic surface 보강 — warning 계열은 키트에 있으나 success 계열이 없어 대칭 신설 */
  --color-success-surface: #f0fdf4;
}

@media (max-width: 768px) {
  :root {
    --space-section-sm: 32px;
    --space-section-md: 40px;
    --space-section-lg: 48px;
  }
}

/* 다크모드 변수는 의도적으로 정의하지 않는다 (DEC-089, 라이트 단일) */