ANTOOZA-FRONTEND/app/styles/tokens/_layout.scss

// ─────────────────────────────────────────────────────────────
// D6 디자인 토큰 — 레이아웃 / 타이포 / 간격 (d6-design-system.md §3.3, §4)
// WIDE fluid 원칙: max-width 없음, 브레이크포인트 4단
//  mobile <768 / tablet 768~1123.98 / desktop 1124~1535.98 / wide ≥1536
// ─────────────────────────────────────────────────────────────

:root {
	// 그리드 셸
	--header-h: 56px;
	--ticker-h: 32px;
	--az-sidebar-w: 220px; // 좌 사이드바 기본 폭 — 런타임 토글(--antooza-sidebar-width)이 우선
	--az-utility-w: 280px; // 우 유틸 슬롯 폭
	--az-chat-w: 340px; // 우 고정 채팅 도크 폭 — 런타임 토글(--antooza-chat-width)이 우선(펼침 340 / 접힘 레일 52)

	// 간격 스케일 (2/4/8/12/16/24/32)
	--sp-1: 2px;
	--sp-2: 4px;
	--sp-3: 8px;
	--sp-4: 12px;
	--sp-5: 16px;
	--sp-6: 24px;
	--sp-7: 32px;

	// 타이포 스케일 (base 14px — tailwind fontSize.base 와 동일)
	--fs-2xs: 11px;
	--fs-xs: 12px;
	--fs-sm: 13px;
	--fs-base: 14px;
	--fs-lg: 16px;
	--fs-xl: 18px;
	--fs-2xl: 22px;

	// 포커스 링 (접근성 — :focus-visible 전역 적용은 globals.scss)
	--focus-ring-width: 2px;
	--focus-ring-color: var(--az-accent);

	// shadcn radius (테마 무관 — 기존 값 승계)
	--radius: 0.5rem;
}

// desktop(1124~1535.98px): 좌 사이드바 아이콘 모드(64px)가 기본
@media (min-width: 1124px) and (max-width: 1535.98px) {
	:root {
		--az-sidebar-w: 64px;
	}
}

// wide(≥1536px): 우 유틸 확장
@media (min-width: 1536px) {
	:root {
		--az-utility-w: 320px;
	}
}