/* ============================================================
   후후페이 Design System — CSS Custom Properties
   Ref: docs/02_DESIGN.md §1
   ============================================================ */

:root {
  /* ── Color: Primary ── */
  --color-primary:       #3883FF;   /* WhoWho Primary Blue */
  --color-primary-dark:  #0075FF;
  --color-primary-light: #418DFF;   /* WhoWho Light Blue */

  /* ── Color: Semantic ── */
  --color-accent:   #3883FF;   /* Blue accent */
  --color-warning:  #92400E;   /* Deep Amber — 진한 경고색 */
  --color-danger:   #991B1B;   /* Deep Red */

  /* ── Background: Light Theme ── */
  --bg-base:     #F3F7FD;   /* WhoWho bluish background */
  --bg-surface:  #FFFFFF;   /* 카드/컴포넌트 배경 */
  --bg-elevated: #EEF4FF;   /* 섹션 배경 tint */
  --bg-input:    #FFFFFF;   /* 입력 필드 */

  /* ── Text ── */
  --text-primary:   #1C2B4A;   /* 다크 네이비 차콜. 순흑보다 따뜻함 */
  --text-secondary: #374151;   /* 미디엄 다크 그레이 */
  --text-muted:     #6B7280;   /* 보조 정보 */
  --text-accent:    #1C2B4A;

  /* ── Typography ── */
  --font-sans: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */
  --font-size-2xl:  1.5rem;     /* 24px */
  --font-size-3xl:  1.875rem;   /* 30px */
  --font-size-4xl:  2.25rem;    /* 36px */
  --font-size-hero: 2rem;       /* 32px mobile default, overridden at lg */

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

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

  /* ── Border Radius ── */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-card:  0 2px 16px rgba(28, 43, 74, 0.08);
  --shadow-modal: 0 8px 32px rgba(28, 43, 74, 0.15);

  /* ── Transition ── */
  --transition: 0.2s ease;

  /* ── Border ── */
  --border:         #E2DDD6;   /* 따뜻한 회색. 차가운 #E2E8F0 대체 */
  --border-subtle:  rgba(0, 0, 0, 0.05);
  --border-primary: rgba(28, 43, 74, 0.2);

  /* ── Z-Index ── */
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-fab:      400;

  /* ── CTA: 그린 ── */
  --color-cta:       #3883FF;
  --color-cta-dark:  #0075FF;
  --color-cta-glow:  rgba(56, 131, 255, 0.22);

  /* ── Trust: 그린 계열 ── */
  --color-trust:     #0075FF;
  --color-trust-bg:  rgba(56, 131, 255, 0.10);

  /* ── Gold: 금색 → 그린으로 ── */
  --color-gold:      #3883FF;
  --color-gold-dark: #0075FF;

  /* ── Chat Bubble Colors (심리학 기반) ── */
  --color-operator-bubble: #0075FF;   /* 신뢰/권위 블루 — 운영자 발신 */
  --color-customer-bubble: #EEF4FF;   /* 블루 tint — 고객 버블 */
  --color-customer-text:   #1C2B4A;   /* 다크 네이비 — 고객 버블 텍스트 */
}

/* Desktop font-size-hero override */
@media (min-width: 1024px) {
  :root {
    --font-size-hero: 3rem; /* 48px */
  }
}