/*
 * TomoCloud 셸 디자인 토큰 (--tc-*). 앱 CSS는 이 이름만 쓰고, Fluent v5 토큰은 셸 CSS에서만 직접 참조한다.
 *
 * - :root — 크기·간격·반경·레이아웃·타입·굵기·자간·모션·배경막·글꼴. spec §4 수치의 리터럴이다
 *   (Fluent 램프는 §4와 다르다 — 예: --fontSizeBase500/--lineHeightBase500 = 20/28, §4 title2 = 20/26).
 * - body — Fluent 토큰 별칭. var()는 선언된 요소에서 풀리는데 Fluent는 테마 토큰을 JS로 문서 수준에 나중에 쓰므로
 *   :root가 아니라 body에 선언한다. 둘째 인자는 Fluent가 테마를 쓰기 전 첫 페인트용 폴백(Fluent web light 값).
 * - html[data-tc-theme="dark"] body — 같은 별칭의 다크 폴백 (data-tc-theme은 theme-boot.js가 첫 페인트 전에 정한다).
 *
 * 강조 토큰의 폴백은 브라우저에서 잰 브랜드 램프 값이다(키 색 #27B7CA로 Fluent가 만든 램프, Task 10 Step 3). 대비(WCAG):
 * - --tc-accent-text(링크·선택 아이콘·체크)는 --tc-bg와 --tc-accent-tint 위에서 4.5:1 이상이어야 해 colorBrandForeground2를 쓴다 —
 *   colorBrandForeground1은 다크 배경 4.38·라이트 틴트 4.04로 모자란다. Foreground2: 라이트 6.55(배경)/4.97(틴트), 다크 5.29/5.68.
 * - 흰 글자를 얹는 --tc-accent(colorBrandBackground)는 라이트 5.55·다크 6.83.
 * - --tc-danger-text(오류 글자 — 시트·카드·Subtle 버튼의 hover·눌림 배경 위)는 다크에서 colorStatusDangerForeground3을 쓴다 —
 *   Foreground1(#dc626d)은 elevated 4.16·hover 3.36으로 모자라고, Foreground3(#eeacb2)는 elevated 7.74·hover 6.24다. 라이트 Foreground1은 6.53/5.39로 넘는다.
 * 키 색 자체는 흰 배경 2.4:1이라 글자·채움 어디에도 쓰지 않는다.
 */

:root {
	/* 글꼴 (웹폰트 로드 없음) */
	--tc-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
	--tc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	/* 타입: 크기 / 줄높이 */
	--tc-fs-caption: 12px;
	--tc-lh-caption: 16px;
	--tc-fs-footnote: 13px;
	--tc-lh-footnote: 18px;
	--tc-fs-body: 14px;
	--tc-lh-body: 20px;
	--tc-fs-headline: 15px;
	--tc-lh-headline: 20px;
	--tc-fs-title3: 17px;
	--tc-lh-title3: 22px;
	--tc-fs-title2: 20px;
	--tc-lh-title2: 26px;
	--tc-fs-title1: 26px;
	--tc-lh-title1: 32px;
	--tc-fs-large: 32px;
	--tc-lh-large: 38px;
	--tc-fs-display: 48px;
	--tc-lh-display: 52px;

	/* 타입: 굵기 / 자간 (17px 이상) */
	--tc-fw-regular: 400;
	--tc-fw-medium: 500;
	--tc-fw-semibold: 600;
	--tc-fw-bold: 700;
	--tc-tracking-tight: -0.01em;

	/* 간격 (4px 격자) */
	--tc-space-1: 4px;
	--tc-space-2: 8px;
	--tc-space-3: 12px;
	--tc-space-4: 16px;
	--tc-space-5: 20px;
	--tc-space-6: 24px;
	--tc-space-7: 32px;
	--tc-space-8: 40px;
	--tc-space-9: 48px;
	--tc-space-10: 64px;

	/* 반경 */
	--tc-radius-sm: 6px;
	--tc-radius-md: 8px;
	--tc-radius-lg: 12px;
	--tc-radius-xl: 16px;
	--tc-radius-pill: 999px;

	/* 레이아웃 */
	--tc-header-h: 52px;
	--tc-sidebar-w: 240px;
	--tc-content: 1120px;
	--tc-content-narrow: 720px;
	--tc-row-sidebar: 32px;
	/* 사이드바 행 사이 간격 — 4px 격자의 유일한 예외(사용자 결정 2026-10-21). 터치 폭(≤768px, 행 44px)에서도 같은 값이다. */
	--tc-row-sidebar-gap: 2px;
	--tc-row-table: 32px;
	--tc-row-list: 40px;
	--tc-row-list-2: 56px;
	--tc-control-h: 32px;

	/* 모션 / 배경막 */
	--tc-duration: 200ms;
	--tc-ease: ease-out;
	--tc-backdrop: rgba(0,0,0,.35);
}

/* 터치 폭: 상호작용 행·컨트롤 44px */
@media (max-width: 768px) {
	:root {
		--tc-row-sidebar: 44px;
		--tc-row-list: 44px;
		--tc-control-h: 44px;
	}
}

body {
	/* Fluent 글꼴 토큰도 셸 글꼴로 — web components는 사용자 정의 속성을 shadow DOM 안으로 상속한다 */
	--fontFamilyBase: var(--tc-font);
	--fontFamilyMonospace: var(--tc-font-mono);
	--fontFamilyNumeric: var(--tc-font);

	/* 글자 */
	--tc-text: var(--colorNeutralForeground1, #242424);
	--tc-text-secondary: var(--colorNeutralForeground3, #616161);
	--tc-text-tertiary: var(--colorNeutralForeground4, #707070);

	/* 표면: 페이지 / 사이드바·그룹 목록·타일 / 카드·팝오버·시트 */
	--tc-bg: var(--colorNeutralBackground2, #fafafa);
	--tc-bg-secondary: var(--colorNeutralBackground3, #f5f5f5);
	--tc-bg-elevated: var(--colorNeutralBackground1, #ffffff);

	/* 선·채움·포커스 */
	--tc-separator: var(--colorNeutralStroke2, #e0e0e0);
	--tc-fill-hover: var(--colorSubtleBackgroundHover, #f5f5f5);
	--tc-fill-pressed: var(--colorSubtleBackgroundPressed, #e0e0e0);
	--tc-focus: var(--colorStrokeFocus2, #000000);

	/* 강조: 흰 글자를 얹는 채움 / 링크·선택 아이콘·체크 / 채움 위 글자 / 선택 행 평소 틴트 */
	--tc-accent: var(--colorBrandBackground, #25727D);
	--tc-accent-text: var(--colorBrandForeground2, #23636C);
	--tc-on-accent: var(--colorNeutralForegroundOnBrand, #ffffff);
	--tc-accent-tint: var(--colorBrandBackground2, #BAE3EA);

	/* 보조 표면(--tc-bg-secondary = colorNeutralBackground3 — 사이드바, 그룹 목록 상자) 위의 hover·눌림 채움과 사이드바 선택 틴트:
	   전역 --tc-fill-hover(colorSubtleBackgroundHover #f5f5f5)는 흰 표면용이라 라이트 보조 표면과 같은 색이고, Fluent 의 Background3 hover(#ebebeb)도 1.09:1 이라
	   hover 는 #e6e6e6(1.15:1), 눌림(사이드바 다중 선택 포함)은 그보다 진한 Background3Pressed(#d6d6d6, 1.33:1), 선택은 옅은 브랜드 틴트(1.26:1).
	   쓰는 곳: 사이드바 행·트리 행·사이드바 진행률, 사이드바 안 Fluent Subtle 버튼(base.css .tc-sidebar), 그룹 목록 행(ListRow).
	   값은 키 색 #27B7CA 로 Fluent 5.0.1 이 만든 테마에서 잰 값이다(Fluent 변수 이름과 대비는 ShellCssContractTests 가 고정). */
	--tc-fill-hover-on-secondary: var(--colorNeutralBackground6, #e6e6e6);
	--tc-fill-pressed-on-secondary: var(--colorNeutralBackground3Pressed, #d6d6d6);
	--tc-sidebar-selected: var(--colorBrandBackground2, #BAE3EA);

	/* 상태: 아이콘·상태 점 / 오류 글자 / 흰 글자를 얹는 채움 */
	--tc-danger: var(--colorStatusDangerForeground3, #c50f1f);
	--tc-success: var(--colorStatusSuccessForeground3, #107c10);
	--tc-warning: var(--colorStatusWarningForeground3, #bc4b09);
	--tc-danger-text: var(--colorStatusDangerForeground1, #b10e1c);
	--tc-danger-fill: var(--colorStatusDangerBackground3, #c50f1f);
	--tc-success-fill: var(--colorStatusSuccessBackground3, #107c10);
	--tc-warning-fill: var(--colorStatusWarningBackground3, #f7630c);
	--tc-info: var(--colorNeutralForeground3, #616161);

	/* 그림자 */
	--tc-shadow-card-hover: var(--shadow8, 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14));
	--tc-shadow-popover: var(--shadow16, 0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14));
	--tc-shadow-sheet: var(--shadow64, 0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14));
}

/* 다크 폴백 (채움 3종과 그림자는 라이트와 같은 값이라 다시 선언하지 않는다) */
html[data-tc-theme="dark"] body {
	--tc-text: var(--colorNeutralForeground1, #ffffff);
	--tc-text-secondary: var(--colorNeutralForeground3, #adadad);
	--tc-text-tertiary: var(--colorNeutralForeground4, #999999);

	--tc-bg: var(--colorNeutralBackground2, #1f1f1f);
	--tc-bg-secondary: var(--colorNeutralBackground3, #141414);
	--tc-bg-elevated: var(--colorNeutralBackground1, #292929);

	--tc-separator: var(--colorNeutralStroke2, #525252);
	--tc-fill-hover: var(--colorSubtleBackgroundHover, #383838);
	--tc-fill-pressed: var(--colorSubtleBackgroundPressed, #2e2e2e);
	--tc-focus: var(--colorStrokeFocus2, #ffffff);

	--tc-accent: var(--colorBrandBackground, #23636C);
	--tc-accent-text: var(--colorBrandForeground2, #28A0B0);
	--tc-on-accent: var(--colorNeutralForegroundOnBrand, #ffffff);
	--tc-accent-tint: var(--colorBrandBackground2, #101A1C);

	/* 보조 표면 채움·사이드바 선택 (다크): 다크의 Fluent 눌림은 배경보다 어두워(Background3Pressed #0a0a0a) 눌림·다중 선택이 hover 보다 약해지므로
	   hover 는 Background3Hover(#292929, 1.27:1), 눌림·다중 선택은 더 밝은 #383838(1.57:1)이다. 선택 틴트 colorBrandBackground2(#101A1C)는
	   배경 #141414 와 1.04:1 이라 거의 보이지 않아 한 계단 진한 Background2Hover(#1B393E, 1.49:1 — 아이콘 3.97:1, 글자 12.3:1)를 쓴다. */
	--tc-fill-hover-on-secondary: var(--colorNeutralBackground3Hover, #292929);
	--tc-fill-pressed-on-secondary: var(--colorNeutralBackground1Selected, #383838);
	--tc-sidebar-selected: var(--colorBrandBackground2Hover, #1B393E);

	--tc-danger: var(--colorStatusDangerForeground3, #eeacb2);
	--tc-success: var(--colorStatusSuccessForeground3, #54b054);
	--tc-warning: var(--colorStatusWarningForeground3, #f98845);
	--tc-danger-text: var(--colorStatusDangerForeground3, #eeacb2);
	--tc-info: var(--colorNeutralForeground3, #adadad);
}