/* ============================================================
   디자인 토큰 — CSS 커스텀 프로퍼티
   모든 색상·간격·폰트는 여기서 관리
   ============================================================ */

:root {
    /* ---- 브랜드 컬러 ---- */
    --color-primary:        #FF3B30;   /* 메인 레드 */
    --color-primary-dark:   #CC2F26;
    --color-primary-light:  #FF6B63;
    --color-primary-bg:     #FFF5F5;   /* 연한 레드 배경 */

    --color-secondary:      #1A1A2E;   /* 딥 네이비 */
    --color-accent:         #FF6B35;   /* 오렌지 포인트 */

    /* ---- 중립 컬러 ---- */
    --color-white:          #FFFFFF;
    --color-black:          #0D0D0D;

    --color-gray-50:        #FAFAFA;
    --color-gray-100:       #F5F5F5;
    --color-gray-200:       #EEEEEE;
    --color-gray-300:       #E0E0E0;
    --color-gray-400:       #BDBDBD;
    --color-gray-500:       #9E9E9E;
    --color-gray-600:       #757575;
    --color-gray-700:       #616161;
    --color-gray-800:       #424242;
    --color-gray-900:       #212121;

    /* ---- 상태 컬러 ---- */
    --color-success:        #22C55E;
    --color-success-bg:     #F0FDF4;
    --color-warning:        #F59E0B;
    --color-warning-bg:     #FFFBEB;
    --color-error:          #EF4444;
    --color-error-bg:       #FEF2F2;
    --color-info:           #3B82F6;
    --color-info-bg:        #EFF6FF;

    /* ---- 텍스트 ---- */
    --text-primary:         var(--color-gray-900);
    --text-secondary:       var(--color-gray-600);
    --text-muted:           var(--color-gray-400);
    --text-inverse:         var(--color-white);
    --text-link:            var(--color-primary);

    /* ---- 배경 ---- */
    --bg-base:              var(--color-white);
    --bg-subtle:            var(--color-gray-50);
    --bg-muted:             var(--color-gray-100);

    /* ---- 테두리 ---- */
    --border-color:         var(--color-gray-200);
    --border-color-focus:   var(--color-primary);
    --border-radius-sm:     6px;
    --border-radius:        10px;
    --border-radius-lg:     16px;
    --border-radius-xl:     24px;
    --border-radius-full:   9999px;

    /* ---- 폰트 ---- */
    --font-family:          'Pretendard', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', 'Apple SD Gothic Neo', 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-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-relaxed:  1.75;

    /* ---- 간격 ---- */
    --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 */

    /* ---- 레이아웃 ---- */
    --container-max:        1320px;
    --header-height:        64px;
    --header-height-mobile: 56px;

    /* ---- 그림자 ---- */
    --shadow-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow:       0 4px 12px rgba(0,0,0,.08);
    --shadow-md:    0 8px 24px rgba(0,0,0,.10);
    --shadow-lg:    0 16px 40px rgba(0,0,0,.12);
    --shadow-xl:    0 24px 64px rgba(0,0,0,.14);

    /* ---- 전환 ---- */
    --transition-fast:   150ms ease;
    --transition:        250ms ease;
    --transition-slow:   400ms ease;

    /* ---- z-index ---- */
    --z-header:   100;
    --z-drawer:   200;
    --z-overlay:  190;
    --z-modal:    300;
    --z-toast:    400;
}

/* 다크모드 (추후 확장 가능) */
@media (prefers-color-scheme: dark) {
    :root {
        /* 필요 시 토큰 오버라이드 */
    }
}