/* HEPi 디자인 토큰 — mw_soalr_monitoring/static/css/tokens 를 그대로 옮김 (primitives → semantic → mode → components) */

/* ── primitives.css ── */
:root {
	/* gray color */
	--color-gray-0: #ffffff;
	--color-gray-5: #f4f5f6;
	--color-gray-10: #e6e8ea;
	--color-gray-20: #cdd1d5;
	--color-gray-30: #b1b8be;
	--color-gray-40: #8a949e;
	--color-gray-50: #6d7882;
	--color-gray-60: #58616a;
	--color-gray-70: #464c53;
	--color-gray-80: #33363d;
	--color-gray-90: #1e2124;
	--color-gray-95: #131416;
	--color-gray-100: #000000;

	/* blue color */
	--color-blue-5: #f3f6ff;
	--color-blue-10: #e4ebff;
	--color-blue-20: #c8d6ff;
	--color-blue-30: #a7bdff;
	--color-blue-40: #809eff;
	--color-blue-50: #2c5cc5;
	--color-blue-60: #244ca8;
	--color-blue-70: #1b3c88;
	--color-blue-80: #173373;
	--color-blue-90: #0f224f;
	--color-blue-95: #071128;

	/* teal color */
	--color-teal-5: #f2fafa;
	--color-teal-10: #e2f4f4;
	--color-teal-20: #c6e9e9;
	--color-teal-30: #a1dbdb;
	--color-teal-40: #6ac8c8;
	--color-teal-50: #1fa3a3;
	--color-teal-60: #1b8e8e;
	--color-teal-70: #167676;
	--color-teal-80: #115b5b;
	--color-teal-90: #0b3e3e;
	--color-teal-95: #062323;

	/* system green color */
	--color-system-green-5: #f0faf5;
	--color-system-green-10: #dcf3e8;
	--color-system-green-20: #b5e4cd;
	--color-system-green-30: #82cfaa;
	--color-system-green-40: #47b882;
	--color-system-green-50: #189966;
	--color-system-green-60: #148057;
	--color-system-green-70: #116849;
	--color-system-green-80: #0c4d36;
	--color-system-green-90: #083425;
	--color-system-green-95: #041b14;

	/* system red color */
	--color-system-red-5: #fff4f4;
	--color-system-red-10: #ffe5e5;
	--color-system-red-20: #ffc9c9;
	--color-system-red-30: #fca5a5;
	--color-system-red-40: #f07171;
	--color-system-red-50: #dc3d3d;
	--color-system-red-60: #c23030;
	--color-system-red-70: #a02828;
	--color-system-red-80: #762020;
	--color-system-red-90: #4c1515;
	--color-system-red-95: #280b0b;

	/* system yellow color */
	--color-system-yellow-5: #fffaf0;
	--color-system-yellow-10: #fff3db;
	--color-system-yellow-20: #ffe2a8;
	--color-system-yellow-30: #ffcd6b;
	--color-system-yellow-40: #f5b83d;
	--color-system-yellow-50: #e09a12;
	--color-system-yellow-60: #b87a0d;
	--color-system-yellow-70: #91620f;
	--color-system-yellow-80: #6a480f;
	--color-system-yellow-90: #46300c;
	--color-system-yellow-95: #241806;

	/* alpha color */
	--color-alpha-black0: rgba(0, 0, 0, 0);
	--color-alpha-black10: rgba(0, 0, 0, 0.1);
	--color-alpha-black25: rgba(0, 0, 0, 0.25);
	--color-alpha-black50: rgba(0, 0, 0, 0.5);
	--color-alpha-black75: rgba(0, 0, 0, 0.75);
	--color-alpha-black100: rgba(0, 0, 0, 1);
	--color-alpha-white0: rgba(255, 255, 255, 0);
	--color-alpha-white10: rgba(255, 255, 255, 0.1);
	--color-alpha-white25: rgba(255, 255, 255, 0.25);
	--color-alpha-white50: rgba(255, 255, 255, 0.5);
	--color-alpha-white75: rgba(255, 255, 255, 0.75);
	--color-alpha-white100: rgba(255, 255, 255, 1);

	/* primitive: typography */
	--typo-letter-spacing-0: 0rem;
	--typo-letter-spacing-1: 0.0625rem;

	--typo-font-type: Pretendard;
	--typo-font-weight-bold: 700;
	--typo-font-weight-semibold: 600;
	--typo-font-weight-medium: 500;
	--typo-font-weight-regular: 400;
}

/* ── semantic.css ── */
:root {
	--font-size-display-lg: 3.75rem;
	--font-size-display-md: 2.75rem;
	--font-size-display-sm: 2.25rem;

	--font-size-heading-xl: 2.5rem;
	--font-size-heading-lg: 2rem;
	--font-size-heading-md: 1.5rem;
	--font-size-heading-sm: 1.25rem;
	--font-size-heading-xs: 1.125rem;
	--font-size-heading-xxs: 1rem;

	--font-size-body-lg: 1.125rem;
	--font-size-body-md: 1rem;
	--font-size-body-sm: 0.875rem;
	--font-size-body-xs: 0.75rem;

	--gap-2: 0.125rem;
	--gap-4: 0.25rem;
	--gap-6: 0.325rem;
	--gap-8: 0.5rem;
	--gap-12: 0.75rem;
	--gap-16: 1rem;
	--gap-20: 1.25rem;
	--gap-24: 1.5rem;
	--gap-32: 2rem;
	--gap-40: 2.5rem;
	--gap-48: 3rem;
	--gap-64: 4rem;
	--gap-80: 5rem;

	--padding-2: 0.125rem;
	--padding-4: 0.25rem;
	--padding-6: 0.375rem;
	--padding-8: 0.5rem;
	--padding-10: 0.625rem;
	--padding-12: 0.75rem;
	--padding-16: 1rem;
	--padding-20: 1.25rem;
	--padding-24: 1.5rem;
	--padding-32: 2rem;
	--padding-40: 2.5rem;

	--radius-2: 0.125rem;
	--radius-4: 0.25rem;
	--radius-6: 0.375rem;
	--radius-8: 0.5rem;
	--radius-10: 0.625rem;
	--radius-12: 0.75rem;
	--radius-max: 62.5rem;
}

/* ── mode.css ── */

/* ===== Mode Colors (light) ===== */
:root,
[data-theme="light"] {
	color-scheme: light;

	/* background color: 전체 페이지 배경*/
	--color-background-dim: var(--color-alpha-black75);
	--color-background-gray-subtle: var(--color-gray-10);
	--color-background-gray-subtler: var(--color-gray-5);
	--color-background-inverse: var(--color-gray-90);
	--color-background-white: var(--color-gray-0);

	/* surface color: 엘리베이션 개념이 있는 표면 */
	--color-surface-gray-subtle: var(--color-gray-10);
	--color-surface-gray-subtler: var(--color-gray-5);
	--color-surface-primary-subtler: var(--color-blue-5);
	--color-surface-secondary-subtler: var(--color-teal-5);
	--color-surface-success-subtler: var(--color-system-green-5);
	--color-surface-danger-subtler: var(--color-system-red-5);
	--color-surface-warning-subtler: var(--color-system-yellow-5);
	--color-surface-disabled: var(--color-gray-20);
	--color-surface-inverse: var(--color-gray-90);
	--color-surface-inverse-static: var(--color-gray-90);
	--color-surface-white: var(--color-gray-0);
	--color-surface-white-subtle: var(--color-gray-0);
	--color-surface-white-subtler: var(--color-gray-0);
	--color-surface-white-static: var(--color-gray-0);

	/* border color: 선 테두리 */
	--color-border-gray-darker: var(--color-gray-70);
	--color-border-gray-dark: var(--color-gray-50);
	--color-border-gray: var(--color-gray-30);
	--color-border-gray-light: var(--color-gray-10);
	--color-border-primary: var(--color-blue-50);
	--color-border-primary-light: var(--color-blue-10);
	--color-border-secondary: var(--color-teal-50);
	--color-border-secondary-light: var(--color-teal-10);
	--color-border-success: var(--color-system-green-50);
	--color-border-success-light: var(--color-system-green-10);
	--color-border-danger: var(--color-system-red-50);
	--color-border-danger-light: var(--color-system-red-10);
	--color-border-warning: var(--color-system-yellow-50);
	--color-border-warning-light: var(--color-system-yellow-10);
	--color-border-inverse: var(--color-gray-0);
	--color-border-transparency: var(--color-alpha-black0);

	/* text color: 텍스트, 아이콘 */
	--color-text-basic: var(--color-gray-90);
	--color-text-subtle: var(--color-gray-70);
	--color-text-disabled: var(--color-gray-40);
	--color-text-disabled-on: var(--color-gray-50);
	--color-text-basic-inverse: var(--color-gray-0);
	--color-text-subtle-inverse: var(--color-gray-30);
	--color-text-static: var(--color-gray-90);
	--color-text-inverse-static: var(--color-gray-0);
	--color-text-primary: var(--color-blue-60);
	--color-text-secondary: var(--color-teal-60);
	--color-text-danger: var(--color-system-red-60);
	--color-text-success: var(--color-system-green-60);
	--color-text-warning: var(--color-system-yellow-60);

	/* element color: 컴포넌트의 구성단위나, 세부 영역 요소 */
	--color-element-gray-dark: var(--color-gray-60);
	--color-element-gray: var(--color-gray-50);
	--color-element-gray-light: var(--color-gray-10);
	--color-element-gray-lighter: var(--color-gray-5);
	--color-element-primary: var(--color-blue-50);
	--color-element-primary-light: var(--color-blue-10);
	--color-element-primary-lighter: var(--color-blue-5);
	--color-element-secondary: var(--color-teal-50);
	--color-element-secondary-light: var(--color-teal-10);
	--color-element-secondary-lighter: var(--color-teal-5);
	--color-element-success: var(--color-system-green-50);
	--color-element-success-light: var(--color-system-green-10);
	--color-element-danger: var(--color-system-red-50);
	--color-element-danger-light: var(--color-system-red-10);
	--color-element-warning: var(--color-system-yellow-50);
	--color-element-warning-light: var(--color-system-yellow-10);
	--color-element-disabled-light: var(--color-gray-20);
	--color-element-disabled-dark: var(--color-gray-40);
	--color-element-inverse: var(--color-gray-0);
	--color-element-inverse-static: var(--color-gray-0);

	/* action color: 버튼을 제외한 통일된 상호작용을 하는 ui */
	--color-action-gray-hover: var(--color-gray-5);
	--color-action-gray-selected: var(--color-gray-10);
	--color-action-gray-active: var(--color-gray-50);

	--color-action-primary-hover: var(--color-blue-5);
	--color-action-primary-selected: var(--color-blue-10);
	--color-action-primary-active: var(--color-blue-50);

	--color-action-secondary-hover: var(--color-teal-5);
	--color-action-secondary-selected: var(--color-teal-5);
	--color-action-secondary-active: var(--color-teal-50);

	--color-action-success-hover: var(--color-system-green-5);
	--color-action-success-selected: var(--color-system-green-5);
	--color-action-success-active: var(--color-system-green-50);

	--color-action-danger-hover: var(--color-system-red-5);
	--color-action-danger-selected: var(--color-system-red-5);
	--color-action-danger-active: var(--color-system-red-50);

	--color-action-warning-hover: var(--color-system-yellow-5);
	--color-action-warning-selected: var(--color-system-yellow-5);
	--color-action-warning-active: var(--color-system-yellow-50);

	--color-action-disabled: var(--color-gray-20);
	--color-action-white: var(--color-gray-0);

	/* alpha color: 투명도 개념이 있는 색상 */
	--color-alpha-base0: var(--color-alpha-white0);
	--color-alpha-base10: var(--color-alpha-white10);
	--color-alpha-base25: var(--color-alpha-white25);
	--color-alpha-base50: var(--color-alpha-white50);
	--color-alpha-base75: var(--color-alpha-white75);
	--color-alpha-base100: var(--color-alpha-white100);
	--color-alpha-inverse0: var(--color-alpha-black0);
	--color-alpha-inverse10: var(--color-alpha-black10);
	--color-alpha-inverse25: var(--color-alpha-black25);
	--color-alpha-inverse50: var(--color-alpha-black50);
	--color-alpha-inverse75: var(--color-alpha-black75);
	--color-alpha-inverse100: var(--color-alpha-black100);

	/* shadow color: 그림자 효과 */
	--color-alpha-shadow1: rgba(0, 0, 0, 0.051);
	--color-alpha-shadow2: rgba(0, 0, 0, 0.078);
	--color-alpha-shadow3: rgba(0, 0, 0, 0.122);

	/* number */
	--border-width-static-regular: 0.0625rem;
	--border-width-variable-regular: 0.0625rem;
	--border-width-static-medium: 0.125rem;
	--border-width-variable-medium: 0.125rem;

	--shadow-y-3: 0.5rem;
	--shadow-blur-3: 1rem;
	--shadow-y-4: 1rem;
	--shadow-blur-4: 1.5rem;
}

[data-theme="dark"] {
	color-scheme: dark;

	/* background color */
	--color-background-dim: var(--color-alpha-black75);
	--color-background-gray-subtle: var(--color-gray-80);
	--color-background-gray-subtler: var(--color-gray-90);
	--color-background-inverse: var(--color-gray-10);
	--color-background-white: var(--color-gray-100);

	/* surface color */
	--color-surface-gray-subtle: var(--color-gray-90);
	--color-surface-gray-subtler: var(--color-gray-95);
	--color-surface-primary-subtler: var(--color-blue-95);
	--color-surface-secondary-subtler: var(--color-teal-95);
	--color-surface-success-subtler: var(--color-system-green-95);
	--color-surface-danger-subtler: var(--color-system-red-95);
	--color-surface-warning-subtler: var(--color-system-yellow-95);
	--color-surface-disabled: var(--color-gray-70);
	--color-surface-inverse: var(--color-gray-10);
	--color-surface-inverse-static: var(--color-gray-90);
	--color-surface-white: var(--color-gray-100);
	--color-surface-white-subtle: var(--color-gray-95);
	--color-surface-white-subtler: var(--color-gray-90);
	--color-surface-white-static: var(--color-gray-0);

	/* border color */
	--color-border-gray-darker: var(--color-gray-30);
	--color-border-gray-dark: var(--color-gray-40);
	--color-border-gray: var(--color-gray-70);
	--color-border-gray-light: var(--color-gray-80);
	--color-border-primary: var(--color-blue-40);
	--color-border-primary-light: var(--color-blue-90);
	--color-border-secondary: var(--color-teal-40);
	--color-border-secondary-light: var(--color-teal-90);
	--color-border-success: var(--color-system-green-40);
	--color-border-success-light: var(--color-system-green-90);
	--color-border-danger: var(--color-system-red-40);
	--color-border-danger-light: var(--color-system-red-90);
	--color-border-warning: var(--color-system-yellow-40);
	--color-border-warning-light: var(--color-system-yellow-90);
	--color-border-inverse: var(--color-gray-100);
	--color-border-transparency: var(--color-alpha-white25);

	/* text color */
	--color-text-basic: var(--color-gray-5);
	--color-text-subtle: var(--color-gray-30);
	--color-text-disabled: var(--color-gray-50);
	--color-text-disabled-on: var(--color-gray-40);
	--color-text-basic-inverse: var(--color-gray-90);
	--color-text-subtle-inverse: var(--color-gray-70);
	--color-text-static: var(--color-gray-90);
	--color-text-inverse-static: var(--color-gray-0);
	--color-text-primary: var(--color-blue-30);
	--color-text-secondary: var(--color-teal-30);
	--color-text-danger: var(--color-system-red-30);
	--color-text-success: var(--color-system-green-30);
	--color-text-warning: var(--color-system-yellow-30);

	/* element color */
	--color-element-gray-dark: var(--color-gray-30);
	--color-element-gray: var(--color-gray-40);
	--color-element-gray-light: var(--color-gray-80);
	--color-element-gray-lighter: var(--color-gray-90);
	--color-element-primary: var(--color-blue-40);
	--color-element-primary-light: var(--color-blue-80);
	--color-element-primary-lighter: var(--color-blue-90);
	--color-element-secondary: var(--color-teal-40);
	--color-element-secondary-light: var(--color-teal-80);
	--color-element-secondary-lighter: var(--color-teal-90);
	--color-element-success: var(--color-system-green-40);
	--color-element-success-light: var(--color-system-green-80);
	--color-element-danger: var(--color-system-red-40);
	--color-element-danger-light: var(--color-system-red-80);
	--color-element-warning: var(--color-system-yellow-40);
	--color-element-warning-light: var(--color-system-yellow-80);
	--color-element-disabled-light: var(--color-gray-70);
	--color-element-disabled-dark: var(--color-gray-50);
	--color-element-inverse: var(--color-gray-100);
	--color-element-inverse-static: var(--color-gray-0);

	/* action color */
	--color-action-gray-hover: var(--color-gray-90);
	--color-action-gray-selected: var(--color-gray-80);
	--color-action-gray-active: var(--color-gray-40);

	--color-action-primary-hover: var(--color-blue-90);
	--color-action-primary-selected: var(--color-blue-80);
	--color-action-primary-active: var(--color-blue-40);

	--color-action-secondary-hover: var(--color-teal-90);
	--color-action-secondary-selected: var(--color-teal-80);
	--color-action-secondary-active: var(--color-teal-40);

	--color-action-success-hover: var(--color-system-green-90);
	--color-action-success-selected: var(--color-system-green-80);
	--color-action-success-active: var(--color-system-green-40);

	--color-action-danger-hover: var(--color-system-red-90);
	--color-action-danger-selected: var(--color-system-red-80);
	--color-action-danger-active: var(--color-system-red-40);

	--color-action-warning-hover: var(--color-system-yellow-90);
	--color-action-warning-selected: var(--color-system-yellow-80);
	--color-action-warning-active: var(--color-system-yellow-40);

	--color-action-disabled: var(--color-gray-80);
	--color-action-white: var(--color-gray-100);

	/* alpha color */
	--color-alpha-base0: var(--color-alpha-black0);
	--color-alpha-base10: var(--color-alpha-black10);
	--color-alpha-base25: var(--color-alpha-black25);
	--color-alpha-base50: var(--color-alpha-black50);
	--color-alpha-base75: var(--color-alpha-black75);
	--color-alpha-base100: var(--color-alpha-black100);
	--color-alpha-inverse0: var(--color-alpha-white0);
	--color-alpha-inverse10: var(--color-alpha-white10);
	--color-alpha-inverse25: var(--color-alpha-white25);
	--color-alpha-inverse50: var(--color-alpha-white50);
	--color-alpha-inverse75: var(--color-alpha-white75);
	--color-alpha-inverse100: var(--color-alpha-white100);

	/* shadow color */
	--color-alpha-shadow1: rgba(0, 0, 0, 0.122);
	--color-alpha-shadow2: rgba(0, 0, 0, 0.2);
	--color-alpha-shadow3: rgba(0, 0, 0, 0.4);

	/* number */
	--border-width-static-regular: 0.0625rem;
	--border-width-variable-regular: 0.125rem;
	--border-width-static-medium: 0.125rem;
	--border-width-variable-medium: 0.1875rem;

	--shadow-y-3: 0.5rem;
	--shadow-blur-3: 1rem;
	--shadow-y-4: 1rem;
	--shadow-blur-4: 1.5rem;
}

/* ── components.css ── */
:root,
[data-theme="light"] {
	--btn-fill-primary-bg: var(--color-blue-50);
	--btn-fill-primary-hover-bg: var(--color-blue-60);
	--btn-fill-secondary-bg: var(--color-teal-50);
	--btn-fill-secondary-hover-bg: var(--color-teal-60);
	--btn-fill-gray-bg: var(--color-gray-50);
	--btn-fill-gray-hover-bg: var(--color-gray-60);

	/* input color */
	--input-border: var(--color-gray-40);
	--input-border-active: var(--color-blue-50);
	--input-border-disabled: var(--color-gray-30);
	--input-border-error: var(--color-system-red-50);
	--input-surface-disabled: var(--color-gray-10);

	/* link color */
	--link-default: var(--color-blue-50);
	--link-hover: var(--color-blue-60);
	--link-visited: #5917b8;
}

[data-theme="dark"] {
	--btn-fill-primary-bg: var(--color-blue-40);
	--btn-fill-primary-hover-bg: var(--color-blue-30);
	--btn-fill-secondary-bg: var(--color-teal-40);
	--btn-fill-secondary-hover-bg: var(--color-teal-30);
	--btn-fill-gray-bg: var(--color-gray-40);
	--btn-fill-gray-hover-bg: var(--color-gray-30);

	/* input color */
	--input-border: var(--color-gray-20);
	--input-border-active: var(--color-blue-40);
	--input-border-disabled: var(--color-gray-70);
	--input-border-error: var(--color-system-red-40);
	--input-surface-disabled: var(--color-gray-80);

	/* link color */
	--link-default: var(--color-blue-30);
	--link-hover: var(--color-blue-20);
	--link-visited: #c49ff9;
}