@charset "utf-8";
/*==================================================

    ----------------------------------------------------------------
	* Date			:	2026.01.21
	* Name			:	variables.css
	----------------------------------------------------------------

	- Description -
	
	CSS 변수 정의 파일
	- Typography System: 폰트 크기, 행간, 굵기
	- Spacing System: 간격, 여백
	- Component Sizes: 버튼, 입력 요소 크기
	- Border Radius: 모서리 둥글기

=====================================================*/

:root {
    /* ===========================
       Typography System
    =========================== */
    /* Font Sizes - 명확한 위계 구조 */
    --font-size-xs: 12px;
    /* 캡션, 힌트 */
    --font-size-sm: 13px;
    /* 보조 텍스트, 작은 라벨 */
    --font-size-base: 15px;
    /* 기본 텍스트, 입력 필드, 버튼 */
    --font-size-md: 17px;
    /* 소제목, 폼 라벨 */
    --font-size-lg: 21px;
    /* 섹션 제목 */
    --font-size-xl: 28px;
    /* 페이지 제목 */
    --font-size-2xl: 32px;
    /* 대시보드 숫자 등 */
    --font-size-3xl: 40px;
    /* 로그인 페이지 제목 */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.8;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* ===========================
       Spacing System (4px 기반)
    =========================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-base: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;
    --spacing-4xl: 64px;

    /* ===========================
       Component Sizes
    =========================== */
    /* Button Heights */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;

    /* Input/Select Heights */
    --input-height-sm: 36px;
    --input-height-md: 38px;
    --input-height-lg: 48px;
    --input-height-xl: 56px;

    /* Table Row Heights */
    --table-header-height: 48px;
    --table-row-height: 56px;

    /* Checkbox/Radio Sizes */
    --checkbox-size-sm: 18px;
    --checkbox-size-md: 20px;
    --checkbox-size-lg: 36px;

    /* ===========================
       Border Radius
    =========================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* ===========================
       Z-Index Layers
    =========================== */
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 100;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-popover: 1002;
    --z-tooltip: 1003;
}