/* ============================================
   GPTalk Design Tokens
   ============================================
   ⚠️  모든 브랜드 색상 · 스페이싱 · 타이포는 여기에서 한 곳에서 관리합니다.
   색상 하나 바꾸면 전체 페이지에 반영됩니다.

   React+TS 이식 시: 이 파일을 그대로 프로젝트 루트의 styles/tokens.css로
   옮기고 App root에서 import하면 됩니다.
   ============================================ */

:root {
  /* ═══════════════ Brand Colors ═══════════════ */

  /* Primary — Sky Blue (Product primary, links, AI accents) */
  --brand-primary-50:   #F3F9FD;
  --brand-primary-100:  #E4F3FC;
  --brand-primary-200:  #CFE4F4;
  --brand-primary-300:  #8DD1F4;
  --brand-primary-400:  #2FA1EB;
  --brand-primary-500:  #1F8AD9;   /* base */
  --brand-primary-600:  #1878C0;
  --brand-primary-700:  #0F5C93;

  /* Accent — Yellow (Landing CTA, highlights, character) */
  --brand-accent-100:   #FFF5CC;
  --brand-accent-200:   #FFE58A;
  --brand-accent-400:   #FFDA5C;
  --brand-accent-500:   #FFCE1F;   /* base */
  --brand-accent-700:   #7A5A00;
  --brand-accent-900:   #4A3800;

  /* Deep — Navy (titles, text-strong, outlines) */
  --brand-navy-900:     #0B1B34;   /* base */
  --brand-navy-700:     #1F3A68;
  --brand-navy-500:     #506890;
  --brand-navy-300:     #8DA0BF;

  /* Character tone accents (fixed illustration hues) */
  --brand-char-yellow:  #FFC93A;
  --brand-char-blue:    #4FB3E8;

  /* ═══════════════ Semantic (파랑·노랑 매핑) ═══════════════ */
  /* "success" 계열은 실제로 sky 계열 값을 사용합니다.
     시맨틱 이름과 색상이 분리되어 있으니 필요 시 값만 바꾸면 됩니다. */

  --success-100:  var(--brand-primary-100);
  --success-500:  var(--brand-primary-500);
  --success-700:  var(--brand-primary-700);

  --warn-100:     var(--brand-accent-100);
  --warn-500:     #E5A500;
  --warn-700:     var(--brand-accent-700);

  /* ═══════════════ Neutrals ═══════════════ */
  --bg:               #F6F8FB;
  --bg-alt:           #EEF3F8;
  --surface:          #FFFFFF;
  --surface-2:        #FAFBFD;
  --border:           #E4E9F0;
  --border-strong:    #CFD7E3;
  --divider:          #EEF2F7;

  /* Text roles (aliases for readability) */
  --text-strong:      var(--brand-navy-900);
  --text-body:        var(--brand-navy-700);
  --text-secondary:   var(--brand-navy-500);
  --text-tertiary:    var(--brand-navy-300);
  --text-inverted:    #FFFFFF;

  /* ═══════════════ Radius ═══════════════ */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ═══════════════ Shadows ═══════════════ */
  --shadow-xs: 0 1px 2px rgba(11, 27, 52, 0.04);
  --shadow-sm: 0 2px 6px rgba(11, 27, 52, 0.06);
  --shadow-md: 0 8px 20px rgba(11, 27, 52, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 27, 52, 0.12);
  --shadow-float: 0 20px 40px rgba(11, 27, 52, 0.10);
  --shadow-cta-yellow: 0 6px 0 rgba(180, 130, 0, 0.18), 0 8px 20px rgba(255, 206, 31, 0.35);
  --shadow-cta-primary: 0 4px 14px rgba(31, 138, 217, 0.28);

  /* ═══════════════ Spacing scale (4-base) ═══════════════ */
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ═══════════════ Typography ═══════════════ */
  --font-sans: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:  64px;
  --fs-h1:       52px;
  --fs-h2:       32px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-lg:       18px;
  --fs-body:     16px;
  --fs-sm:       14px;
  --fs-xs:       13px;
  --fs-micro:    12px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  --tracking-tight:  0;
  --tracking-snug:   0;
  --tracking-normal: 0;
  --tracking-wide:   0;
  --tracking-wider:  0;

  /* ═══════════════ Layout ═══════════════ */
  --container-max: 1200px;
  --container-narrow: 960px;
  --nav-h: 72px;
}

/* Pretendard variable font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');