/* ============================================================
   Dear TOPIK — Landing Design Tokens
   * 본 파일은 랜딩 페이지 전용입니다. 메인 앱과 자산을 공유하지 않습니다.
   ============================================================ */

:root {
  /* ---- 단청 컬러 (브랜드) ---- */
  --c-navy: #003478;
  --c-navy-deep: #001F4D;
  --c-navy-700: #002255;
  --c-navy-100: #EBF1FA;
  --c-navy-50:  #F5F8FD;

  --c-red: #EB4250;
  --c-red-deep: #9A0824;
  --c-red-100: #FEE2E2;
  --c-red-50:  #FEF2F2;

  --c-green:#56CFCC;
  /* ---- 중립 (지면 톤) ---- */
  --c-bg:        #FFFFFF;
  --c-bg-alt:    #F5F7FA;
  --c-bg-mute:   #F2F1ED;
  --c-paper:     #FBFAF6;
  --c-ink:       #0B1220;
  --c-text:      #1F2937;
  --c-text-2:    #4B5563;
  --c-text-3:    #9AA0A6;
  --c-border:    #eeeeee;
  --c-border-2:  #e0e0e0;

  /* ---- 강조 그라데이션 ---- */
  --grad-hero: radial-gradient(1200px 600px at 85% -10%, rgba(198,12,48,0.08), transparent 60%),
               radial-gradient(900px 500px at 10% 110%, rgba(0,52,120,0.10), transparent 60%);
  --grad-cta:  linear-gradient(135deg, var(--c-navy) 0%, #04205A 60%, #5B1330 100%);
  --grad-mark: linear-gradient(135deg, #154E97 0%, var(--c-green) 100%);

  /* ---- 폰트 패밀리 ---- */
  --ff-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Noto Sans JP', 'Noto Sans SC',
             'Helvetica Neue', Arial, system-ui, sans-serif;
  --ff-display: var(--ff-sans);
  --ff-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo,
             Consolas, monospace;

  /* ---- 타입 스케일 ---- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  15px;
  --fs-md:    16px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;
  --fs-display: clamp(2.75rem, 5.2vw, 4.375rem);
  --fs-eyebrow: 12px;

  /* ---- 라인 / weight ---- */
  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh:       1.6;
  --lh-loose: 1.75;
  --fw-r: 400;
  --fw-m: 500;
  --fw-sb: 600;
  --fw-b: 700;
  --fw-eb: 800;

  /* ---- 라디우스 ---- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- 간격 (8 기반) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* ---- 섹션 패딩 ---- */
  --sec-y: clamp(64px, 9vw, 128px);
  --sec-y-sm: clamp(48px, 6vw, 80px);

  /* ---- 그림자 ---- */
  --sh-xs: 0 1px 2px rgba(15, 17, 22, 0.05);
  --sh-sm: 0 2px 6px rgba(15, 17, 22, 0.06);
  --sh-md: 0 8px 24px rgba(15, 17, 22, 0.08);
  --sh-lg: 0 24px 60px rgba(15, 17, 22, 0.10);
  --sh-xl: 0 40px 90px rgba(0, 52, 120, 0.18);
  --sh-card: 0 1px 0 rgba(15,17,22,0.04), 0 20px 40px -16px rgba(0,52,120,0.18);

  /* ---- 전환 ---- */
  --t-quick: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t:       220ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:  500ms cubic-bezier(0.16, 0.84, 0.24, 1);

  /* ---- 레이아웃 ---- */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 70px;
  --header-h-sm: 56px;

  /* ---- z-index ---- */
  --z-header: 50;
  --z-menu: 60;
  --z-modal: 90;
}

/* 모바일 토큰 미세 조정 */
@media (max-width: 640px) {
  :root {
    --fs-base: 14px;
    --header-h: var(--header-h-sm);
  }
}

/* 사용자 모션 감소 선호 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-quick: 0ms;
    --t: 0ms;
    --t-slow: 0ms;
  }
}