/* ==========================================================================
   tokens.css — 솔라데이터케어(SDC) 디자인 토큰
   --------------------------------------------------------------------------
   ★ 색·서체·간격은 전부 여기서만 정의합니다. 다른 CSS 에 색상 코드를
     직접 쓰지 마세요. 리브랜딩 시 이 파일만 고치면 전체가 따라옵니다.
   ★ 클래스 접두사는 전부 sdc- 를 씁니다. 계산기 페이지가 사이트 CSS 를
     같이 불러와도 이름이 충돌하지 않게 하려는 것입니다.
     (구 사이트는 badge/field/result 등 8개 클래스가 충돌해 계산기를
      독립 파일로 둘 수밖에 없었습니다. 그 문제를 여기서 없앱니다.)
   ========================================================================== */

:root {
  /* ---------- 브랜드 컬러 : 로고에서 추출 ---------- */
  --navy:        #1B2A5E;   /* 로고 워드마크 네이비 — 주색 */
  --navy-800:    #142046;
  --navy-600:    #2B3F7E;
  --navy-100:    #DDE3F1;
  --navy-050:    #EEF2F9;

  --gold:        #E0A020;   /* 로고 타겟 골드 — 포인트색 */
  --gold-600:    #C4880F;   /* hover */
  --gold-100:    #FBEFD6;
  --gold-text:   #8A5D00;   /* 흰 배경 위 텍스트용 (대비 4.5:1 확보) */

  /* ---------- 중립 ---------- */
  --ink:         #111827;
  --ink-soft:    #46536B;
  --muted:       #6B7688;
  --line:        #E3E8F0;
  --line-soft:   #F1F4F9;
  --bg:          #FFFFFF;
  --bg-soft:     #F5F7FB;   /* 섹션 교차 배경 — 로고 배경과 같은 톤 */
  --bg-deep:     #131F45;   /* 어두운 섹션 */

  /* ---------- 판정 상태 (진단 결과 표시 전용) ---------- */
  --ok:          #15803D;
  --ok-bg:       #E9F7EE;
  --warn:        #B45309;
  --warn-bg:     #FDF3E3;
  --bad:         #B91C1C;
  --bad-bg:      #FCEDED;

  /* ---------- 타이포 ---------- */
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system,
               BlinkMacSystemFont, system-ui, "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-mono: "SFMono-Regular", "Consolas", "D2Coding", ui-monospace, monospace;

  --fs-display: clamp(2rem, 5vw, 3.25rem);
  --fs-h1:      clamp(1.75rem, 4vw, 2.5rem);
  --fs-h2:      clamp(1.4rem, 2.8vw, 2rem);
  --fs-h3:      clamp(1.1rem, 1.8vw, 1.3rem);
  --fs-lead:    clamp(1rem, 1.4vw, 1.1875rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight: 1.22;
  --lh-snug:  1.45;
  --lh-body:  1.75;

  /* ---------- 레이아웃 ---------- */
  --container:      1180px;
  --container-slim: 820px;
  --gutter:         clamp(20px, 5vw, 40px);
  --section:        clamp(56px, 7vw, 104px);
  --header-h:       66px;

  /* ---------- 형태 ---------- */
  --r-sm:   8px;
  --r:      12px;
  --r-lg:   18px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(27, 42, 94, .07);
  --sh:    0 4px 18px rgba(27, 42, 94, .09);
  --sh-lg: 0 16px 44px rgba(27, 42, 94, .14);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur:  .4s;

  --z-header: 100;
  --z-drawer: 110;
}