/**
 * Spacing System
 *
 * Phase 1.5: Spacing 변수화
 * 작성일: 2025-10-24
 * 업데이트: 2025-12-08 (Phase 3.1: rem 통일 및 정리)
 *
 * 원칙: 4px (0.25rem) 기반 스케일
 * - 모든 값은 rem 단위 사용 (접근성/확장성)
 * - px는 1px 테두리 등 특수 경우만 사용
 */

:root {
    /* ========================================
       Core Spacing Scale (4px 기반)
       ======================================== */
    --space-0: 0;
    --space-0-5: 0.125rem; /* 2px */
    --space-0-75: 0.1875rem; /* 3px */
    --space-1: 0.25rem;    /* 4px */
    --space-1-5: 0.375rem; /* 6px */
    --space-2: 0.5rem;     /* 8px */
    --space-2-5: 0.625rem; /* 10px */
    --space-3: 0.75rem;    /* 12px */
    --space-3-5: 0.875rem; /* 14px */
    --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-24: 6rem;      /* 96px */

    /* ========================================
       Compound Padding Patterns → density.css로 이관됨
       DS 1.0: primitives (여기) → semantics (density.css) → components
       --padding-* 토큰은 density.css에서 --density-* 원자를 참조하여 정의됨.
       ======================================== */

    /* ========================================
       Gap Values (Flexbox/Grid용)
       ======================================== */
    --gap-xs: var(--space-1);   /* 4px */
    --gap-sm: var(--space-2);   /* 8px */
    --gap-lg: var(--space-4);   /* 16px */

    /* ========================================
       Skeleton & Deferred Render Tokens
       ======================================== */
    --skeleton-row-height: 3.5rem;            /* 56px */
    --skeleton-avatar-size: 2.5rem;           /* 40px */
    --skeleton-line-height: 0.75rem;          /* 12px */
    --skeleton-gap: 0.75rem;                  /* 12px */
    --skeleton-row-shell-max-width: 28rem;    /* 448px */
    --skeleton-bar-min-height: 3rem;          /* 48px */
    --skeleton-card-min-height: 6rem;         /* 96px */
    --deferred-section-intrinsic-size: 42rem; /* 672px */

}