/**
 * ============================================================
 * LAYER 1: FOUNDATION - CSS VARIABLES
 * ============================================================
 *
 * 역할: 전체 프로젝트의 디자인 토큰 정의
 *
 * 포함:
 * - 색상 팔레트 (--color-*, --primary-*)
 * - 간격 시스템 (--spacing-*)
 * - 타이포그래피 (--font-*)
 * - 모서리 반경 (--radius-*)
 * - 그림자 (--shadow-*)
 * - 전환 효과 (--transition-*)
 * - Z-index (--z-*)
 *
 * 출처:
 * - baro-design-system.css (Lines 15-100)
 * - dashboard-styles.css (Lines 2-13)
 *
 * 의존성: 없음 (가장 먼저 로드되어야 함)
 *
 * 새 변수 추가 시:
 * - 색상: :root 색상 섹션에 추가
 * - 간격: :root 간격 섹션에 추가
 * - 일관된 명명 규칙 유지 (--{category}-{name})
 *
 * Last Updated: 2025-11-05
 * ============================================================
 */

:root {
    /* ========================================
       Primary Colors (ba.ro 브랜드)
       ======================================== */
    --primary-color: #D97757;       /* Claude.ai 주황빛 갈색 */
    --primary-hover: #B85C3D;
    --primary-dark: #A44E2E;

    /* ========================================
       Background Colors
       ======================================== */
    --color-bg-primary: #fafafa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5f5f5;
    --color-bg-hover: #f0f0f0;
    --secondary-color: #f8f9fa;     /* Legacy 호환 */

    /* ========================================
       Text Colors
       ======================================== */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666666;
    --color-text-tertiary: #999999;
    --color-text-disabled: #d4d4d4;
    --text-color: #333;              /* Legacy 호환 */
    --light-text: #666;              /* Legacy 호환 */

    /* ========================================
       Border Colors
       ======================================== */
    --color-border-light: #f0f0f0;
    --color-border-medium: #e5e5e5;
    --color-border-dark: #a3a3a3;
    --border-color: #e0e0e0;        /* Legacy 호환 */

    /* ========================================
       Accent Colors (Success, Warning, Danger)
       ======================================== */
    --color-accent-black: #1a1a1a;

    --color-accent-success: #166534;
    --color-accent-success-bg: #f0fdf4;
    --color-accent-success-border: #bbf7d0;
    --success-color: #2ecc71;       /* Legacy 호환 */

    --color-accent-warning: #92400e;
    --color-accent-warning-bg: #fef3c7;
    --color-accent-warning-border: #fde68a;
    --warning-color: #f39c12;       /* Legacy 호환 */

    --color-accent-danger: #dc2626;
    --color-accent-danger-bg: #fef2f2;
    --color-accent-danger-border: #fecaca;
    --danger-color: #e74c3c;        /* Legacy 호환 */

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

    /* ========================================
       Typography
       ======================================== */
    --font-family: 'SUIT', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;

    /* Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;

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

    /* Line Heights */
    --line-height-tight: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

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

    /* ========================================
       Shadows
       ======================================== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);

    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ========================================
       Z-index
       ======================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 1000;
    --z-modal: 1001;
    --z-notification: 10000;
}