/*
 * ===================================
 * UTKThemeLight.uss
 * 라이트 테마 색상 변수 정의
 * ===================================
 *
 * 이 파일은 라이트 테마의 모든 색상 변수를 정의합니다.
 * 테마 전환 시 UTKThemeDark.uss를 이 파일로 교체합니다.
 *
 * 라이트 테마에서는 base 색상 순서가 반전됩니다:
 * - 배경: 밝은 색상 (base-01 ~ base-05)
 * - 텍스트: 어두운 색상 (base-16 ~ base-21)
 */

* {
    /* ===================================
       Base Colors (color-base-*)
       그레이스케일 팔레트 (밝음 -> 어두움)
       =================================== */
    --color-base-01: #FFFFFF;
    --color-base-02: #F8F8F8;
    --color-base-03: #F0F0F0;
    --color-base-04: #E8E8E8;
    --color-base-05: #E0E0E0;
    --color-base-06: #D0D0D0;
    --color-base-07: #C0C0C0;
    --color-base-08: #A0A0A0;
    --color-base-09: #808080;
    --color-base-10: #707070;
    --color-base-11: #606060;
    --color-base-12: #505050;
    --color-base-13: #404040;
    --color-base-14: #353535;
    --color-base-15: #303030;
    --color-base-16: #282828;
    --color-base-17: #222222;
    --color-base-18: #1C1C1C;
    --color-base-19: #161616;
    --color-base-20: #101010;
    --color-base-21: #000000;

    /* ===================================
       Accent Colors - Blue (color-blue-*)
       라이트 테마에서는 검정 텍스트가 잘 보이도록 밝은 톤 사용
       =================================== */
    --color-blue-01: #DCEEFB;
    --color-blue-02: #B3D7F5;
    --color-blue-03: #8AC0EF;
    --color-blue-04: #62A8E8;
    --color-blue-05: #3A90E0;
    --color-blue-06: #2979C9;
    --color-blue-07: #1A66B3;
    --color-blue-08: #0D539C;
    --color-blue-09: #044185;
    --color-blue-10: #00306E;
    --color-blue-11: #002057;

    /* ===================================
       Accent Colors - Red (color-red-*)
       =================================== */
    --color-red-01: #F5A3A3;
    --color-red-02: #EF7B7B;
    --color-red-03: #F28C8C;
    --color-red-04: #E86A6A;
    --color-red-05: #F14C4C;
    --color-red-06: #C74E39;
    --color-red-07: #FF0000;
    --color-red-08: #782626;

    /* ===================================
       Accent Colors - Green (color-green-*)
       =================================== */
    --color-green-01: #A5D6A7;
    --color-green-02: #81C784;
    --color-green-03: #66BB6A;
    --color-green-04: #B8E6B9;
    --color-green-05: #98D99A;

    /* ===================================
       Accent Colors - Purple (color-purple-*)
       =================================== */
    --color-purple-01: #CE93D8;
    --color-purple-02: #BA68C8;
    --color-purple-03: #D1A3DB;
    --color-purple-04: #C280CE;

    /* ===================================
       Accent Colors - Yellow (color-yellow-*)
       =================================== */
    --color-yellow-01: #FFE082;
    --color-yellow-02: #FFD54F;
    --color-yellow-03: #FFCA28;
    --color-yellow-04: #FFC107;
    --color-yellow-05: #FFF176;

    /* ===================================
       Accent Colors - Orange (color-orange-*)
       =================================== */
    --color-orange-01: #FFAB91;
    --color-orange-02: #FF9A76;
    --color-orange-03: #FFB74D;

    /* ===================================
       Gray Colors (color-gray-*)
       =================================== */
    --color-gray-01: #424242;
    --color-gray-02: #757575;
    --color-gray-03: #9E9E9E;

    /* ===================================
       Seti Colors (color-seti-*)
       =================================== */
    --color-seti-blue: #64B5F6;
    --color-seti-green: #AED581;
    --color-seti-orange: #FFAB91;
    --color-seti-pink: #F48FB1;
    --color-seti-red: #EF9A9A;
    --color-seti-steel: #90A4AE;
    --color-seti-yellow: #FFE082;
    --color-seti-purple: #CE93D8;
    --color-seti-ignore: #B0BEC5;
    --color-seti-white: #ECEFF1;
    --color-seti-gray: #90A4AE;

    /* ===================================
       Semantic Colors - Text (color-text-*)
       라이트 테마에서는 어두운 텍스트 사용
       =================================== */
    --color-text-primary: var(--color-base-17);
    --color-text-secondary: var(--color-base-12);
    --color-text-disabled: var(--color-base-08);
    --color-text-placeholder: var(--color-base-09);
    --color-text-inverse: var(--color-base-01);
    --color-text-on-inverse: var(--color-base-02);
    --color-text-on-primary: var(--color-base-18);

    /* ===================================
       Semantic Colors - Background (color-bg-*)
       라이트 테마에서는 밝은 배경 사용
       =================================== */
    --color-bg-base: var(--color-base-01);
    --color-bg-primary: var(--color-base-01);
    --color-bg-secondary: var(--color-base-03);
    --color-bg-tertiary: var(--color-base-06);
    --color-bg-elevated: var(--color-base-02);
    --color-bg-modal: var(--color-base-02);
    --color-bg-panel: var(--color-base-01);
    --color-bg-input: var(--color-base-01);
    --color-bg-hover: var(--color-base-04);
    --color-bg-active: var(--color-base-05);
    --color-bg-tooltip: rgba(50, 50, 50, 0.95);
    --color-bg-overlay: rgba(0, 0, 0, 0.3);

    /* ===================================
       Semantic Colors - Border (color-border-*)
       =================================== */
    --color-border: var(--color-base-05);
    --color-border-light: var(--color-base-04);
    --color-border-focus: var(--color-blue-02);
    --color-border-error: var(--color-red-01);

    /* ===================================
       Semantic Colors - Button (color-btn-*)
       =================================== */
    --color-btn-normal: var(--color-base-04);
    --color-btn-hover: var(--color-base-05);
    --color-btn-pressed: var(--color-base-06);
    --color-btn-disabled: var(--color-base-03);
    --color-btn-primary: var(--color-blue-03);
    --color-btn-primary-hover: var(--color-blue-04);
    --color-btn-secondary: var(--color-base-05);
    --color-btn-secondary-hover: var(--color-base-06);

    /* ===================================
       Semantic Colors - Calendar (color-calendar-*)
       =================================== */
    --color-calendar-sunday: var(--color-red-05);
    --color-calendar-saturday: var(--color-blue-05);
    --color-calendar-today: var(--color-green-02);
    --color-calendar-selected: var(--color-blue-02);
    --color-calendar-range: var(--color-blue-02);
    --color-calendar-range-hover: var(--color-blue-03);

    /* ===================================
       Semantic Colors - Primary (color-primary-*)
       =================================== */
    --color-primary: var(--color-blue-05);
    --color-primary-hover: var(--color-blue-06);
    --color-primary-active: var(--color-blue-07);

    /* ===================================
       Semantic Colors - State (color-state-*)
       =================================== */
    --color-state-success: var(--color-green-02);
    --color-state-warning: var(--color-orange-02);
    --color-state-error: var(--color-red-03);
    --color-state-info: var(--color-blue-04);

    /* ===================================
       Semantic Colors - Vector (color-vector-*)
       =================================== */
    --color-vector-x: rgba(239, 130, 130, 1);
    --color-vector-y: rgba(130, 210, 130, 1);
    --color-vector-z: rgba(130, 150, 239, 1);

    /* ===================================
       Semantic Colors - Scrollbar (color-scroller-*)
       =================================== */
    --color-scroller-dragger-normal: var(--color-base-07);
    --color-scroller-dragger-hover: var(--color-base-09);
    --color-scroller-dragger-active: var(--color-base-10);
    --color-scroller-tracker-normal: rgba(0, 0, 0, 0);
    --color-scroller-tracker-hover: rgba(0, 0, 0, 0.05);

    /* ===================================
       Semantic Colors - Drag Ghost (color-drag-*)
       =================================== */
    --color-drag-ghost-bg: rgba(255, 255, 255, 0.95);

    /* ===================================
       Semantic Colors - Collection (color-collection-*)
       =================================== */
    --color-collection-item: rgba(255, 255, 255, 0);
    --color-collection-item-hover: var(--color-base-04);
    --color-collection-item-selected: var(--color-blue-04);
    --color-collection-item-selected-hover: var(--color-blue-05);
    
   /* ===================================
       Semantic Colors - Tree Checkmark (color-tree-checkmark-*)
       =================================== */
    --color-tree-checkmark: var(--color-text-secondary);
    --color-tree-checkmark-hover: var(--color-text-primary);
}