/* ================================================================
   tokens.css — WiseDairy 디자인 토큰
   출처: docs/design/design-system.md
   ================================================================ */

:root {

  /* ── Bootstrap 5 오버라이드 ─────────────────────────────────── */
  --bs-primary:         #6575f5;
  --bs-primary-rgb:     101, 117, 245;
  --bs-success:         #28a745;
  --bs-warning:         #fd7e14;
  --bs-danger:          #dc3545;
  --bs-body-bg:         #fbfcff;
  --bs-body-color:      #333333;
  --bs-border-color:    #e0e4ea;
  --bs-card-bg:         #ffffff;
  --bs-border-radius:   0.5rem;

  /* ── 브랜드 색상 ─────────────────────────────────────────────── */
  --wd-primary:         #6575f5;   /* 주요 액션, 활성 메뉴, 링크 */
  --wd-primary-dark:    #4f5de2;   /* hover 상태 */
  --wd-primary-light:   rgba(101, 117, 245, 0.12); /* 아이콘 배경, 뱃지 배경 */
  --wd-primary-surface: #fbfcff;                   /* primary 계열 연한 서피스 (히스토리 바 등) */

  /* ── 블루 (구 primary — 정보·blue 계열 전용) ─────────────────── */
  --wd-blue:            #1a73e8;   /* 정보 표시, tag-blue, alert-info */
  --wd-blue-light:      rgba(26, 115, 232, 0.12); /* 블루 계열 배경 */
  --wd-blue-dark:       #1558b0;   /* blue hover */

  /* ── 시맨틱 색상 ─────────────────────────────────────────────── */
  --wd-success:         #28a745;   /* 정상, 완료, 증가 */
  --wd-success-dark:    #1d8140;   /* success hover · 텍스트 */
  --wd-success-light:   rgba(40, 167, 69, 0.12);  /* success 배경 (배지·태그) */
  --wd-warning:         #fd7e14;   /* 주의, 대기 */
  --wd-warning-dark:    #c96a08;   /* warning hover · 텍스트 */
  --wd-warning-light:   rgba(253, 126, 20, 0.12); /* warning 배경 (배지·태그) */
  --wd-danger:          #dc3545;   /* 오류, 감소, 이상 수치 */
  --wd-danger-dark:     #b02a37;   /* danger hover · 텍스트 */
  --wd-danger-light:    rgba(220, 53, 69, 0.12);  /* danger 배경 (배지·태그) */
  --wd-info:            #0dcaf0;   /* 정보, 보조 강조 */
  --wd-purple:          #6f42c1;   /* 보조 카테고리 */
  --wd-grey:              #e0e0e0;
  --wd-default:           #ffffff;

  /* ── 서피스 색상 ─────────────────────────────────────────────── */
  --wd-sidebar-bg:      linear-gradient(to right, #101c2a, 70%, #333b46);   /* 사이드바 배경 */
  --wd-sidebar-hover:   #273447;   /* 사이드바 hover */
  --wd-sidebar-active:  #6575f5;   /* 사이드바 활성 항목 */
  --wd-sidebar-text:    #94a3b8;   /* 사이드바 기본 텍스트 */
  --wd-card-bg:         #ffffff;   /* 카드 배경 */
  --wd-card-hd:         #f5f9ff;
  --wd-header-bg:       #ffffff;   /* 헤더 배경 */
  --wd-body-bg:         #fafbfe;   /* 페이지 배경 */
  --wd-table-hd:        #f9f9f9;
  --wd-table-stripe:      #f7f9fb;

  /* ── 텍스트 색상 ─────────────────────────────────────────────── */
  --wd-text:            #333333;   /* 본문 기본 */
  --wd-text-dark:       #0f172a;   /* 제목, 강조 수치 */
  --wd-text-muted:      #6c757d;   /* 보조 설명, 레이블 */
  --wd-text-secondary:  #64748b;   /* 보조 레이블, 범례, 필터 텍스트 (Slate-500) */
  --wd-text-tertiary:   #475569;   /* 3차 텍스트 — 센서명, 품종, 표 헤더 (Slate-600) */
  --wd-text-inverse:    #ffffff;   /* 어두운 배경 위 텍스트 */

  /* ── 다크 테마 텍스트 ───────────────────────────────────────── */
  --wd-dark-text:       #e2e8f0;   /* 다크모드 기본 텍스트 */
  --wd-dark-text-muted: #8391a2;   /* 다크모드 보조 텍스트 */

  /* ── 반투명 서피스 & 구분선 ─────────────────────────────────── */
  --wd-surface-subtle:       rgba(0,0,0,0.025);      /* 카드 내부 서피스 (라이트) */
  --wd-surface-faint:        rgba(0,0,0,0.04);       /* hover 배경, 체크박스 배경 (라이트) */
  --wd-divide:               rgba(0,0,0,0.06);       /* 기본 구분선, 트랙 배경 (라이트) */
  --wd-divide-faint:         rgba(0,0,0,0.04);       /* 약한 구분선 (라이트) */
  --wd-dark-surface-subtle:  rgba(255,255,255,0.03); /* 카드 내부 서피스 (다크) */
  --wd-dark-surface-faint:   rgba(255,255,255,0.05); /* hover 배경 (다크) */
  --wd-dark-divide:          rgba(255,255,255,0.06); /* 기본 구분선 (다크) */
  --wd-dark-divide-faint:    rgba(255,255,255,0.04); /* 약한 구분선 (다크) */

  /* ── 경계선 & 그림자 ─────────────────────────────────────────── */
  --wd-border:          #e0e4ea;   /* 기본 경계선 (카드·폼·행 구분) */
  --wd-border-strong:   #c0c7d2;   /* 강조 경계선 (테이블 하단·섹션 구분) */
  --wd-border-hover:    #b0b8c4;   /* 인풋·버튼 hover 테두리 */
  --wd-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.08);
  --wd-shadow-md:       0 6px 20px rgba(0, 0, 0, 0.12);
  --wd-shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.2);  /* 모달 다이얼로그 */
  --wd-shadow-focus:         0 0 0 3px rgba(101, 117, 245, 0.12); /* primary 포커스 링 */
  --wd-shadow-focus-danger:  0 0 0 3px rgba(220,  53,  69, 0.12); /* danger  포커스 링 */
  --wd-shadow-focus-success: 0 0 0 3px rgba( 40, 167,  69, 0.12); /* success 포커스 링 */

  /* ── 낙농 도메인 전용 색상 ───────────────────────────────────── */
  --wd-milk:            #f0f8ff;   /* 원유 관련 배경 */
  --wd-cow-brown:       #8b4513;   /* 개체 관련 강조 */
  --wd-pasture:         #2e7d32;   /* 목장/사료 관련 */
  --wd-somatic:         #e53935;   /* 체세포수 이상 경고 */
  --wd-fat:             #f9a825;   /* 유지방율 관련 */
  --wd-protein:         #1565c0;   /* 유단백율 관련 */

  /* ── 타이포그래피 ────────────────────────────────────────────── */
  /* 기본 본문 폰트: Google Sans Flex (variable) + Pretendard(한글) 폴백 */
  --wd-font-base:       'Google Sans Flex', 'Pretendard', 'Segoe UI', system-ui, sans-serif;
  /* 선택적 강조 폰트: 헤더/사이드바 등 영문 영역에 사용 */
  --wd-font-play:       'Play', 'Pretendard', 'Segoe UI', system-ui, sans-serif;
  --wd-font-mono:       'JetBrains Mono', 'Consolas', monospace; /* 수치 데이터 */

  --wd-text-8:          8px;    /* 게이지 범위 레이블 등 최소 크기 */
  --wd-text-9:          9px;    /* 극소 레이블 (단위, 뱃지, 눈금) */
  --wd-text-10:         10px;   /* 소형 레이블 (KPI 라벨, 범례) */
  --wd-text-xs:         11px;   /* 타임스탬프, 캡션 */
  --wd-text-sm:         12px;   /* 보조 레이블, 배지 */
  --wd-text-13:         13px;   /* 중간 수치 (KPI 단위, 품종) */
  --wd-text-base:       14px;   /* 본문 기본 */
  --wd-text-md:         15px;   /* 사이드바 메뉴 */
  --wd-text-16:         16px;   /* 센서 수치 등 중형 수치 */
  --wd-text-17:         17px;   /* 착유 통계 수치 */
  --wd-text-lg:         18px;   /* 카드 수치 */
  --wd-text-2xl:        20px;   /* 페이지 제목 */
  --wd-text-brand:      22px;   /* 브랜드명, 중간 강조 헤더 */
  --wd-text-xl:         24px;   /* 대형 통계 수치 */
  --wd-text-26:         26px;   /* 레이스 월 표시 등 강조 수치 */
  --wd-text-28:         28px;   /* KPI 대형 수치 */

  /* 굵기 — 숫자 토큰 (100~900) */
  --wd-weight-100:       100;   /* Thin */
  --wd-weight-200:       200;   /* ExtraLight */
  --wd-weight-300:       300;   /* Light */
  --wd-weight-400:       400;   /* Regular (본문·버튼 기본) */
  --wd-weight-500:       500;   /* Medium */
  --wd-weight-600:       600;   /* SemiBold */
  --wd-weight-700:       700;   /* Bold */
  --wd-weight-800:       800;   /* ExtraBold (대형 수치·KPI 강조) */
  --wd-weight-900:       900;   /* Black */

  /* 굵기 — 시맨틱 별칭 (숫자 토큰 참조) */
  --wd-weight-normal:    var(--wd-weight-400);
  --wd-weight-medium:    var(--wd-weight-500);
  --wd-weight-semibold:  var(--wd-weight-600);
  --wd-weight-bold:      var(--wd-weight-700);
  --wd-weight-extrabold: var(--wd-weight-800);

  /* ── 간격(Spacing) ───────────────────────────────────────────── */
  --wd-space-xs:        4px;
  --wd-space-sm:        8px;
  --wd-space-md:        16px;
  --wd-space-lg:        24px;
  --wd-space-xl:        32px;
  --wd-space-2xl:       48px;

  /* ── 형태(Shape) ─────────────────────────────────────────────── */
  --wd-radius-xs:       3px;
  --wd-radius-sm:       4px;    /* 버튼, 인풋 */
  --wd-radius-md:       6px;    /* 드롭다운, 툴팁 */
  --wd-radius-8:        8px;    /* 토글 버튼, 체크박스 */
  --wd-radius-lg:       10px;   /* 카드 */
  --wd-radius-12:       12px;   /* 센서 카드, 알림 아이템, 아바타 */
  --wd-radius-xl:       16px;   /* 글래스 카드, 대형 패널 */
  --wd-radius-full:     9999px; /* 배지, 태그 */

  /* ── z-index 레이어 ──────────────────────────────────────────── */
  --wd-z-dropdown:      500;    /* 드롭다운·셀렉트 패널 */
  --wd-z-toast:         900;    /* 토스트 알림 */
  --wd-z-top:           9999;   /* 최상위 (로딩 오버레이 등) */

  /* ── 레이아웃 치수 ───────────────────────────────────────────── */
  --wd-width-xs:        10px;
  --wd-width-sm:        20px;
  --wd-width-md:        30px;
  --wd-width-lg:        40px;
  --wd-width-xl:        50px;
  --wd-sidebar-width:     240px;
  --wd-search-width:      85px;
  --wd-sidebar-collapsed: 64px;
  --wd-header-height:        60px;
  --wd-header-history-height: 36px;

  
}

/* reserveClass - layout */
.w100 { width: 100% !important; }
.h100 { height: 100% !important; }
.w-100 { width: 100px !important; }
.h-100 { height: 100px !important; }
.m-10 { margin: 10px; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.p-10 { padding: 10px; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }


/* reserveClass - text */
.underline { text-decoration: underline; }