/* ==========================================================
   스마트79 — Design Tokens
   모든 CSS 값은 이 파일의 변수를 참조합니다.
   px 고정값 직접 사용 금지 (border 1~2px 제외)
   ========================================================== */
:root {
  /* 색상 */
  --blue:        #025B8E;
  --blue-dark:   #014A75;
  --blue-light:  #E8F4FC;
  --blue-grad:   linear-gradient(135deg, #025B8E, #1877F2);
  --green:       #00A89C;
  --green-dark:  #007a71;
  --red:         #e53e3e;
  --orange:      #e67e22;
  --gray-bg:     #F5F6FA;
  --gray-border: #E2E6F0;
  --text:        #1A1D23;
  --text-sub:    #6B7280;
  --white:       #FFFFFF;

  /* 타이포그래피 */
  --fs-xs:   clamp(12px, 2.5vw, 14px);
  --fs-sm:   clamp(14px, 3.0vw, 16px);
  --fs-base: clamp(15px, 3.3vw, 17px);
  --fs-md:   clamp(16px, 3.5vw, 18px);
  --fs-lg:   clamp(18px, 4.0vw, 22px);
  --fs-xl:   clamp(22px, 5.0vw, 28px);
  --fs-2xl:  clamp(26px, 6.0vw, 34px);
  --fs-3xl:  clamp(30px, 7.5vw, 42px);

  /* 간격 */
  --sp-xs:  clamp(4px,  1.0vw,  6px);
  --sp-sm:  clamp(8px,  2.0vw, 10px);
  --sp-md:  clamp(12px, 2.8vw, 16px);
  --sp-lg:  clamp(16px, 3.7vw, 20px);
  --sp-xl:  clamp(20px, 4.7vw, 28px);
  --sp-2xl: clamp(28px, 6.0vw, 40px);
  --sp-3xl: clamp(36px, 8.0vw, 56px);

  /* 아이콘 */
  --icon-sm:  clamp(20px, 5.0vw, 28px);
  --icon-md:  clamp(28px, 7.0vw, 40px);
  --icon-lg:  clamp(40px, 10.0vw, 60px);

  /* 버튼 높이 */
  --btn-h-sm: clamp(32px, 8.0vw, 40px);
  --btn-h-md: clamp(40px, 9.5vw, 48px);
  --btn-h-lg: clamp(48px, 11.5vw, 56px);

  /* Radius */
  --radius-sm: clamp(6px,  1.5vw, 10px);
  --radius:    clamp(10px, 2.5vw, 14px);
  --radius-lg: clamp(14px, 3.5vw, 18px);
  --radius-xl: clamp(18px, 4.5vw, 24px);

  /* 그림자 */
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-card: 0 4px 16px rgba(0,0,0,0.10);
}