/**
 * kiesgf — 디자인 토큰
 * Figma Foundations(KIC5emZlZdZeJfBNxmIuh5) 1:1.
 * 이 파일이 hex 리터럴을 두는 유일한 곳이다. 다른 CSS/PHP에서 색상값 직접 사용 금지.
 */

:root {
	/* ---------- Palette : navy ---------- */
	--k-navy-50: #f2f5fa;
	--k-navy-100: #e2e9f4;
	--k-navy-200: #c5d3e8;
	--k-navy-300: #9fb5d6;
	--k-navy-400: #6e8dbd;
	--k-navy-500: #46689f;
	--k-navy-600: #2f4e82;
	--k-navy-700: #223c69;
	--k-navy-800: #182c50;
	--k-navy-900: #101f3a;

	/* ---------- Palette : green ---------- */
	--k-green-50: #f1f8ee;
	--k-green-100: #dff0d5;
	--k-green-300: #a8d48c;
	--k-green-500: #61b144;
	--k-green-600: #46912e;
	--k-green-700: #366f26;
	--k-green-900: #20421a;

	/* ---------- Palette : gray ---------- */
	--k-gray-50: #f7f8f9;
	--k-gray-100: #eff1f3;
	--k-gray-200: #e2e5e9;
	--k-gray-300: #c9ced5;
	--k-gray-400: #9aa2ad;
	--k-gray-500: #6e7681;
	--k-gray-600: #525a66;
	--k-gray-700: #3d444e;
	--k-gray-800: #2a3037;
	--k-gray-900: #191d22;

	/* ---------- Palette : red ---------- */
	--k-red-50: #fbf0ee;
	--k-red-600: #be3e33;

	/* ---------- Palette : white ---------- */
	--k-white: #ffffff;

	/* ---------- 인증 등급 ---------- */
	--k-grade-bronze: #9b6b3b;
	--k-grade-silver: #6f7a86;
	--k-grade-gold: #a8821f;
	--k-grade-platinum: #5e718a;

	/* ---------- Semantic : background ---------- */
	--k-bg-page: var(--k-white);
	--k-bg-subtle: var(--k-gray-50);
	--k-bg-muted: var(--k-gray-100);
	--k-bg-brand: var(--k-navy-800);
	--k-bg-brand-subtle: var(--k-navy-50);
	--k-bg-accent-subtle: var(--k-green-50);
	/* Figma bg/disabled (Button Disabled 변형 7:14 실측) */
	--k-bg-disabled: var(--k-gray-100);

	/* ---------- Semantic : text ---------- */
	--k-text-primary: var(--k-gray-900);
	--k-text-secondary: var(--k-gray-600);
	--k-text-tertiary: var(--k-gray-500);
	--k-text-inverse: var(--k-white);
	--k-text-brand: var(--k-navy-700);
	--k-text-accent: var(--k-green-700);
	/* Figma text/disabled (Button Disabled 변형 7:14 실측 — gray400) */
	--k-text-disabled: var(--k-gray-400);

	/* ---------- Semantic : border ---------- */
	--k-border-default: var(--k-gray-200);
	--k-border-strong: var(--k-gray-300);
	--k-border-brand: var(--k-navy-700);

	/* ---------- Semantic : action ---------- */
	--k-action-primary: var(--k-navy-700);
	--k-action-primary-hover: var(--k-navy-800);
	/* Figma Button Accent Default(7:16)=green700 #366f26, Hover(7:18)=green900 #20421a.
	   스펙 §3 의 "accent=green600(hover green700)" 과 한 단계씩 어긋난다 — Figma 실측을 정본으로 채택. */
	--k-action-accent: var(--k-green-700);
	--k-action-accent-hover: var(--k-green-900);

	/* ---------- Semantic : state ---------- */
	--k-state-error: var(--k-red-600);
	--k-state-error-subtle: var(--k-red-50);

	/* ---------- ESG 축 ---------- */
	--k-esg-e: var(--k-green-600);
	--k-esg-s: var(--k-navy-500);
	--k-esg-g: var(--k-gray-600);

	/* ---------- CI 브랜드 색 ----------
	   재단 로고(assets/img/ci-logo.png) 원본 픽셀에서 추출한 실측값이다.
	   --k-navy-700 이나 --k-esg-e 로 대신하면 로고와 다른 색이 나온다.
	   (--k-esg-e 는 green-600 #46912e 로 청록이 아니라 초록이다.)
	   로고 색 자체를 보여야 하는 곳에만 쓴다. */
	--k-ci-navy: #022d5f;
	--k-ci-teal: #01586c;
	--k-ci-green: #39b11e;

	/* ---------- Typography : family ---------- */
	--k-font-sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
		"Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

	/* ---------- Typography : weight ---------- */
	--k-weight-regular: 400;
	--k-weight-semibold: 600;
	--k-weight-bold: 700;

	/* Display / Hero — 56 Bold 116% -2.5% */
	--k-font-size-hero: 56px;
	--k-line-height-hero: 1.16;
	--k-letter-spacing-hero: -0.025em;
	--k-font-weight-hero: var(--k-weight-bold);

	/* H1 — 40 Bold 125% -2.5% */
	--k-font-size-h1: 40px;
	--k-line-height-h1: 1.25;
	--k-letter-spacing-h1: -0.025em;
	--k-font-weight-h1: var(--k-weight-bold);

	/* H2 — 32 Bold 130% -2.5% */
	--k-font-size-h2: 32px;
	--k-line-height-h2: 1.3;
	--k-letter-spacing-h2: -0.025em;
	--k-font-weight-h2: var(--k-weight-bold);

	/* H3 — 24 SemiBold 140% -2% */
	--k-font-size-h3: 24px;
	--k-line-height-h3: 1.4;
	--k-letter-spacing-h3: -0.02em;
	--k-font-weight-h3: var(--k-weight-semibold);

	/* H4 — 20 SemiBold 145% -2% */
	--k-font-size-h4: 20px;
	--k-line-height-h4: 1.45;
	--k-letter-spacing-h4: -0.02em;
	--k-font-weight-h4: var(--k-weight-semibold);

	/* Body/Lg — 18 Regular 160% -1% */
	--k-font-size-body-lg: 18px;
	--k-line-height-body-lg: 1.6;
	--k-letter-spacing-body-lg: -0.01em;
	--k-font-weight-body-lg: var(--k-weight-regular);

	/* Body/Md — 16 Regular 165% -1% */
	--k-font-size-body: 16px;
	--k-line-height-body: 1.65;
	--k-letter-spacing-body: -0.01em;
	--k-font-weight-body: var(--k-weight-regular);

	/* Label — 16 SemiBold 130% -1% */
	--k-font-size-label: 16px;
	--k-line-height-label: 1.3;
	--k-letter-spacing-label: -0.01em;
	--k-font-weight-label: var(--k-weight-semibold);

	/* Caption — 16 Regular 150% -1% */
	--k-font-size-caption: 16px;
	--k-line-height-caption: 1.5;
	--k-letter-spacing-caption: -0.01em;
	--k-font-weight-caption: var(--k-weight-regular);

	/* ---------- Spacing ---------- */
	--k-space-2xs: 4px;
	--k-space-xs: 8px;
	--k-space-sm: 12px;
	--k-space-md: 16px;
	--k-space-lg: 24px;
	--k-space-xl: 32px;
	--k-space-2xl: 40px;
	--k-space-3xl: 64px;
	--k-space-4xl: 96px;
	--k-space-section: 120px;

	/* ---------- Radius ---------- */
	--k-radius-none: 0;
	--k-radius-sm: 4px;
	--k-radius-md: 8px;
	--k-radius-lg: 12px;
	--k-radius-full: 9999px;

	/* ---------- Layout ---------- */
	--k-container-max: 1200px;
	--k-container-pad: var(--k-space-lg);

	/* ---------- Elevation (Figma: shadow/sm 만 사용) ---------- */
	--k-shadow-sm: 0 1px 2px rgba(16, 31, 58, 0.06), 0 2px 8px rgba(16, 31, 58, 0.06);

	/* ---------- Focus ---------- */
	--k-focus-ring: 0 0 0 3px rgba(34, 60, 105, 0.25);
}