/* base/_variables.css */
/* 전역 변수 정의 */

:root {
    /* 색상 변수 */
    --color-primary: #3B82F6;            /* 주요 브랜드 색상 */
    --color-primary-rgb: 59, 130, 246;   /* RGB 형식의 주요 색상 */
    --color-primary-dark: #2563EB;       /* 주요 색상의 어두운 버전 */
    --color-primary-dark-rgb: 37, 99, 235; /* RGB 형식의 어두운 주요 색상 */
    --color-secondary: #10B981;          /* 보조 색상 */
    --color-secondary-rgb: 16, 185, 129; /* RGB 형식의 보조 색상 */
    --color-success: #10B981;            /* 성공 상태 색상 */
    --color-success-rgb: 16, 185, 129;   /* RGB 형식의 성공 색상 */
    --color-warning: #F59E0B;            /* 경고 상태 색상 */
    --color-warning-rgb: 245, 158, 11;   /* RGB 형식의 경고 색상 */
    --color-error: #EF4444;              /* 오류 상태 색상 */
    --color-error-rgb: 239, 68, 68;      /* RGB 형식의 오류 색상 */
    --color-info: #3B82F6;               /* 정보 상태 색상 */
    --color-info-rgb: 59, 130, 246;      /* RGB 형식의 정보 색상 */

    /* 텍스트 색상 */
    --color-text-dark: #1F2937;          /* 주요 텍스트 */
    --color-text-dark-rgb: 31, 41, 55;   /* RGB 형식의 주요 텍스트 */
    --color-text-medium: #4B5563;        /* 중요도가 낮은 텍스트 */
    --color-text-medium-rgb: 75, 85, 99; /* RGB 형식의 중요도가 낮은 텍스트 */
    --color-text-light: #6B7280;         /* 가장 중요도가 낮은 텍스트 */
    --color-text-light-rgb: 107, 114, 128; /* RGB 형식의 가장 중요도가 낮은 텍스트 */
    
    /* 배경 색상 */
    --color-background: #F3F4F6;         /* 페이지 배경 */
    --color-background-rgb: 243, 244, 246; /* RGB 형식의 페이지 배경 */
    --color-white: #FFFFFF;              /* 흰색 */
    --color-white-rgb: 255, 255, 255;    /* RGB 형식의 흰색 */
    --color-border: #E5E7EB;             /* 테두리 */
    --color-border-rgb: 229, 231, 235;   /* RGB 형식의 테두리 */

    /* 그림자 */
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.05);       /* 약한 그림자 */
    --shadow-medium: 0 15px 35px rgba(0, 0, 0, 0.08);     /* 중간 그림자 */
    --shadow-large: 0 20px 45px rgba(0, 0, 0, 0.1);       /* 강한 그림자 */

    /* 테두리 반경 */
    --border-radius-sm: 6px;             /* 작은 모서리 */
    --border-radius: 12px;               /* 기본 모서리 */
    --border-radius-lg: 16px;            /* 큰 모서리 */
    --border-radius-full: 9999px;        /* 원형 모서리 */

    /* 간격 */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */
    --space-24: 6rem;    /* 96px */

    /* 폰트 스택 */
    --font-family: 'Figtree', sans-serif;

    /* 폰트 크기 */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */

    /* 폰트 가중치 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* 줄 높이 */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 2;

    /* 전환 효과 */
    --transition: all 0.3s ease;

    /* Z-인덱스 레벨 */
    --z-index-dropdown: 10;
    --z-index-sticky: 20;
    --z-index-fixed: 30;
    --z-index-modal-backdrop: 40;
    --z-index-modal: 50;
    --z-index-popover: 60;
    --z-index-tooltip: 70;

    /* 컨테이너 너비 */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
}