/* =========================================
   [COLOR PALETTE] 6-Archetype System
   (User Defined Brand Colors)
   ========================================= */

:root {
    /* 1. Pioneer (Red) - Rose 600 */
    --color-red: #E11D48;
    --bg-red-light: #FFE4E6; /* Rose 100 */

    /* 2. Analyst (Blue) - Blue 500 */
    --color-blue: #3B82F6;
    --bg-blue-light: #DBEAFE; /* Blue 100 */

    /* 3. Partner (Yellow) - Yellow 700 (Darker for text visibility) */
    --color-yellow: #CA8A04;
    --bg-yellow-light: #FEF9C3; /* Yellow 100 */

    /* 4. Creator (Green) - Emerald 500 */
    --color-green: #10B981;
    --bg-green-light: #D1FAE5; /* Emerald 100 */

    /* 5. Operator (Gray) - Cool Gray 500 (Auto-filled) */
    --color-gray: #6B7280;
    --bg-gray-light: #F3F4F6; /* Gray 100 */

    /* 6. Maker (Orange) - Orange 600 (Unified) */
    --color-orange: #EA580C;
    --bg-orange-light: #FFEDD5; /* Orange 100 */
}

/* --- [Utility Classes for JS Mapping] --- */

/* (1) Backgrounds (뱃지, 그래프 채우기) */
.bg-red    { background-color: var(--color-red) !important; color: white !important; }
.bg-blue   { background-color: var(--color-blue) !important; color: white !important; }
.bg-yellow { background-color: var(--color-yellow) !important; color: white !important; }
.bg-green  { background-color: var(--color-green) !important; color: white !important; }
.bg-gray   { background-color: var(--color-gray) !important; color: white !important; }
.bg-orange { background-color: var(--color-orange) !important; color: white !important; }

/* (2) Text Colors (타이틀, 포인트 텍스트) */
.text-red    { color: var(--color-red) !important; }
.text-blue   { color: var(--color-blue) !important; }
.text-yellow { color: var(--color-yellow) !important; }
.text-green  { color: var(--color-green) !important; }
.text-gray   { color: var(--color-gray) !important; }
.text-orange { color: var(--color-orange) !important; }

/* (3) Borders (카드 테두리) */
.border-red    { border-color: var(--color-red) !important; }
.border-blue   { border-color: var(--color-blue) !important; }
.border-yellow { border-color: var(--color-yellow) !important; }
.border-green  { border-color: var(--color-green) !important; }
.border-gray   { border-color: var(--color-gray) !important; }
.border-orange { border-color: var(--color-orange) !important; }

/* (4) Theme Light Backgrounds (카드 배경, 박스 배경) */
.theme-red-bg    { background-color: var(--bg-red-light); color: var(--color-red); border-color: var(--color-red); }
.theme-blue-bg   { background-color: var(--bg-blue-light); color: var(--color-blue); border-color: var(--color-blue); }
.theme-yellow-bg { background-color: var(--bg-yellow-light); color: var(--color-yellow); border-color: var(--color-yellow); }
.theme-green-bg  { background-color: var(--bg-green-light); color: var(--color-green); border-color: var(--color-green); }
.theme-gray-bg   { background-color: var(--bg-gray-light); color: var(--color-gray); border-color: var(--color-gray); }
.theme-orange-bg { background-color: var(--bg-orange-light); color: var(--color-orange); border-color: var(--color-orange); }

/* (5) Tags (구름 태그용) */
.tag-red    { border: 1px solid var(--color-red); color: var(--color-red); background: #fff; }
.tag-blue   { border: 1px solid var(--color-blue); color: var(--color-blue); background: #fff; }
.tag-yellow { border: 1px solid var(--color-yellow); color: var(--color-yellow); background: #fff; }
.tag-green  { border: 1px solid var(--color-green); color: var(--color-green); background: #fff; }
.tag-gray   { border: 1px solid var(--color-gray); color: var(--color-gray); background: #fff; }
.tag-orange { border: 1px solid var(--color-orange); color: var(--color-orange); background: #fff; }