/*
 * 디자인 토큰 — UDI Web Monitoring
 *
 * 색·타이포·간격·둥글기·그림자·모션·브레이크포인트 등 모든 시각 결정의 단일 원천이다.
 * 페이지 CSS 가 토큰 외 임의값을 박으면 안 되고, 새 토큰이 필요하면 디자인 토의로 가져온다.
 *
 * 자세한 사유와 사용처는 design/architect/ux-principles.md 참조.
 */

:root {
	/* ---------- 폰트 ---------- */
	--font-family-base: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	/* weight 4단계만 사용. Thin/Light/ExtraBold/Black 사용 금지 */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* 크기 스케일 — 임의값 박지 않고 이 단계 안에서 선택 */
	--font-size-xs: 12px;
	--font-size-sm: 13px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 20px;
	--font-size-2xl: 24px;
	--font-size-3xl: 32px;
	--font-size-4xl: 48px;
	--font-size-5xl: 64px;

	/* TV Display 전용 — 멀리서 읽을 수 있도록 큰 폭을 잡되, 1366/모바일 진입에서는 줄어들도록 clamp.
	 * 1920 가로 기준 약 10vw(=192px), 모바일 최소 96px, 4K 상한 192px. */
	--font-size-display: clamp(96px, 10vw, 192px);

	/* 줄간격 */
	--line-height-tight: 1.2;
	--line-height-base: 1.5;
	--line-height-relaxed: 1.7;

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

	/* ---------- 둥글기 (원형/캡슐 버튼 금지) ---------- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* ---------- 그림자 (매우 절제, 폴리싱 단계에서 hover/active 용 추가) ---------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.10);
	--shadow-hover: 0 4px 10px rgba(0, 0, 0, 0.08);
	--shadow-focus-ring: 0 0 0 3px var(--color-brand-anchor-focus-ring);

	/* ---------- 모션 (200ms 초과 금지) ---------- */
	--motion-fast: 100ms;
	--motion-base: 150ms;
	--motion-slow: 200ms;
	--motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
	--motion-spring: cubic-bezier(0.32, 0.72, 0.18, 1.0);

	/* ---------- 브레이크포인트 — 참조용 (미디어 쿼리에 직접 박을 때 사용) ---------- */
	--bp-sm: 480px;
	--bp-md: 768px;
	--bp-lg: 1024px;
	--bp-xl: 1440px;
	--bp-2xl: 1920px;

	/* ---------- 상태 색 (양 톤 공통) ----------
	 * RUN/STOP/OFF/FAULT 4가지가 도메인 의미를 표현하는 유일한 색.
	 * 다른 색은 의미를 갖지 않는다. 색만으로 의미 전달 금지 — 텍스트/아이콘 병행.
	 */
	--color-state-run: #2E7D5B;     /* 운영 중 */
	--color-state-stop: #B8741F;    /* 정지 */
	--color-state-off: #6B7280;     /* 통신 끊김 */
	--color-state-fault: #B83C3C;   /* 폴트 */
}

/* ---------- 라이트 톤 — Home/Login/Report/Graph/Admin ---------- */
:root[data-tone="light"] {
	--color-bg-base: #FAFBFC;
	--color-bg-elevated: #FFFFFF;
	--color-bg-elevated-hover: #F7F8FA;
	--color-bg-surface: #F1F3F5;

	--color-fg-strong: #1A1F26;
	--color-fg-default: #3A4250;
	--color-fg-muted: #8B95A1;

	--color-border-default: #DEE2E6;
	--color-border-strong: #B8C0CA;

	/* 브랜드 앵커 — 헤더 라인, 선택 상태, 포커스 링, 차트 보조선만 사용 */
	--color-brand-anchor: #2A3744;
	--color-brand-anchor-hover: #1F2A36;
	--color-brand-anchor-focus-ring: rgba(42, 55, 68, 0.20);

	/* 폴리싱용 강조 — 활성 hover/selected 강조에 잠깐 등장 */
	--color-accent-fg: #2A3744;
	--color-accent-bg: rgba(42, 55, 68, 0.06);
	--color-accent-soft: rgba(42, 55, 68, 0.04);
}

/* ---------- 다크 톤 — Monitoring 그룹 + TV Display ----------
 * 배경 단계는 완전 검정을 피해 살짝 푸른빛이 도는 짙은 회색.
 * 너무 짙으면(#0E1418 류) 장시간 응시 피로 + 상태 색이 튀어 보인다.
 */
:root[data-tone="dark"] {
	--color-bg-base: #111820;
	--color-bg-elevated: #1A232B;
	--color-bg-surface: #232E38;

	--color-fg-strong: #E8ECEF;
	--color-fg-default: #B8C0CA;
	--color-fg-muted: #6E7884;

	--color-border-default: #2A3744;
	--color-border-strong: #3D4A58;

	/* 브랜드 앵커 — 다크 톤에서도 같은 색, 같은 사용처(보더/포커스 링/차트 보조선) */
	--color-brand-anchor: #2A3744;
	--color-brand-anchor-hover: #3D4A58;
	--color-brand-anchor-focus-ring: rgba(184, 192, 202, 0.20);

	/* 폴리싱용 강조 — 다크 톤에서도 같은 위계. 라이트 톤은 앵커색 가산, 다크 톤은 fg 가산. */
	--color-bg-elevated-hover: #1F2932;
	--color-accent-fg: #E8ECEF;
	--color-accent-bg: rgba(184, 192, 202, 0.08);
	--color-accent-soft: rgba(184, 192, 202, 0.04);

	/* nav active 표시용 — 브랜드 앵커가 border-default 와 같은 색이라
	 * 다크 톤에서 active 보더로 쓰면 동화돼 안 보임. 살짝 더 밝은 톤을 따로 둔다. */
	--color-nav-active-border: #5C7488;
}

/* 라이트 톤에서도 nav active 보더 토큰을 함께 정의해 컴포넌트가 한 변수로 동작 */
:root[data-tone="light"] {
	--color-nav-active-border: var(--color-brand-anchor);
}