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

:root {

  /* COLOR  */
  --primary-color: #FF8000;
  --secondary-color: #003A6C ;
  --tertiary-color: #F2F8FE;
  --background-color: #FFFFFF;

  /* TEXT */
  --primary-text-color: #1D1D1D;
  --secondary-text-color: #7A7A7A;
  /* --tertiary-text-color: ; */

}

@media (prefers-color-scheme: dark) {
  :root {
    /* COLOR  */
    --primary-color: #FF8000;
    --secondary-color: #003A6C;
    --tertiary-color: #F2F8FE;
    --background-color: #FFFFFF;

    /* TEXT */
    --primary-text-color: #1D1D1D;
    --secondary-text-color: #7A7A7A;
    /* --tertiary-text-color: ; */
  }
}
.primary-color{
  color: var(--primary-color);
}
.secondary-color{
  color: var(--secondary-color);
}

.primary-text-color {
  color: var(--primary-text-color) !important;
}

.secondary-text-color {
  color: var(--secondary-text-color) !important;
}

.error-text-color {
  color: #dc2626 !important;
}

.success-text-color {
  color: #16a34a !important;
}

.warning-text-color {
  color: #f59e42 !important;
}

/* 주요 배경색 */
.background-color{
  background-color: var(--background-color);
}

.white-color{
  color: var(--background-color);
}

.primary-bg-color {
  background-color: var(--primary-color) !important;
}

.secondary-bg-color {
  background-color: var(--secondary-color) !important;
}

.error-bg-color {
  background-color: #fee2e2 !important;
}

.success-bg-color {
  background-color: #ddd !important;
}

.warning-bg-color {
  background-color: #fef9c3 !important;
}

.white-bg-color {
  background-color: #fff !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(--primary-color) !important;
  color: var(--background-color) !important;
}

.secondary-button-color {
  border-radius: 12px !important;
  padding: 13px 27px !important;
  background-color: #1D1D1D !important;
  color: white !important;
}
.back-button-color {
    border-radius: 12px !important;
    padding: 13px 27px !important;
    background-color: #1D1D1D !important;
    color: white !important;
}

.write-button-color {

    border-radius: 12px !important;
    border:1px solid #1D1D1D !important;
    padding: 13px 27px !important;
    color: #1D1D1D !important;
    background-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: rgb(155, 78, 1) !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;
}