@charset "utf-8";

@layer tokens {
	/* ==================================================================
	 * 1. COLOR SYSTEM (OKLCH)
	 * ================================================================== */
	:root {
		/* [CORE] 브랜드 및 기준 색상 */
		--color-primary: #006a68;
		--color-secondary: #ff6000;
		--color-tertiary: #ffb400;
		--color-cheesecake: #fffcda;
		--color-white: #ffffff;
		--color-black: #001514;

		/* [STATUS] 시스템 상태 원천 색상 */
		/* 오류(Error): 위험, 차단, 삭제 등 부정적 상태 알림 */
		--status-error: oklch(0.6 0.2 25);
		/* 경고(Warning): 주의, 대기, 확인 필요 등 중간 상태 알림 */
		--status-warning: oklch(0.75 0.15 75);
		/* 성공(Success): 완료, 승인, 안전 등 긍정적 상태 알림 */
		--status-success: oklch(0.65 0.18 145);
		/* 정보(Info): 일반 안내, 팁, 참고 사항 등 중립적 정보 전달 */
		--status-info: oklch(0.65 0.15 240);

		/* [LIGHTNESS] 시스템 기준 밝기 정의 (System Reference Lightness v1.0) */
		--lightness-100: 0.97;
		--lightness-200: 0.922;
		/* --lightness-300: 0.845; #ccc */
		--lightness-300: 0.792;
		--lightness-400: 0.683;
		--lightness-500: 0.45;
		--lightness-600: 0.385;
		--lightness-700: 0.32;
		--lightness-800: 0.25;
		--lightness-900: 0.177;

		/* [PRIMARY PALETTE] 브랜드 팔레트 단계 */
		--color-primary-100: oklch(from var(--color-primary) var(--lightness-100) c h);
		--color-primary-200: oklch(from var(--color-primary) var(--lightness-200) c h);
		--color-primary-300: oklch(from var(--color-primary) var(--lightness-300) c h);
		--color-primary-400: oklch(from var(--color-primary) var(--lightness-400) c h);
		--color-primary-500: oklch(from var(--color-primary) var(--lightness-500) c h);
		--color-primary-600: oklch(from var(--color-primary) var(--lightness-600) c h);
		--color-primary-700: oklch(from var(--color-primary) var(--lightness-700) c h);
		--color-primary-800: oklch(from var(--color-primary) var(--lightness-800) c h);
		--color-primary-900: oklch(from var(--color-primary) var(--lightness-900) c h);

		/* [SECONDARY PALETTE] 브랜드 팔레트 단계 */
		--color-secondary-100: oklch(from var(--color-secondary) var(--lightness-100) c h);
		--color-secondary-200: oklch(from var(--color-secondary) var(--lightness-200) c h);
		--color-secondary-300: oklch(from var(--color-secondary) var(--lightness-300) c h);
		--color-secondary-400: oklch(from var(--color-secondary) var(--lightness-400) c h);
		--color-secondary-500: oklch(from var(--color-secondary) var(--lightness-500) c h);
		--color-secondary-600: oklch(from var(--color-secondary) var(--lightness-600) c h);
		--color-secondary-700: oklch(from var(--color-secondary) var(--lightness-700) c h);
		--color-secondary-800: oklch(from var(--color-secondary) var(--lightness-800) c h);
		--color-secondary-900: oklch(from var(--color-secondary) var(--lightness-900) c h);

		/* [TERTIARY PALETTE] 브랜드 팔레트 단계 */
		--color-tertiary-100: oklch(from var(--color-tertiary) var(--lightness-100) c h);
		--color-tertiary-200: oklch(from var(--color-tertiary) var(--lightness-200) c h);
		--color-tertiary-300: oklch(from var(--color-tertiary) var(--lightness-300) c h);
		--color-tertiary-400: oklch(from var(--color-tertiary) var(--lightness-400) c h);
		--color-tertiary-500: oklch(from var(--color-tertiary) var(--lightness-500) c h);
		--color-tertiary-600: oklch(from var(--color-tertiary) var(--lightness-600) c h);
		--color-tertiary-700: oklch(from var(--color-tertiary) var(--lightness-700) c h);
		--color-tertiary-800: oklch(from var(--color-tertiary) var(--lightness-800) c h);
		--color-tertiary-900: oklch(from var(--color-tertiary) var(--lightness-900) c h);

		/* [NEUTRAL PALETTE] 무채색 팔레트 (Neutral) */
		--color-neutral-100: oklch(var(--lightness-100) 0 0);
		--color-neutral-200: oklch(var(--lightness-200) 0 0);
		--color-neutral-300: oklch(var(--lightness-300) 0 0);
		--color-neutral-400: oklch(var(--lightness-400) 0 0);
		--color-neutral-500: oklch(var(--lightness-500) 0 0);
		--color-neutral-600: oklch(var(--lightness-600) 0 0);
		--color-neutral-700: oklch(var(--lightness-700) 0 0);
		--color-neutral-800: oklch(var(--lightness-800) 0 0);
		--color-neutral-900: oklch(var(--lightness-900) 0 0);

		/* [STATUS PALETTE] 상태별 기능 팔레트 */
		/* 오류(Error) 팔레트 */
		--status-error-100: oklch(from var(--status-error) var(--lightness-100) c h);
		--status-error-200: oklch(from var(--status-error) var(--lightness-200) c h);
		--status-error-300: oklch(from var(--status-error) var(--lightness-300) c h);
		--status-error-400: oklch(from var(--status-error) var(--lightness-400) c h);
		--status-error-500: oklch(from var(--status-error) var(--lightness-500) c h);
		--status-error-600: oklch(from var(--status-error) var(--lightness-600) c h);
		--status-error-700: oklch(from var(--status-error) var(--lightness-700) c h);
		--status-error-800: oklch(from var(--status-error) var(--lightness-800) c h);
		--status-error-900: oklch(from var(--status-error) var(--lightness-900) c h);

		/* 경고(Warning) 팔레트 */
		--status-warning-100: oklch(from var(--status-warning) var(--lightness-100) c h);
		--status-warning-200: oklch(from var(--status-warning) var(--lightness-200) c h);
		--status-warning-300: oklch(from var(--status-warning) var(--lightness-300) c h);
		--status-warning-400: oklch(from var(--status-warning) var(--lightness-400) c h);
		--status-warning-500: oklch(from var(--status-warning) var(--lightness-500) c h);
		--status-warning-600: oklch(from var(--status-warning) var(--lightness-600) c h);
		--status-warning-700: oklch(from var(--status-warning) var(--lightness-700) c h);
		--status-warning-800: oklch(from var(--status-warning) var(--lightness-800) c h);
		--status-warning-900: oklch(from var(--status-warning) var(--lightness-900) c h);

		/* 성공(Success) 팔레트 */
		--status-success-100: oklch(from var(--status-success) var(--lightness-100) c h);
		--status-success-200: oklch(from var(--status-success) var(--lightness-200) c h);
		--status-success-300: oklch(from var(--status-success) var(--lightness-300) c h);
		--status-success-400: oklch(from var(--status-success) var(--lightness-400) c h);
		--status-success-500: oklch(from var(--status-success) var(--lightness-500) c h);
		--status-success-600: oklch(from var(--status-success) var(--lightness-600) c h);
		--status-success-700: oklch(from var(--status-success) var(--lightness-700) c h);
		--status-success-800: oklch(from var(--status-success) var(--lightness-800) c h);
		--status-success-900: oklch(from var(--status-success) var(--lightness-900) c h);

		/* 정보(Info) 팔레트 */
		--status-info-100: oklch(from var(--status-info) var(--lightness-100) c h);
		--status-info-200: oklch(from var(--status-info) var(--lightness-200) c h);
		--status-info-300: oklch(from var(--status-info) var(--lightness-300) c h);
		--status-info-400: oklch(from var(--status-info) var(--lightness-400) c h);
		--status-info-500: oklch(from var(--status-info) var(--lightness-500) c h);
		--status-info-600: oklch(from var(--status-info) var(--lightness-600) c h);
		--status-info-700: oklch(from var(--status-info) var(--lightness-700) c h);
		--status-info-800: oklch(from var(--status-info) var(--lightness-800) c h);
		--status-info-900: oklch(from var(--status-info) var(--lightness-900) c h);
	}

	/* ==================================================================
	 * 2. TYPOGRAPHY
	 * ================================================================== */
	:root {
		/* [FONT FAMILY] 서체 설정 */
		--font-family-pretendard: "Pretendard Variable", "Pretendard", sans-serif;
		--font-family-gmarket: "GmarketSans", var(--font-family-pretendard);
		--font-family-hanamdaume: "Hanamdaume", var(--font-family-pretendard);
		--font-family-poppins: "Poppins", var(--font-family-pretendard);
		--font-family-inkLipquid: "InkLipquid", var(--font-family-pretendard);
		--font-family-sans-serif: var(--font-family-pretendard);

		/* [LINE HEIGHT] 행간 정의 */
		/* [행간 설계 근거]
		 * 1. 공통 기준: 웹 콘텐츠 접근성 지침(WCAG 2.1)에 따라 언어와 관계없이 가독성 확보를 위한 최소 수치인 1.5를 표준으로 정의함.
		 * 2. 영문권 관행(1.4): 영문은 글자 구조상 어센더(Ascender)와 디센더(Descender)가 만드는 시각적 여백이 존재하여, 
		 * 미적 완성도와 전통적인 인쇄 황금비를 중시하는 실무에서는 규정(1.5)보다 낮은 1.4를 관행적으로 사용하기도 함.
		 */
		--line-height-latin: 1.5;
		--line-height-hangeul: 1.5;

		/* [LETTER SPACING] 자간 정의 */
		--letter-spacing-negative-10: -0.01em;
		--letter-spacing-negative-20: -0.02em;
		--letter-spacing-negative-25: -0.025em;
		--letter-spacing-negative-50: -0.05em;
		--letter-spacing-negative-60: -0.05em;
		--letter-spacing-zero: 0;

		/* [FONT WEIGHT] 굵기 정의 */
		--font-weight-100: 100;
		--font-weight-200: 200;
		--font-weight-300: 300;
		--font-weight-400: 400;
		--font-weight-500: 500;
		--font-weight-600: 600;
		--font-weight-700: 700;
		--font-weight-800: 800;
		--font-weight-900: 900;

		/* [FONT SIZE RAW] 글자 크기 원천 수치 */
		/* Display Steps */
		--font-display-1-max: 60rem;
		--font-display-1-min: 44rem;
		--font-display-2-max: 44rem;
		--font-display-2-min: 32rem;
		--font-display-3-max: 36rem;
		--font-display-3-min: 28rem;

		/* Heading Steps */
		--font-heading-1-max: 40rem;
		--font-heading-1-min: 28rem;
		--font-heading-2-max: 32rem;
		--font-heading-2-min: 24rem;
		--font-heading-3-max: 24rem;
		--font-heading-3-min: 22rem;
		--font-heading-4-max: 20rem;
		--font-heading-4-min: 20rem;
		--font-heading-5-max: 18rem;
		--font-heading-5-min: 18rem;
		--font-heading-6-max: 16rem;
		--font-heading-6-min: 16rem;

		/* Body & Etc Steps */
		--font-body-1-max: 20rem;
		--font-body-1-min: 20rem;
		--font-body-2-max: 18rem;
		--font-body-2-min: 18rem;
		--font-body-3-max: 16rem;
		--font-body-3-min: 16rem;
		--font-body-4-max: 14rem;
		--font-body-4-min: 14rem;

		/* [SHORTHAND REFERENCE] 자동완성 참조용 고정 단축 변수 
		 * 상세 설명: 각 해상도 구간별로 최적화된 글꼴 굵기, 크기, 행간을 결합한 완성형 토큰입니다.
		 */
		@media (width >= 1280px) {
			/* Display Reference */
			--font-display-1: var(--font-weight-700) var(--font-display-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-display-2: var(--font-weight-700) var(--font-display-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-display-3: var(--font-weight-700) var(--font-display-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);

			/* Heading Reference */
			--font-heading-1: var(--font-weight-700) var(--font-heading-1-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-2: var(--font-weight-700) var(--font-heading-2-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-3: var(--font-weight-700) var(--font-heading-3-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-4: var(--font-weight-700) var(--font-heading-4-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-5: var(--font-weight-700) var(--font-heading-5-max) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-6: var(--font-weight-700) var(--font-heading-6-max) / var(--line-height-hangeul) var(--font-family-sans-serif);

			/* Body Reference */
			--font-body-1: var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-2: var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-3: var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-4: var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-1-bold: var(--font-weight-700) var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-2-bold: var(--font-weight-700) var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-3-bold: var(--font-weight-700) var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-4-bold: var(--font-weight-700) var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
		}
		@media (width < 1280px) {
			/* Display Reference */
			--font-display-1: var(--font-weight-700) var(--font-display-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-display-2: var(--font-weight-700) var(--font-display-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-display-3: var(--font-weight-700) var(--font-display-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);

			/* Heading Reference */
			--font-heading-1: var(--font-weight-700) var(--font-heading-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-2: var(--font-weight-700) var(--font-heading-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-3: var(--font-weight-700) var(--font-heading-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-4: var(--font-weight-700) var(--font-heading-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-5: var(--font-weight-700) var(--font-heading-5-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-heading-6: var(--font-weight-700) var(--font-heading-6-min) / var(--line-height-hangeul) var(--font-family-sans-serif);

			/* Body Reference */
			--font-body-1: var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-2: var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-3: var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-4: var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-1-bold: var(--font-weight-700) var(--font-body-1-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-2-bold: var(--font-weight-700) var(--font-body-2-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-3-bold: var(--font-weight-700) var(--font-body-3-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
			--font-body-4-bold: var(--font-weight-700) var(--font-body-4-min) / var(--line-height-hangeul) var(--font-family-sans-serif);
		}
	}

	/* ==================================================================
	 * 3. GRID & LAYOUT
	 * ================================================================== */
	:root {
		/**
		 * [GRID WIDTH] 격자 폭(Grid Width)
		 * 배경 지식: 모든 단(Column)과 단 사이 간격(Gutter)의 너비를 합산한 유효 콘텐츠 영역을 의미합니다.
		 * 상세 설명: 정보가 배치되는 실제 가로 폭의 기준점이며, 디자인의 가시 범위를 결정합니다.
		 */
		--grid-width-base: 1500;
		--grid-width-narrow: 1200;
		--grid-width-wide: 1720;
		--grid-width-scale: 0.92;

		/**
		 * [OUTSIDE MARGIN] 외곽 여백(Outside Margin)
		 * 배경 지식: 화면의 끝(Viewport edge)에서 그리드 시스템이 시작되는 지점까지의 빈 공간입니다.
		 * 상세 설명: 좌측 혹은 우측 중 한 면의 수치를 의미하는 단수형(Margin)을 사용합니다.
		 * 설계 공식: (뷰포트 전체 폭 - 그리드 폭) / 2
		 */
		--grid-margin: calc((100vw - min(var(--grid-width-scale) * 100vw, var(--grid-width-base) * 1rem)) / 2);
		--grid-margin-negative: calc(var(--grid-margin) * -1);

		/**
		 * [COLUMNS & GUTTERS] 단(Column) 및 단 사이 간격(Gutter)
		 * 배경 지식: 그리드 내부를 수직으로 나누는 기둥을 '단(Column)'이라 하며, 그 기둥 사이의 여백을 '단 사이 간격(Gutter)'이라 합니다.
		 * 상세 설명: 수학적 의미인 '열'보다 설계 전문 용어인 '단'을 사용하여 수평 방향인 '행(Row)'과의 혼동을 방지합니다.
		 */
		--grid-columns-pc: 12;
		--grid-columns-tab: 12;
		--grid-columns-mob: 4;

		--grid-gutter-pc: 24rem;
		--grid-gutter-tab: 16rem;
		--grid-gutter-mob: 16rem;

		/* 해상도별 단(Column) 및 단 사이 간격(Gutter) 제어 */
		@media (width >= 1280px) {
			--grid-columns: var(--grid-columns-pc);
			--grid-gutter: var(--grid-gutter-pc);
		}
		@media (768px <= width < 1280px) {
			--grid-columns: var(--grid-columns-tab);
			--grid-gutter: var(--grid-gutter-tab);
		}
		@media (width < 768px) {
			--grid-columns: var(--grid-columns-mob);
			--grid-gutter: var(--grid-gutter-mob);
		}
	}

	/* ==================================================================
	 * 4. SPACING & NUMERIC SCALE
	 * ================================================================== */
	:root {
		/**
		 * [SYSTEM PRINCIPLE] 수치 활용 및 근사값 원칙
		 * 1. 수렴(Convergence): 시스템에 정의되지 않은 임의 수치는 가장 가까운 간격 토큰으로 대체합니다.
		 * 2. 연산(Calculation): 100px(100rem) 이상의 대형 간격은 기존 토큰의 배수 연산(calc)을 활용합니다.
		 * 예시: 120px -> calc(var(--spacing-06) * 12)
		 */
		--spacing-base: 8rem;
		--spacing-0: 0;
		/* --spacing-01: calc(var(--spacing-base) * 0.125);
		--spacing-02: calc(var(--spacing-base) * 0.25);
		--spacing-03: calc(var(--spacing-base) * 0.5);
		--spacing-04: calc(var(--spacing-base) * 0.75);
		--spacing-05: var(--spacing-base);
		--spacing-06: calc(var(--spacing-base) * 1.25);
		--spacing-07: calc(var(--spacing-base) * 1.5);
		--spacing-08: calc(var(--spacing-base) * 2);
		--spacing-09: calc(var(--spacing-base) * 2.5);
		--spacing-10: calc(var(--spacing-base) * 3);
		--spacing-11: calc(var(--spacing-base) * 3.5);
		--spacing-12: calc(var(--spacing-base) * 4);
		--spacing-13: calc(var(--spacing-base) * 4.5);
		--spacing-14: calc(var(--spacing-base) * 5);
		--spacing-15: calc(var(--spacing-base) * 5.5);
		--spacing-16: calc(var(--spacing-base) * 6);
		--spacing-17: calc(var(--spacing-base) * 7);
		--spacing-18: calc(var(--spacing-base) * 8);
		--spacing-19: calc(var(--spacing-base) * 9);
		--spacing-20: calc(var(--spacing-base) * 10);
		--spacing-21: calc(var(--spacing-base) * 12); */

		--spacing-01: 1rem;
		--spacing-02: 2rem;
		--spacing-03: 4rem;
		--spacing-04: 6rem;
		--spacing-05: 8rem;
		--spacing-06: 10rem;
		--spacing-07: 12rem;
		--spacing-08: 16rem;
		--spacing-09: 20rem;
		--spacing-10: 24rem;
		--spacing-11: 28rem;
		--spacing-12: 32rem;
		--spacing-13: 36rem;
		--spacing-14: 40rem;
		--spacing-15: 44rem;
		--spacing-16: 48rem;
		--spacing-17: 56rem;
		--spacing-18: 64rem;
		--spacing-19: 72rem;
		--spacing-20: 80rem;
		--spacing-21: 96rem;
	}

	/* ==================================================================
	 * 5. SHAPE SYSTEM (RADIUS & BORDER)
	 * ================================================================== */
	:root {
		/* [설계 근거]
		   사용자 요청에 따라 '상태 변화(두께 유무 등)'를 변수로 즉각 제어할 수 있도록 
		   0(None) 단계를 명시적으로 포함함. 이를 통해 하드코딩을 방지하고 시스템 일관성을 확보함.
		*/

		/* [RADIUS] 모서리 곡률 */
		--radius-0: 0;
		--radius-1: 2rem;
		--radius-2: 4rem;
		--radius-3: 6rem;
		--radius-4: 10rem;
		--radius-5: 16rem;
		--radius-6: 20rem;
		--radius-full: 9999px;
		--radius-circle: 50%;

		/* [BORDER WIDTH] 테두리 두께 */
		--border-width-0: 0;
		--border-width-1: 1rem;
		--border-width-2: 2rem;
		--border-width-3: 3rem;

		/* [SHADOW] 그림자 */
		--shadow-0: 0;
		--shadow-1: 0 0 40rem oklch(0% 0 0 / 0.1);
		--shadow-2: 10rem 0 40rem oklch(0% 0 0 / 0.2);
		--shadow-3: 0 0 80rem oklch(0% 0 0 / 0.3);
	}
}