/* ============================================================================
   MindFin Design Tokens (B2C 개편 0단계)
   모든 페이지에 로드. CSS 변수만 정의하므로 기존 페이지에 영향 없음.
   방향: A(신뢰 핀테크) 골격 + B(캐릭터·바이럴) 포인트
   ============================================================================ */
:root {
    /* ── Brand: Primary (밝고 친근한 블루) ── */
    --mf-primary-050: #EEF4FF;
    --mf-primary-100: #DBE7FF;
    --mf-primary-200: #BBD0FF;
    --mf-primary:     #2B6CF6;
    --mf-primary-600: #1F59D6;
    --mf-primary-700: #1847B0;
    --mf-primary-deep:#0B3A8F;

    /* ── Brand: Accent (코랄 — CTA·하이라이트) ── */
    --mf-accent-050: #FFF0EC;
    --mf-accent-100: #FFDED4;
    --mf-accent:     #FF6B4A;
    --mf-accent-600: #ED5435;

    /* ── Brand: 워드마크/로고 통일색 = 블루 (2026-07-02 골드 폐기 결정)
       변수명은 하위 호환을 위해 유지 — 값만 블루로 교체 ── */
    --mf-brand-gold:   var(--mf-primary);

    /* ── Semantic ── */
    --mf-success: #16A34A;
    --mf-warn:    #F59E0B;
    --mf-danger:  #EF4444;
    --mf-info:    var(--mf-primary);

    /* ── Neutral ── */
    --mf-gray-900: #0F172A;
    --mf-gray-800: #1E293B;
    --mf-gray-700: #334155;
    --mf-gray-600: #475569;
    --mf-gray-500: #64748B;
    --mf-gray-400: #94A3B8;
    --mf-gray-300: #CBD5E1;
    --mf-gray-200: #E2E8F0;
    --mf-gray-100: #F1F5F9;
    --mf-gray-050: #F8FAFC;
    --mf-white:    #FFFFFF;

    /* ── Text / Surface ── */
    --mf-text:        var(--mf-gray-900);
    --mf-text-sub:    var(--mf-gray-500);
    --mf-text-onbrand:#FFFFFF;
    --mf-bg:          #F4F7FC;
    --mf-surface:     #FFFFFF;
    --mf-border:      var(--mf-gray-200);

    /* ── Typography ── */
    --mf-font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
    --mf-fs-display: 32px; --mf-lh-display: 40px;
    --mf-fs-h1: 24px; --mf-lh-h1: 32px;
    --mf-fs-h2: 20px; --mf-lh-h2: 28px;
    --mf-fs-h3: 17px; --mf-lh-h3: 24px;
    --mf-fs-body: 15px; --mf-lh-body: 24px;
    --mf-fs-sm: 13px;  --mf-lh-sm: 18px;
    --mf-fs-xs: 11px;  --mf-lh-xs: 16px;
    --mf-fw-bold: 800; --mf-fw-semibold: 600; --mf-fw-medium: 500; --mf-fw-regular: 400;

    /* ── Spacing (4pt 그리드) ── */
    --mf-space-1: 4px;  --mf-space-2: 8px;  --mf-space-3: 12px; --mf-space-4: 16px;
    --mf-space-5: 24px; --mf-space-6: 32px; --mf-space-7: 48px; --mf-space-8: 64px;

    /* ── Radius ── */
    --mf-radius-sm: 8px; --mf-radius: 12px; --mf-radius-lg: 16px; --mf-radius-xl: 24px; --mf-radius-pill: 999px;

    /* ── Shadow (부드럽게, 골드 글로우 제거) ── */
    --mf-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.07);
    --mf-shadow-md: 0 4px 14px rgba(15,23,42,.08);
    --mf-shadow-lg: 0 14px 36px rgba(15,23,42,.12);

    /* ── Layout ── */
    --mf-container: 480px;       /* 모바일 퍼스트 본문 폭 */
    --mf-container-wide: 960px;

    /* ── Motion ── */
    --mf-ease: cubic-bezier(.4,0,.2,1);
    --mf-dur: .18s;

    /* ── 32 유형 시그니처 컬러 (golden-angle 분포 → 인접 유형도 뚜렷이 구분) ── */
    --mf-type-1:  hsl(0 70% 56%);    --mf-type-2:  hsl(138 62% 48%);  --mf-type-3:  hsl(275 62% 60%);  --mf-type-4:  hsl(53 80% 52%);
    --mf-type-5:  hsl(190 70% 50%);  --mf-type-6:  hsl(328 70% 60%);  --mf-type-7:  hsl(105 55% 50%);  --mf-type-8:  hsl(243 65% 64%);
    --mf-type-9:  hsl(20 82% 56%);   --mf-type-10: hsl(158 60% 46%);  --mf-type-11: hsl(295 60% 60%);  --mf-type-12: hsl(73 60% 50%);
    --mf-type-13: hsl(210 72% 56%);  --mf-type-14: hsl(348 72% 62%);  --mf-type-15: hsl(125 52% 48%);  --mf-type-16: hsl(263 64% 62%);
    --mf-type-17: hsl(40 82% 54%);   --mf-type-18: hsl(178 62% 44%);  --mf-type-19: hsl(315 64% 60%);  --mf-type-20: hsl(93 55% 48%);
    --mf-type-21: hsl(230 68% 62%);  --mf-type-22: hsl(8 76% 58%);    --mf-type-23: hsl(145 58% 46%);  --mf-type-24: hsl(283 62% 60%);
    --mf-type-25: hsl(60 70% 50%);   --mf-type-26: hsl(198 70% 50%);  --mf-type-27: hsl(335 70% 60%);  --mf-type-28: hsl(113 55% 48%);
    --mf-type-29: hsl(250 64% 64%);  --mf-type-30: hsl(28 80% 56%);   --mf-type-31: hsl(165 58% 46%);  --mf-type-32: hsl(303 60% 60%);
}