/* color.css: 색상 변수 정의 및 전체 요소에 색상 적용 */

/* 기본 테마 (Light Mode) */
:root {
  --info-bg: #ffffff;
  --info-border: #cccccc;
  --info-text-color: #333333;

  --section1-bottom-border: #cccccc;

  --index-label: #8c8c8c;

  --table-bottom-line: 1px solid #E9ECEF;

  --bg-theme-info-container: #e8eaff;

  --bg-tooltip: #F5F6F7;
  --text-tooltip: #333333;
  --tooltip-bottom-border: #cccccc;
  --text-nav: #8c8c8c;
}

/* 다크 모드 예시 (data-theme="dark"로 전환) */
.dark-mode {
  --info-bg: #444444;
  --info-border: #555555;
  --info-text-color: #ffffff;

  --bg-section1-bottom: #1e1e1e;
  --section1-bottom-border: #555555;

  --table-border: #555555;
  --header-bg-color: #444444;

  --index-label: #8c8c8c;

  --table-bottom-line: 1px solid #444;

  --bg-theme-info-container: #cacfff;

  --bg-tooltip: #1a1a1a;
  --text-tooltip: white;
  --tooltip-bottom-border: #555555;
  --text-nav: #555555;
}

/* 전체 요소에 색상 적용 */
body {
  background-color: var(--body-bg, #fafafa);
  color: var(--font-color);
}

header {
  background-color: var(--header-bg, #007bff);
  color: var(--header-text-color, #ffffff);
}

footer {
  background-color: var(--footer-bg, #007bff);
  color: var(--footer-text-color, #ffffff);
}

/* 섹션1 Top */
.section1-top {
  color: var(--info-text-color, #333333);
}
.section1-top .info-item {
  border: 1px solid var(--info-border, #cccccc);
}

/* 상승은 초록, 하락은 빨강 (원하면 color.css 변수로 변경) */
.section1-top .stock-item .change.up {
  color: #E5456C;
}
.section1-top .stock-item .change.down {
  color: #4079BF;
}

.section1-top .stock-item .label {
  color: var(--index-label);
}

#theme-stocks-table tbody td {
  border-bottom: var(--table-bottom-line);
}

.theme-info-container {
  border: 1px solid black;
}

#top3-theme-table .table-top-border {
  border-top: 5px solid var(--bg-section);
}

#tooltip-table {
    background-color: var(--bg-tooltip);
  color: var(--text-tooltip);
}

#tooltip-table td {
  border-bottom: 1px solid var(--tooltip-bottom-border);
}

.nav__link {
  color: var(--text-nav);
}

.nav__link.active {
  color: var(--text-color);
}

.login-btn,
.signup-btn {
  color: var(--text-color);
}

.theme-stock.up {
  color: #E5456C;
}
.theme-stock.down {
  color: #4079BF;
}

.theme-change.up {
  color: #E5456C;
}

.theme-change.down {
  color: #4079BF;
}

#theme-table tbody td {
  border-bottom: var(--table-bottom-line);
}

#tooltip-table {
  background-color: var(--bg-tooltip);
}