/* ✨TODO - 필요에 따라 프로젝트에 맞게 수정해서 사용하세요*/
/* 📝  
설명: 이 CSS 파일은 Tailwind CSS의 색상 팔레트를 확장하여 주요 색상, 상태별 색상, 투명도 등을 정의합니다. 
   프로젝트에서 일관된 색상 사용을 위해 클래스 이름을 지정했습니다. */
/* 프로젝트마다 최초 색상 전부 변경후 사용 */
/* 주요 텍스트 색상 */

:root {
  --primary-text-color: #333333;
  --header-bg: #ffffff;
  --body-bg: #ffffff;
  --primary-border-color: #e9ecef;
  --secondary-border-color: #e9ecef;
  --nav-link-color: #515355;
  --nav-link-hover-color: #b39880;
  --nav-link-hover-bg: #f1f5f9;
  --button-hover-bg: #f1f5f9;
  --hamburger-color: #475569;
  --sidebar-header-bg: #ffffff;
  --close-btn-color: #64748b;
  --close-btn-hover-bg: #f1f5f9;
  --close-btn-hover-color: #475569;
  --sidebar-link-color: #dce1e7;
  --sidebar-link-hover-color: #d4d4d4;
  --sidebar-link-hover-bg: #f1f5f9;
  --divider-color: #e2e8f0;
  --focus-color: #2563eb;
  --primary-color: #1a943f;
  --secondary-color: #a9bc95;
  --header-top-bg: #0a4136;

  /* Consolidated Colors */
  --main-green: #4caf93;
  --text-slate: #6b7c93;
  --bg-slate-light: #f5f7fa;
  --text-dark: #1a2332;
  --main-green-dark: #2d8b6e;
  --accent-coral: #ff7b6d;
  --border-light: #dde1e7;
  --bg-green-light: #e9f5f2;
  --accent-purple: #9b72cf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-top-bg: #0a4136;
    --border-color: #e9ecef;
    --nav-link-color: #4c4f52;
    --nav-link-hover-color: #b39880;
    --nav-link-hover-bg: #334155;
    --button-hover-bg: #334155;
    --hamburger-color: #cbd5e1;
    --sidebar-header-bg: #1e293b;
    --close-btn-color: #94a3b8;
    --close-btn-hover-bg: #334155;
    --close-btn-hover-color: #cbd5e1;
    --sidebar-link-color: #dce1e7;
    --sidebar-link-hover-color: #60a5fa;
    --sidebar-link-hover-bg: #334155;
    --divider-color: #334155;
    --focus-color: #60a5fa;

    --tertiary-text-color: #ffffff;
  }
}

.primary-text-color {
  color: var(--primary-text-color) !important;
}
.secondary-text-color {
  color: #555555 !important;
}
.tertiary-text-color {
  color: var(--tertiary-text-color) !important;
}
.error-text-color {
  color: #dc2626 !important;
}
.success-text-color {
  color: #16a34a !important;
}
.warning-text-color {
  color: #f59e42 !important;
}

/* 주요 배경색 */

.primary-bg-color {
  background-color: var(--primary-color) !important;
}
.secondary-bg-color {
  background-color: #a9bc95 !important;
}
.body-bg-color {
  background-color: var(--body-bg) !important;
}
.error-bg-color {
  background-color: #fee2e2 !important;
}
.success-bg-color {
  background-color: #ddd !important;
}
.warning-bg-color {
  background-color: #fef9c3 !important;
}
.footer-bg-color {
  background-color: var(--primary-text-color) !important;
}
/* 주요 테두리색 */
.primary-border-color {
  border-color: #24316c !important;
}
.secondary-border-color {
  border-color: #64748b !important;
}
.error-border-color {
  border-color: #dc2626 !important;
}
.success-border-color {
  border-color: #16a34a !important;
}
.warning-border-color {
  border-color: #f59e42 !important;
}

/* 주요 그림자색 */
.primary-shadow-color {
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.1) !important;
}
.secondary-shadow-color {
  box-shadow: 0 1px 3px rgba(100, 116, 139, 0.1) !important;
}
.error-shadow-color {
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1) !important;
}
.success-shadow-color {
  box-shadow: 0 1px 3px rgba(22, 163, 74, 0.1) !important;
}
.warning-shadow-color {
  box-shadow: 0 1px 3px rgba(245, 158, 66, 0.1) !important;
}

/* 주요 링크 색상 */
.primary-link-color {
  color: #24316c !important;
}
.secondary-link-color {
  color: #64748b !important;
}
.error-link-color {
  color: #dc2626 !important;
}
.success-link-color {
  color: #16a34a !important;
}
.warning-link-color {
  color: #f59e42 !important;
}

/* 주요 버튼 색상 */

.primary-button-color {
  background-color: var(--header-top-bg) !important;
  color: white !important;
}
.secondary-button-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-button-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-button-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-button-color {
  background-color: #f59e42 !important;
  color: white !important;
}
.outline-button-color {
  background: transparent !important;
  border: var(--border-color) 1.5px solid !important;
}
/* 주요 버튼 호버 색상 */

.error-button-color:hover {
  background-color: #c82333 !important;
}
.primary-button-color:hover {
  background-color: var(--secondary-color) !important;
}

.outline-button-color:hover,
.outline-button-color:focus {
  background-color: #f1f3f4 !important;
}

.primary-button-color:focus,
.primary-button-color:active:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* 주요 폼 요소 색상 */
.primary-input-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-input-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-input-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-input-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-input-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 테이블 색상 */
.primary-table-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-table-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-table-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-table-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-table-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 카드 색상 */
.primary-card-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-card-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-card-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-card-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-card-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 모달 색상 */
.primary-modal-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-modal-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-modal-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-modal-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-modal-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 툴팁 색상 */
.primary-tooltip-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-tooltip-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-tooltip-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-tooltip-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-tooltip-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 배지 색상 */
.primary-badge-color {
  background-color: #24316c !important;
  color: white !important;
}
.secondary-badge-color {
  background-color: #64748b !important;
  color: white !important;
}
.error-badge-color {
  background-color: #dc2626 !important;
  color: white !important;
}
.success-badge-color {
  background-color: #16a34a !important;
  color: white !important;
}
.warning-badge-color {
  background-color: #f59e42 !important;
  color: white !important;
}

/* 주요 스크롤바 색상 */
.primary-scrollbar-color {
  scrollbar-color: #24316c #f3f4f6 !important;
}
.secondary-scrollbar-color {
  scrollbar-color: #64748b #f3f4f6 !important;
}
.error-scrollbar-color {
  scrollbar-color: #dc2626 #f3f4f6 !important;
}
.success-scrollbar-color {
  scrollbar-color: #16a34a #f3f4f6 !important;
}
.warning-scrollbar-color {
  scrollbar-color: #f59e42 #f3f4f6 !important;
}

/* 주요 링크 호버 색상 */
.primary-link-hover-color {
  color: #1a2659 !important;
}
.secondary-link-hover-color {
  color: #475569 !important;
}
.error-link-hover-color {
  color: #b91c1c !important;
}
.success-link-hover-color {
  color: #15803d !important;
}
.warning-link-hover-color {
  color: #d97706 !important;
}

/* 주요 버튼 호버 색상 */
.primary-button-hover-color {
  background-color: #1a2659 !important;
}
.secondary-button-hover-color {
  background-color: #475569 !important;
}
.error-button-hover-color {
  background-color: #b91c1c !important;
}
.success-button-hover-color {
  background-color: #15803d !important;
}
.warning-button-hover-color {
  background-color: #d97706 !important;
}

/* 주요 폼 요소 호버 색상 */
.primary-input-hover-color {
  background-color: #1a2659 !important;
  color: white !important;
}
.secondary-input-hover-color {
  background-color: #475569 !important;
  color: white !important;
}
.error-input-hover-color {
  background-color: #b91c1c !important;
  color: white !important;
}
.success-input-hover-color {
  background-color: #15803d !important;
  color: white !important;
}
.warning-input-hover-color {
  background-color: #d97706 !important;
  color: white !important;
}

/* 주요 테이블 호버 색상 */
.primary-table-hover-color {
  background-color: #1a2659 !important;
  color: white !important;
}
.secondary-table-hover-color {
  background-color: #475569 !important;
  color: white !important;
}
.error-table-hover-color {
  background-color: #b91c1c !important;
  color: white !important;
}
.success-table-hover-color {
  background-color: #15803d !important;
  color: white !important;
}
.warning-table-hover-color {
  background-color: #d97706 !important;
  color: white !important;
}

/* 주요 카드 호버 색상 */
.primary-card-hover-color {
  background-color: #1a2659 !important;
  color: white !important;
}
.secondary-card-hover-color {
  background-color: #475569 !important;
  color: white !important;
}
.error-card-hover-color {
  background-color: #b91c1c !important;
  color: white !important;
}
.success-card-hover-color {
  background-color: #15803d !important;
  color: white !important;
}
.warning-card-hover-color {
  background-color: #d97706 !important;
  color: white !important;
}

/* 주요 모달 호버 색상 */
.primary-modal-hover-color {
  background-color: #1a2659 !important;
  color: white !important;
}
.secondary-modal-hover-color {
  background-color: #475569 !important;
  color: white !important;
}
.error-modal-hover-color {
  background-color: #b91c1c !important;
  color: white !important;
}
.success-modal-hover-color {
  background-color: #15803d !important;
  color: white !important;
}
.warning-modal-hover-color {
  background-color: #d97706 !important;
  color: white !important;
}

/* 주요 툴팁 호버 색상 */
.primary-tooltip-hover-color {
  background-color: #1a2659 !important;
  color: white !important;
}
.secondary-tooltip-hover-color {
  background-color: #475569 !important;
  color: white !important;
}

/* === 상태별(투명도, active, focus, disabled 등) 컬러 확장 === */

/* 투명도(Opacity) */
.primary-bg-opacity-80 {
  background-color: rgba(37, 99, 235, 0.8) !important;
}
.secondary-bg-opacity-80 {
  background-color: rgba(100, 116, 139, 0.8) !important;
}
.error-bg-opacity-80 {
  background-color: rgba(220, 38, 38, 0.8) !important;
}
.success-bg-opacity-80 {
  background-color: rgba(22, 163, 74, 0.8) !important;
}
.warning-bg-opacity-80 {
  background-color: rgba(245, 158, 66, 0.8) !important;
}

.primary-bg-opacity-50 {
  background-color: rgba(37, 99, 235, 0.5) !important;
}
.secondary-bg-opacity-50 {
  background-color: rgba(100, 116, 139, 0.5) !important;
}
.error-bg-opacity-50 {
  background-color: rgba(220, 38, 38, 0.5) !important;
}
.success-bg-opacity-50 {
  background-color: rgba(22, 163, 74, 0.5) !important;
}
.warning-bg-opacity-50 {
  background-color: rgba(245, 158, 66, 0.5) !important;
}

/* Active 상태 */
.primary-active-bg {
  background-color: #1e40af !important;
}
.secondary-active-bg {
  background-color: #334155 !important;
}
.error-active-bg {
  background-color: #991b1b !important;
}
.success-active-bg {
  background-color: #166534 !important;
}
.warning-active-bg {
  background-color: #b45309 !important;
}

.primary-active-color {
  color: #1e40af !important;
}
.secondary-active-color {
  color: #334155 !important;
}
.error-active-color {
  color: #991b1b !important;
}
.success-active-color {
  color: #166534 !important;
}
.warning-active-color {
  color: #b45309 !important;
}

/* Focus 상태 */
.primary-focus-bg {
  background-color: #3b82f6 !important;
}
.secondary-focus-bg {
  background-color: #94a3b8 !important;
}
.error-focus-bg {
  background-color: #f87171 !important;
}
.success-focus-bg {
  background-color: #4ade80 !important;
}
.warning-focus-bg {
  background-color: #fde68a !important;
}

.primary-focus-color {
  color: #3b82f6 !important;
}
.secondary-focus-color {
  color: #94a3b8 !important;
}
.error-focus-color {
  color: #f87171 !important;
}
.success-focus-color {
  color: #4ade80 !important;
}
.warning-focus-color {
  color: #fde68a !important;
}

/* Disabled 상태 */
.primary-disabled-bg {
  background-color: #93c5fd !important;
}
.secondary-disabled-bg {
  background-color: #cbd5e1 !important;
}
.error-disabled-bg {
  background-color: #fecaca !important;
}
.success-disabled-bg {
  background-color: #bbf7d0 !important;
}
.warning-disabled-bg {
  background-color: #fef08a !important;
}

.primary-disabled-color {
  color: #93c5fd !important;
}
.secondary-disabled-color {
  color: #cbd5e1 !important;
}
.error-disabled-color {
  color: #fecaca !important;
}
.success-disabled-color {
  color: #bbf7d0 !important;
}
.warning-disabled-color {
  color: #fef08a !important;
}

.primary-disabled-border {
  border-color: #93c5fd !important;
}
.secondary-disabled-border {
  border-color: #cbd5e1 !important;
}
.error-disabled-border {
  border-color: #fecaca !important;
}
.success-disabled-border {
  border-color: #bbf7d0 !important;
}
.warning-disabled-border {
  border-color: #fef08a !important;
}

/* 상태별 버튼 예시 */
.primary-button-active {
  background-color: #1e40af !important;
  color: white !important;
}
.primary-button-focus {
  background-color: #3b82f6 !important;
  color: white !important;
}
.primary-button-disabled {
  background-color: #93c5fd !important;
  color: #e5e7eb !important;
  cursor: not-allowed !important;
}

.secondary-button-active {
  background-color: #334155 !important;
  color: white !important;
}
.secondary-button-focus {
  background-color: #94a3b8 !important;
  color: white !important;
}
.secondary-button-disabled {
  background-color: #cbd5e1 !important;
  color: #e5e7eb !important;
  cursor: not-allowed !important;
}