/* =====================================================================
   디자인 토큰 — 코퍼레이트 블루 브랜드
   블루(메인) + 스카이(포인트) + 슬레이트(중립).
   색을 역할(surface/border/text/brand/accent/semantic)로 분리한다.
   ※ 토큰 이름(--green-*, --teal-*)은 호환 위해 유지, 값은 블루 계열.
   ===================================================================== */
:root {
  /* ===== 폰트 ===== */
  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;

  /* ===== 타이포 스케일 ===== */
  --fs-display: clamp(2.4rem, 5vw, 3.4rem);
  --fs-h1: clamp(1.9rem, 3.4vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.2rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-stat: clamp(2.2rem, 4vw, 3rem);

  /* ===== 4pt 간격 시스템 ===== */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-7: 2rem;    --space-8: 2.5rem;  --space-10: 3rem;
  --space-12: 4rem;   --space-16: 5rem;   --space-20: 6rem;   --space-24: 7.5rem;

  /* ===== 반경 ===== */
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px;
  --container: 1240px;

  /* ===== 브랜드 세룰리안 블루 스케일 (토큰명은 green 유지) ===== */
  --green-50:#eef6fb;  --green-100:#d6ebf6; --green-200:#b3d9ec; --green-300:#87c1e0;
  --green-400:#5fa8d2; --green-500:#4190be; --green-600:#357fa6; --green-700:#2c6788;
  --green-800:#26526d; --green-900:#213f53; --green-deep:#152a38;

  /* ===== 스카이 포인트(보조, 토큰명은 teal 유지) ===== */
  --teal-50:#eff7fc;  --teal-100:#daedf7; --teal-300:#8bc2e0;
  --teal-500:#4190be; --teal-600:#357fa6; --teal-700:#2c6788;

  /* ===== 중립(슬레이트, 블루 언더톤) ===== */
  --slate-0:#ffffff;  --slate-50:#f5f8fb;  --slate-100:#eaf1f7; --slate-200:#dae5ef;
  --slate-300:#bfcedd; --slate-400:#8fa1b5; --slate-500:#617488; --slate-600:#45566a;
  --slate-700:#313f51; --slate-800:#1d2836; --slate-900:#0f1a25; --navy-deep:#0b1a25;

  /* ===== 시맨틱(역할) 토큰 ===== */
  --surface:#ffffff; --surface-2:#f5f8fb; --surface-3:#eaf1f7; --surface-brand:#eef6fb;
  --border:#dae5ef; --border-strong:#bfcedd;
  --text:#1d2836; --text-muted:#617488; --text-on-brand:#ffffff;

  --brand:#4190be;
  --primary:#2f7ba3; --primary-hover:#276688; --primary-tint:#eef6fb;
  --accent:#5fa8d2; --accent-hover:#4190be; --accent-tint:#eff7fc;
  --eyebrow:#1b4195;

  /* 상태 */
  --success:#15803d; --warning:#b45309; --danger:#b91c1c; --info:#4190be;

  /* 히어로 — 다층 세룰리안 그라데이션(사진 위 오버레이용) */
  --hero-text:#ffffff; --hero-kicker:#8bc2e0;
  --hero-overlay:
    linear-gradient(100deg, rgba(14,45,70,.92) 0%, rgba(20,58,88,.86) 28%, rgba(48,110,152,.60) 60%, rgba(128,186,220,.36) 100%);

  /* 다크 푸터(딥 세룰리안) */
  --footer-bg:#132b3a; --footer-text:#a7c1d3;
  --footer-heading:#ffffff; --footer-border:rgba(255,255,255,.10);

  /* 그림자(계층 3단) */
  --shadow-sm: 0 1px 2px rgba(20,45,60,.04), 0 1px 5px rgba(20,45,60,.035);
  --shadow-md: 0 4px 12px rgba(20,45,60,.05);
  --shadow-lg: 0 8px 22px rgba(20,45,60,.07);

  --transition: .22s cubic-bezier(.4,0,.2,1);
}