/*
  소셜러스 스튜디오 디자인 토큰
  메인 컬러 #056ECC(블루), 포인트 컬러 #D91641(레드)·#E97132(오렌지)를 사용한다.
  값을 바꿀 때는 이 파일만 수정하면 전체 사이트에 반영된다. 실물 예시는 /StyleGuide 페이지 참고.
*/
:root {
  /* Brand */
  --color-primary: #056ECC;
  --color-primary-600: #045BAA;
  --color-primary-700: #044785;
  --color-primary-100: #E5F1FC;
  --color-primary-50: #F3F9FD;

  --color-accent: #D91641;
  --color-accent-600: #B01235;
  --color-accent-100: #FBE4EA;

  --color-accent2: #E97132;
  --color-accent2-600: #C85A22;
  --color-accent2-100: #FDEBE0;

  --color-dark: #1F1E24;
  --color-dark-700: #2C2B33;
  --color-dark-500: #4A4952;

  /* Neutral / Gray scale */
  --color-white: #FFFFFF;
  --color-gray-50: #F8F9FB;
  --color-gray-100: #F1F2F6;
  --color-gray-200: #E4E5EC;
  --color-gray-300: #D2D3DD;
  --color-gray-400: #A7A8B5;
  --color-gray-500: #7C7D8C;
  --color-gray-600: #5B5C6B;
  --color-gray-700: #3F4050;

  /* Semantic */
  --color-success: #22A366;
  --color-warning: #F2A93B;
  --color-danger: var(--color-accent);
  --color-info: var(--color-primary);

  /* Typography */
  --font-ko: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-jp: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --fs-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-h2: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --fs-h4: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.25;
  --lh-normal: 1.6;

  /* Spacing (4px scale) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(31, 30, 36, 0.06);
  --shadow-md: 0 12px 32px rgba(31, 30, 36, 0.10);
  --shadow-primary: 0 12px 28px rgba(5, 110, 204, 0.28);

  /* Layout */
  --container-max: 1160px;
  --header-height: 76px;

  /* Transition */
  --ease-default: all 0.2s ease;
}