/*
 * 디자인 토큰
 * 색: 네이비(신뢰) 바탕 요소 + 초록(성장·행동) 포인트. 대비는 WCAG로 계산함.
 * 형태: 모햇 기준 — 흰 바탕, 얇은 회색 테두리, 회색 면, 그림자 없음, 16px 모서리.
 */
:root {
  --navy-950: #081226;
  --navy-900: #0D1B36;
  --navy-800: #142849;
  --navy-700: #1D3A66;
  --navy-600: #2A4F85;
  --navy-300: #A6B8D8;
  --navy-200: #CBD6EA;
  --navy-100: #E5EBF5;

  --green-800: #0A5C3B;
  --green-700: #0B7449;
  --green-600: #0E8A57;
  --green-400: #2EC981;
  --green-300: #6BDDA6;
  --green-100: #DDF6E9;
  --green-50: #F0FBF5;

  --amber-100: #FDF0D5;
  --amber-900: #6B4300;

  --gray-900: #151B26;
  --gray-800: #2A3240;
  --gray-700: #454E5E;
  --gray-600: #5F6878;
  --gray-500: #7B8494;
  --gray-400: #A0A8B5;
  --gray-300: #C7CDD6;
  --gray-200: #E1E5EB;
  --gray-150: #E9ECF0;
  --gray-100: #EEF1F5;

  --surface: #F4F6F8;
  --red-500: #E5484D;

  /* 직접 색을 넣던 곳도 테마를 따라가도록 토큰으로 둔다 */
  --shade-rgb: 8, 18, 38;
  --logo-bg: #2EC981;
  --logo-ink: #0D1B36;

  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

  --container: 1200px;
  --gutter: 20px;
  --gnb-h: 68px;
  --section-y: 96px;
  --radius: 16px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 767px) {
  :root {
    --gnb-h: 56px;
    --section-y: 64px;
    --gutter: 16px;
  }
}