/* ==========================================================================
   CSS Custom Properties — SBS 아카데미 뷰티스타일 디자인 시스템
   ========================================================================== */

:root {
  /* ── 컬러 팔레트 ── */
  --color-primary: #E91E8C;           /* 비비드 핑크: 메인 버튼, 강조 헤더, 핵심 포인트 */
  --color-primary-dark: #C4176F;      /* 접근성 보완 다크 핑크 */
  --color-secondary: #D4618C;         /* 체리블로썸 핑크: 섹션 배경, 배지, 서브 타이틀 */
  --color-accent-mint: #06B6A4;       /* 민트: 합격 수치, 아이콘 포인트 */
  --color-accent-orange: #F97316;     /* 코랄 오렌지: CTA 보조, 카운터 숫자 강조 */
  --color-accent-yellow: #FBBF24;     /* 선샤인 옐로: 배지 배경, 별점 아이콘 */

  /* ── 배경 컬러 ── */
  --color-bg-light: #FAFAFA;          /* 기본 섹션 배경 */
  --color-bg-pastel: #FFF0F5;         /* 교차 섹션 배경 (파스텔 벚꽃) */
  --color-bg-white: #FFFFFF;

  /* ── 텍스트 컬러 ── */
  --color-text-dark: #1F1F2E;         /* 기본 텍스트 */
  --color-text-mid: #6B7280;          /* 보조 텍스트 */
  --color-text-white: #FFFFFF;

  /* ── 타이포그래피 ── */
  --font-primary: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-number: 'Plus Jakarta Sans', 'Pretendard Variable', sans-serif;

  /* 폰트 굵기 */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* 폰트 크기 — PC */
  --fs-main-heading: clamp(36px, 5vw, 80px);
  --fs-section-heading: clamp(28px, 3.5vw, 48px);
  --fs-sub-heading: clamp(20px, 2vw, 28px);
  --fs-body: clamp(15px, 1.2vw, 18px);
  --fs-number-highlight: clamp(56px, 8vw, 120px);
  --fs-small: 14px;
  --fs-caption: 12px;

  /* 행간 */
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-tight: 1.1;

  /* ── 간격 ── */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-section: 100px;

  /* ── 레이아웃 ── */
  --max-width: 1280px;
  --container-padding: 20px;

  /* ── 반응형 브레이크포인트 참조 (CSS 변수로는 미디어쿼리에 직접 사용 불가, 참조용) ── */
  /* --bp-mobile: 375px; */
  /* --bp-tablet: 768px; */
  /* --bp-desktop: 1280px; */

  /* ── 컴포넌트 토큰 ── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 50px;
  --radius-round: 50%;

  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 4px 16px rgba(233, 30, 140, 0.3);

  /* ── 트랜지션 ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index 레이어 ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-gnb: 1000;
  --z-modal: 2000;
  --z-mobile-cta: 900;
}