/**
 * 디자인 토큰 이름 체계와 기본값 (재사용 기반).
 *
 * - 여기에는 역할 이름과 어느 사이트에나 무난한 기본값만 둡니다.
 * - 사이트별 실제 값은 전용 토큰 파일(예: assets/css/udongsari/tokens.css)에서 같은 이름으로 덮어씁니다.
 * - 이름은 "진파랑"처럼 사이트 전용 뜻이 아니라 역할(주 색, 강조 색 등)로 짓습니다.
 *
 * @package udongsari
 */

:root {
	/* 색: 주 색 */
	--color-primary: #1f4fa0;
	--color-primary-soft: #f3f5f9;
	--color-primary-subtle: #e7ebf3;
	--color-primary-muted: #5a7cb8;

	/* 색: 글자 */
	--color-text-strong: #111111;
	--color-text: #333333;
	--color-text-muted: #6b6b6b;
	--color-text-subtle: #9a9a9a;
	--color-text-faint: #c8c8c8;
	--color-text-label: #6b6b6b; /* 표 줄 제목·주석(연회색 바탕 대비 4.5:1 이상) */

	/* 색: 주 색 배경 위 글자·면 */
	--color-on-primary: #ffffff;
	--color-on-primary-muted: rgba(255, 255, 255, 0.5);
	--color-on-primary-subtle: rgba(255, 255, 255, 0.1);
	--color-on-primary-border: rgba(255, 255, 255, 0.25);

	/* 색: 바탕·면·선 */
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-muted: #f8f8f8;
	--color-border: #e0e0e0;
	--color-disabled: #cccccc;

	/* 색: 상태 */
	--color-accent: #d93a1f;
	--color-highlight: #f5a623; /* 강조 표시(체크 등) */
	--color-danger: #d93a1f;
	--color-danger-text: #b42318; /* 오류 문장 글자(흰 바탕 대비 4.5:1 이상) */
	--color-neutral-strong: #333333;

	/* 색: 겹침 */
	--color-toast-bg: rgba(0, 0, 0, 0.75);
	--color-tooltip-bg: #3d5f99; /* 툴팁 바탕(흰 글자 대비 4.5:1 이상) */
	--color-dim: rgba(0, 0, 0, 0.5);

	/* 색: 키보드 포커스 표시 */
	--color-focus: var(--color-primary);
	--color-focus-on-primary: var(--color-on-primary);

	/* 글꼴 */
	--font-base: system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
	--font-accent: var(--font-base);

	/* 글자 크기 (rem: 브라우저 글자 크기 설정을 따름, 1rem = 16px 기준) */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.375rem;
	--fs-3xl: 1.5rem;
	--fs-4xl: 1.75rem;
	--fs-5xl: 2rem;

	/* 글자 굵기 */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* 줄 높이 */
	--lh-tight: 1.3;
	--lh-snug: 1.4;
	--lh-base: 1.5;
	--lh-relaxed: 1.6;

	/* 간격 (4px 단위) */
	--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-14: 56px;
	--space-16: 64px;
	--space-20: 80px;

	/*
	 * 모서리 둥글기 단계.
	 * 단계만 준비하며, 컴포넌트 종류(버튼·카드 등)별로 일괄 적용하지 않습니다.
	 * 실제 컴포넌트에 쓸 단계는 그 화면을 구현할 때 디자인을 측정해 고르고,
	 * 단계에 없는 값이 디자인에서 확인되면 그때 단계를 추가합니다.
	 * 알약 형태는 크기가 바뀌어도 모양이 유지되도록 큰 값(9999px)을 씁니다.
	 */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 9999px;

	/* 그림자 */
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);

	/* 키보드 포커스 표시 모양 */
	--focus-ring-width: 2px;
	--focus-ring-offset: 2px;

	/* 겹침 순서 */
	--z-sticky: 100;
	--z-dim: 900;
	--z-modal: 1000;
	--z-sheet: 1100;
	--z-toast: 1200;

	/*
	 * 화면 너비 기준 (명세 7.1).
	 * CSS 변수는 @media 조건 안에서 쓸 수 없으므로, 미디어 쿼리에는 아래 숫자를 그대로 적고
	 * 이 변수는 JavaScript에서 같은 기준을 읽을 때 사용합니다.
	 */
	--bp-mobile-max: 767px;
	--bp-tablet-min: 768px;
	--bp-pc-min: 1024px;
	--bp-wide-min: 1440px;
}