/* ── InfraMate tokens.css — 색상/타이포/테마 변수 전용 ─────────────────
   요소·컴포넌트 규칙 금지. 변수 추가/변경만 허용. */

/* ── 동봉 폰트 (IM-FE-035) ────────────────────────────────
   Pretendard v1.3.9 / D2Coding v1.3.2 — 둘 다 SIL Open Font License 1.1.
   에셋: frontend/src/resource/fonts/ (신규 라이브러리 추가가 아닌 파일 동봉) */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('../fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'D2Coding';
  src: url('../fonts/D2Coding.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: 'Pretendard Variable', Pretendard, 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  background: #07101b;
  color: #ecf4ff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ── 타이포 스택 ── */
  --font-mono: 'Cascadia Mono', 'D2Coding', 'Cascadia Code', Consolas, monospace;

  --bg: #07101b;
  --bg-elevated: #101d2b;
  --bg-panel: #0d1825;
  --bg-panel-soft: #132233;
  --bg-hover: #16283c;
  --sidebar-bg: linear-gradient(180deg, #0d1825 0%, #07101b 100%);
  --topbar-bg: rgba(13, 24, 37, 0.84);
  --page-bg: linear-gradient(180deg, #050b13 0%, var(--bg) 100%);
  --card-bg: linear-gradient(180deg, #101d2b 0%, #0d1825 100%);
  --card-subtle-bg: #0d1825;
  --hero-bg: linear-gradient(90deg, #0d1825 0%, #132233 100%);
  --menu-color: #bfd0e5;
  --menu-hover-bg: rgba(19, 34, 51, 0.9);
  --menu-hover-border: rgba(46, 65, 89, 0.9);
  --menu-active-bg: linear-gradient(180deg, rgba(33, 201, 121, 0.18) 0%, rgba(33, 201, 121, 0.08) 100%);
  --menu-active-color: #ffffff;
  --border: #223247;
  --border-strong: #2e4159;
  --text: #ecf4ff;
  --text-muted: #8ea1b8;
  --text-soft: #63758a;
  /* 보조색(파랑) — 체크박스·라디오 accent, 페이지탭 active. 2026-08-02 사용자 확정 */
  --primary: #3b82f6;
  --primary-soft: rgba(59, 130, 246, 0.16);
  --success: #22C55E;
  --success-soft: rgba(34, 197, 94, 0.18);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.18);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.18);
  --console-bg: #050b13;
  --table-head-bg: rgba(23, 33, 47, 0.9);
  --table-row-hover: rgba(23, 33, 47, 0.48);
  --table-row-selected: rgba(37, 99, 235, 0.14);
  --pill-bg: rgba(23, 33, 47, 0.55);
  --inline-block-bg: rgba(23, 33, 47, 0.42);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.22);

  /* ── 미정의 변수 해소 — 기존 var() fallback 값과 동일하게 정의 ── */
  --text-secondary: #8b9ab0;
  --text-primary: #e2e8f0;
  --surface-hover: rgba(255, 255, 255, 0.06);
  --bg-code: rgba(255, 255, 255, 0.06);
  --bg-input: rgba(255, 255, 255, 0.04);

  /* ── 이하 fallback 불일치 항목 — 현재 계산 스타일 최대 보존 기준 ── */
  /* --surface: fallback 없음, 현재 transparent 유지 */
  --surface: transparent;
  /* --primary-ghost: fallback 0.08/0.10/0.12 혼재 + topbar no-fallback → 중간값으로 통일 */
  --primary-ghost: rgba(96, 165, 250, 0.1);
  /* --bg-soft: fallback 0.03(1곳) vs 0.02(2곳) → 다수값 채택 */
  --bg-soft: rgba(255, 255, 255, 0.02);
}

:root[data-theme='light'] {
  color-scheme: light;
  background: #eef3f7;
  color: #102031;

  --bg: #eef3f7;
  --bg-elevated: #f8fafc;
  --bg-panel: #ffffff;
  --bg-panel-soft: #edf3f7;
  --bg-hover: #e7edf3;
  --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #eef3f7 100%);
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --page-bg: linear-gradient(180deg, #e7edf3 0%, var(--bg) 100%);
  --card-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --card-subtle-bg: #f8fafc;
  --hero-bg: linear-gradient(90deg, #ffffff 0%, #edf3f7 100%);
  --menu-color: #33475d;
  --menu-hover-bg: rgba(237, 243, 247, 0.92);
  --menu-hover-border: rgba(195, 207, 218, 0.96);
  --menu-active-bg: linear-gradient(180deg, rgba(0, 122, 69, 0.13) 0%, rgba(0, 122, 69, 0.06) 100%);
  --menu-active-color: #101a28;
  --border: #d5dee7;
  --border-strong: #c3cfda;
  --text: #102031;
  --text-muted: #596b7e;
  --text-soft: #8795a4;
  --primary-soft: rgba(59, 130, 246, 0.1);
  --success-soft: rgba(34, 197, 94, 0.12);
  --warning-soft: rgba(245, 158, 11, 0.12);
  --danger-soft: rgba(239, 68, 68, 0.1);
  --console-bg: #e7edf3;
  --table-head-bg: rgba(228, 235, 243, 0.96);
  --table-row-hover: rgba(215, 225, 236, 0.62);
  --table-row-selected: rgba(148, 163, 184, 0.18);
  --pill-bg: rgba(231, 237, 244, 0.95);
  --inline-block-bg: rgba(231, 237, 244, 0.88);
  --shadow: 0 10px 26px rgba(22, 42, 62, 0.07);
}


/* ── 브랜드 컬러 / 상태 색상 분리 (5단계) ──────────────────────────────
   InfraMate 브랜드 녹색과 성공 상태 녹색은 별도 토큰으로 관리한다.
   값이 현재 동일하더라도 참조 토큰을 구분해 사용할 것. */
:root {
  /* 브랜드 (로고·포인트·active 강조) */
  --brand: #21c979;
  --brand-strong: #007a45;
  --brand-soft: rgba(33, 201, 121, 0.12);
  --brand-border: rgba(33, 201, 121, 0.35);
  /* 텍스트 전용 — H·L 고정, S +17.2%p (71.8% → 88.9%). day/dark 단일 값 (IM-FE-035-R1) */
  --brand-text: #0DDD7A;

  /* 상태 색상 (알람 레퍼런스 공식 팔레트) */
  --status-success: #22C55E;
  --status-info: #3B82F6;
  --status-warning: #F59E0B;
  --status-danger: #EF4444;
  --status-neutral: #9CA3AF;
  /* 텍스트 전용 — H·L 고정, S +17.2%p (70.6% → 87.9%). 그린 계열만 상향 여지 있음 (IM-FE-035-R1) */
  --status-success-text: #0ED959;
  --status-success-soft: rgba(34, 197, 94, 0.14);
  --status-info-soft: rgba(59, 130, 246, 0.14);
  --status-warning-soft: rgba(245, 158, 11, 0.14);
  --status-danger-soft: rgba(239, 68, 68, 0.14);
  --status-neutral-soft: rgba(156, 163, 175, 0.16);
  /* 상태색 border — badge·notice 공용 (IM-PM-039 하드코딩 토큰화, 정본 α 0.3) */
  --status-success-border: rgba(34, 197, 94, 0.3);
  --status-info-border: rgba(59, 130, 246, 0.3);
  --status-warning-border: rgba(245, 158, 11, 0.3);
  --status-danger-border: rgba(239, 68, 68, 0.3);
  --status-neutral-border: rgba(156, 163, 175, 0.3);
}

:root[data-theme='light'] {
  --brand-soft: rgba(0, 122, 69, 0.09);
  --brand-border: rgba(0, 122, 69, 0.35);
  /* 텍스트 그린 Light 오버라이드 (IM-FE-035-R2) — Dark 값은 휘도가 높아 흰 배경에서 대비 1.8:1 이다.
     brand: 템플릿 green-strong. success: H 142 고정, L 45.3% → 26.1% 로 낮춰 AA(4.5:1) 확보. */
  --brand-text: #007A45;
  --status-success-text: #087D33;
  --status-success-soft: rgba(34, 197, 94, 0.1);
  --status-info-soft: rgba(59, 130, 246, 0.1);
  --status-warning-soft: rgba(245, 158, 11, 0.12);
  --status-danger-soft: rgba(239, 68, 68, 0.1);
  --status-neutral-soft: rgba(156, 163, 175, 0.14);
}

/* ── LAYOUT — 페이지 여백 기준 (IM-FE-037) ──────────────────────────────
   테마와 무관한 값이다. Light 오버라이드에 넣지 않는다.
   근거: 자원 현황 실측 — main .content 28px + .page-stack gap 22px.
   이 3개 외의 spacing 변수를 늘리지 않는다 (카드 내부 padding·화면 전용 grid gap 은 범위 밖). */
:root {
  --page-pad-x: 28px;   /* 메인 컨텐츠 좌우 여백 */
  --page-pad-y: 28px;   /* 메인 컨텐츠 상하 여백 */
  --page-gap: 22px;     /* 페이지 최상위 섹션 간 간격 */
}

/* ── Z-INDEX 계층 (IM-PM-044) ───────────────────────────────────────────
   테마와 무관한 값이다. Light 오버라이드에 넣지 않는다.
   값은 2026-08-03 실측 하드코딩과 **동일하다.** 토큰화가 레이어를 바꾸면 그 자체가 회귀다.
   기존 하드코딩(사이드바 50 · topbar 45 · 접기버튼 40 · 툴팁 300 · 모달 300 · 토스트 400 ·
   SettingsModal 1000 · login 100)의 치환은 **이번 범위가 아니다.** 정의만 두고 사용처 교체는
   IM-FE-048 이후 별건이다 — 다음 세션이 "치환 누락"으로 오판하지 않도록 여기 남긴다.
   신규 층은 --z-popover 하나뿐이며 표준은 SCREEN_REGISTRY.md §0.4 다. */
:root {
  --z-base: 0;
  --z-sticky-th: 1;      /* 표 헤더 sticky (.apv-table th · .acc-table th) */
  --z-collapse-btn: 40;  /* 사이드바 접기 버튼 */
  --z-popover: 44;       /* 인라인 팝오버 — topbar(45) 아래, 접기 버튼 위 */
  --z-topbar: 45;
  --z-sidebar: 50;
  --z-tooltip: 300;      /* 공용 Tooltip (IM-PM-050, §0.6) · 사이드바 접힘 툴팁(IM-PM-051 치환 완료) */
  --z-modal: 300;        /* 모달 오버레이 (components.css) */
  --z-toast: 400;
}

/* ── AI 기능 강조 (2026-08-04 사용자 지시 — IM-FE-055 후속) ─────────────────
   AI 가 개입하는 액션(생성·분석 등)의 전용 보라 계열이다. 값은 작업 작성 레퍼런스의
   --violet/--violet2 를 승계했다. 현재 사용처는 작업 작성 「AI 생성」 버튼 하나이며,
   향후 AI 액션(편집기 AI 기능 · LLM 분석 등)은 화면 전용 보라를 만들지 말고 이 토큰을 쓴다. */
:root {
  --ai: #a179ff;
  --ai-2: #925fe0;
}
:root[data-theme='light'] {
  --ai: #6e5ee8;
  --ai-2: #9359dc;
}