/* ==========================================================================
   theme.css
   - legacy(style.css)의 토큰을 우선 채택
   - html[data-theme="light|dark"]로 테마 선택
   - site.css의 rgba 하드코딩 요소를 토큰 기반으로 오버라이드
   ========================================================================== */

/* 1) Legacy 원본 토큰(우선권) */
:root{
  --primary-color:#72c393;
  --dark-accent-color:#2e7d62;
  --light-bg-color:#f6fffa;
  --neutral-text-color:#333;
  --soft-gray-color:#e9ecef;
  --point-button-color:#fcbf49;
  --point-hover-color:#5fb48a;
  --card-background-color:#fff;
  --card-box-shadow:rgba(0,0,0,.05);

  /* 공통 radius는 site.css 것을 그대로 활용해도 됨 */
}

/* 2) Light theme (legacy를 “기준”으로) */
html[data-theme="light"]{
  /* site.css가 쓰는 핵심 토큰으로 매핑 */
  --bg: var(--light-bg-color);
  --card: var(--card-background-color);
  --text: var(--neutral-text-color);
  --muted: #667085;
  --line: var(--soft-gray-color);

  --brand: var(--primary-color);
  --brand2: var(--dark-accent-color);

  --ok: var(--primary-color);
  --warn: var(--point-button-color);
  --danger: #e55353;

  /* Light에서 필요한 “표면/보더/인풋” 톤 */
  --surface: rgba(255,255,255,.92);
  --surface-2: rgba(255,255,255,.75);
  --border: rgba(233,236,239,.95);
  --shadow: 0 10px 28px var(--card-box-shadow);

  --nav-bg: rgba(246,255,250,.82);
  --nav-border: rgba(233,236,239,.95);

  --input-bg: rgba(255,255,255,.9);
  --input-border: rgba(210,216,223,.95);

  --table-bg: rgba(255,255,255,.92);
  --row-hover: rgba(114,195,147,.10);

  --btn-text: #0b1a12;        /* 브랜드 그라데이션 위 텍스트 */
  --ghost-bg: rgba(255,255,255,.65);
  --ghost-border: rgba(210,216,223,.95);

  --footer-bg: #eef7f2;          /* bg보다 살짝 진한 라이트 */
  --footer-text: #344054;        /* 본문보다 진한 텍스트 */
  --footer-muted: #667085;
  --footer-border: rgba(210,216,223,.95);
}

/* 3) Dark theme (legacy 브랜드 컬러 유지 + 다크 팔레트 구성) */
html[data-theme="dark"]{
  --bg: #0b1220;
  --card: #0f1b31;
  --text: #e7eefc;
  --muted: #9fb0d0;
  --line: #213255;

  --brand: var(--primary-color);
  --brand2: var(--dark-accent-color);

  --ok: #3ddc97;
  --warn: #ffcc66;
  --danger: #ff5a6a;

  --surface: rgba(15,27,49,.85);
  --surface-2: rgba(15,27,49,.70);
  --border: rgba(33,50,85,.90);
  --shadow: 0 8px 24px rgba(0,0,0,.25);

  --nav-bg: rgba(11,18,32,.55);
  --nav-border: rgba(33,50,85,.55);

  --input-bg: rgba(11,18,32,.55);
  --input-border: rgba(33,50,85,.90);

  --table-bg: rgba(15,27,49,.65);
  --row-hover: rgba(114,195,147,.10);

  --btn-text: #081022;
  --ghost-bg: rgba(15,27,49,.75);
  --ghost-border: rgba(33,50,85,.90);

  --footer-bg: #0a1426;          /* bg보다 살짝 더 어두움 */
  --footer-text: #d6e1ff;
  --footer-muted: #9fb0d0;
  --footer-border: rgba(33,50,85,.9);
}

/* ==========================================================================
   4) site.css 스타일 오버라이드 (테마 토큰 반영)
   - site.css가 rgba로 박아둔 부분을 토큰 기반으로 치환
   ========================================================================== */

body{
  /* site.css의 다크 radial 배경을 테마별로 통제 */
  background: var(--bg);
  color: var(--text);
}

/* dark에서만 radial 유지하고 싶다면 */
html[data-theme="dark"] body{
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(114,195,147,.18), transparent 60%),
    radial-gradient(900px 600px at 90% 0%, rgba(46,125,98,.14), transparent 55%),
    var(--bg);
}

/* card */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* nav */
.nav{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
}
.nav__pill{
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.nav__dropdown_btn{
  border: 1px solid var(--border);
}
.nav__dropdown_menu{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.nav__dropdown_menu a:hover{
  /* 브랜드 틴트로 hover 통일 */
  background: rgba(114,195,147,.14);
}

/* buttons */
.btn{
  border: 1px solid rgba(114,195,147,.70);
  background: linear-gradient(135deg, rgba(114,195,147,.92), rgba(46,125,98,.86));
  color: var(--btn-text);
}
.btn--ghost{
  background: var(--ghost-bg);
  border: 1px solid var(--ghost-border);
  color: var(--text);
}

/* form fields */
.field input, .field select, .field textarea{
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
}
.field label{ color: var(--muted); }

/* alerts: 기존 구조 유지하면서 border만 토큰 계열로 자연스럽게 */
.alert{
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* table */
.table-wrap{
  border: 1px solid var(--border);
}
table{
  background: var(--table-bg);
}
th, td{
  border-bottom: 1px solid var(--border);
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 35%);
}
tr:hover td{
  background: var(--row-hover);
}

/* badges, pagination */
.badge{
  background: var(--input-bg);
  border: 1px solid var(--border);
}
.page-link{
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.page-link[aria-current="page"]{
  border-color: rgba(114,195,147,.70);
  background: rgba(114,195,147,.14);
}

/* footer */
.footer{
  border-top: 1px solid var(--nav-border);
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-border);
  padding: 32px 0;
  margin-top: 48px;
}

/* footer 안의 링크 */
.footer a{
  color: var(--footer-text);
  text-decoration: none;
}
.footer a:hover{
  text-decoration: underline;
}

/* 보조 텍스트 */
.footer .p-muted,
.footer small{
  color: var(--footer-muted);
}

summary { cursor: pointer; }