/* ============================================
   SmartSheet - CSS 변수 (디자인 토큰)
   ============================================ */

:root {
    /* 브랜드 */
    --primary:          #2563eb;
    --primary-hover:    #1d4ed8;
    --primary-light:    #eff6ff;
    --primary-100:      #dbeafe;
    --primary-200:      #bfdbfe;

    /* 상태 */
    --success:          #16a34a;
    --success-light:    #f0fdf4;
    --warning:          #f59e0b;
    --warning-light:    #fffbeb;
    --danger:           #dc2626;
    --danger-light:     #fef2f2;
    --info:             #0891b2;
    --info-light:       #ecfeff;

    /* 중립 */
    --white:            #ffffff;
    --gray-50:          #f8fafc;
    --gray-100:         #f1f5f9;
    --gray-200:         #e2e8f0;
    --gray-300:         #cbd5e1;
    --gray-400:         #94a3b8;
    --gray-500:         #64748b;
    --gray-600:         #475569;
    --gray-700:         #334155;
    --gray-800:         #1e293b;
    --gray-900:         #0f172a;

    /* 배경 */
    --bg-primary:       #ffffff;
    --bg-secondary:     #f8fafc;
    --bg-sidebar:       #1e293b;

    /* 텍스트 */
    --text-primary:     #1e293b;
    --text-secondary:   #64748b;
    --text-muted:       #94a3b8;
    --text-inverse:     #ffffff;

    /* 보더 */
    --border-color:     #e2e8f0;
    --border-focus:     #2563eb;

    /* 그림자 */
    --shadow-sm:        0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:        0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:        0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:        0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

    /* 둥글기 */
    --radius-sm:        4px;
    --radius-md:        8px;
    --radius-lg:        12px;
    --radius-full:      9999px;

    /* 폰트 */
    --font-family:      'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:        'JetBrains Mono', 'Fira Code', monospace;
    --font-size-xs:     11px;
    --font-size-sm:     12px;
    --font-size-md:     13px;
    --font-size-base:   14px;
    --font-size-lg:     16px;
    --font-size-xl:     18px;
    --font-size-2xl:    24px;
    --font-size-3xl:    30px;

    /* 간격 */
    --space-1:          4px;
    --space-2:          8px;
    --space-3:          12px;
    --space-4:          16px;
    --space-5:          20px;
    --space-6:          24px;
    --space-8:          32px;
    --space-10:         40px;
    --space-12:         48px;

    /* 전환 */
    --transition-fast:  150ms ease;
    --transition-base:  200ms ease;
    --transition-slow:  300ms ease;

    /* 레이아웃 */
    --sidebar-width:    260px;
    --topbar-height:    56px;
    --toolbar-height:   44px;
}