﻿/* [L2 Tokens] wego-tokens.css — 전역 디자인 토큰(:root) 단일 출처. (구) wego-plus-sidebar.css 에서 분리. 모든 화면 head 에서 가장 먼저 로드.
   ※ FO/BO 디자인 시스템 공유 파일 — 두 repo 바이트 동일 유지(복사 동기화). 변경 시 반드시 양쪽 함께. 절차: docs/design-system-sync.md / 위계: docs/css-hierarchy.md */

:root {
    --brand-primary:        #EF7620;
    --brand-primary-mid:    #F7944D;
    --brand-primary-light:  #FFF4EC;
    --brand-primary-border: #FDCFA4;
    --brand-primary-dark:   #D96510;
    --brand-danger:         #E1002A;

    --sidebar-bg:           #FFFFFF;
    --sidebar-border:       #E8ECF0;
    --sidebar-hover:        #FFF4EC;
    --sidebar-active-bg:    #FFF4EC;
    --sidebar-active-text:  var(--brand-primary);
    --sidebar-text:         #374151;
    --sidebar-text-bright:  #1A2332;
    --sidebar-icon-active:  var(--brand-primary);
    --sidebar-width:        260px;
    --sidebar-collapsed-w:  88px;
    --sidebar-ease:         cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-transition-duration: 0.28s;
    --sidebar-transition:   width var(--sidebar-transition-duration) var(--sidebar-ease);

    /* 사이드바 메뉴 계층 (1·2·3뎁스 구분) */
    --sidebar-depth1-size:    16px;
    --sidebar-depth1-weight:  600;
    --sidebar-depth2-size:    15px;
    --sidebar-depth2-weight:  500;
    --sidebar-depth3-size:    15px;
    --sidebar-depth3-weight:  400;
    --sidebar-depth3-color:   #374151; /* 2뎁스와 동일 — 가독성 우선, 구분은 크기/굵기 */
    --sidebar-submenu-bg:     #F8FAFC;
    --sidebar-tree-line:      #E2E8F0;
    --sidebar-indent-2:       22px;
    --sidebar-indent-3:       22px;
    --sidebar-bullet-left:    10px;

    --header-border:        #E8ECF0;
    --header-height:        64px;
    --footer-height:        80px;   /* skgas-layout .footer-wrap */
    --footer-content-gap:   20px;  /* 콘텐츠 카드 사이와 푸터 내부 간격 */
    --shell-padding-block:  14px;  /* app-wrapper 하단 padding */

    /* 전역 레이어 순서. 컴포넌트 내부에서만 비교되는 작은 z-index에는 사용하지 않는다. */
    --wego-z-header:               2000;
    --wego-z-dialog-backdrop:      3000;
    --wego-z-dialog:               3001;
    --wego-z-system-dialog:        5000;
    --wego-z-blocking-overlay:     9999;
    --wego-z-floating-control:    10000;
    --wego-z-floating-control-top:10020;
    --wego-z-drawer:              12000;
    --wego-z-progress-overlay:    99990;
    --wego-z-progress:            99991;
    --wego-z-toast:          2147483000;

    --tabbar-bg:            #F5F7FA;
    --tabbar-border:        #E2E8F0;
    --tab-active-bg:        #FFFFFF;
    --tab-active-text:      var(--brand-primary);
    --tab-active-border:    var(--brand-primary);
    --tab-inactive-text:    #6B7A8D;
    --tab-height:           38px;

    --text-primary:         #1A2332;
    --text-secondary:       #374151;
    --text-muted:           #374151;
    --text-light:           #9CA3AF;

    --bg-main:              #EFF3FA;
    --bg-white:             #FFFFFF;
    --bg-hover:             #F8FAFC;

    --border-color:         #E2E8F0;
    --input-border:         #E2E8F0;
    --input-border-hover:   #B8C4D0;
    --input-border-focus:   var(--brand-primary);

    --shadow-sm:            0 1px 3px rgba(0,0,0,0.05);
    --shadow-md:            0 4px 16px rgba(0,0,0,0.06);
    --shadow-card:          0 1px 4px rgba(0,0,0,0.04);
    --shadow-sidebar:       0 4px 24px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);

    --radius-xs:            4px;
    --radius-sm:            6px;
    --radius-md:            10px;
    --radius-lg:            12px;

    --card-padding:         26px 28px;
    --card-border-radius:   var(--radius-lg);

    --btn-height:           32px;
    --btn-padding:          0 14px;
    --btn-font-size:        15px;
    --btn-radius:           var(--radius-sm);

    /* Button semantic (wego-components.css 소비) */
    --btn-primary-bg:           var(--brand-primary);
    --btn-primary-bg-hover:     var(--brand-primary-dark);
    --btn-primary-fg:           var(--bg-white);
    --btn-primary-border:       var(--brand-primary);
    --btn-primary-shadow:       0 2px 6px rgba(239, 118, 32, 0.25);
    --btn-outline-bg:           var(--bg-white);
    --btn-outline-border:       var(--border-color);
    --btn-outline-icon:         var(--brand-primary);
    --btn-outline-hover-bg:     var(--brand-primary-light);
    --btn-outline-hover-border: var(--brand-primary-border);
    --btn-danger-fg:            var(--brand-danger);
    --btn-danger-hover-bg:      #FEF2F2;
    --btn-disabled-opacity:     0.38;
    --btn-disabled-bg:          #F3F5F7;
    --btn-disabled-border:      #E2E8F0;
    --btn-disabled-fg:          #B0BBC8;

    --input-height:         32px;
    --input-padding:        0 10px;
    --input-font-size:      15px;
    --input-radius:         var(--radius-sm);
    --input-bg:             #ffffff;
    --input-bg-focus:       #FFFFFF;
    --input-bg-disabled:    #F3F5F7;
    --input-fg-disabled:    #B0BBC8;
    --input-border-disabled:#E2E8F0;
    --input-focus-ring:     0 0 0 3px rgba(239, 118, 32, 0.08);
    --select-arrow-color:   #374151;
    /* 입력의 최대 가로폭: flex·nowrap td에서 필드 무한 확장·줄바꿈 방지 */
    --input-max-width:          260px;
    --input-max-width-name:     200px;
    --input-max-width-textarea: 520px;
    --input-max-width-select:   260px;

    /* 검색폼 테이블 최소 가로 폭 — 좁은 화면에서 가로 스크롤 유지 (레거시 skgas-bundle 1000px) */
    --src-table-min-width:      1000px;
    /* code+sName+검색버튼 — 320px 필드열 기준 명칭 상한(2·4열 동일, Daterange col4 폭은 유지) */
    --src-search-sname-max:     160px;

    /* Form-type table — af-table-wrapper scoped */
    --form-table-label-bg:          #F5F8FF;
    --form-table-label-fg:          #1A2332;
    --form-table-border:            #DAEAF6;
    --form-table-cell-bg:           #FFFFFF;
    --form-table-hover-bg:          #F8FBFF;
    --form-table-label-font-size:   15px;
    --form-table-label-font-weight: 600;
    --form-table-label-line-height: 1.4;

    --gap-section:          10px;
    --gap-card:             16px;
    --title-breadcrumb-gap:  30px;
    --title-block-bottom-gap: 30px;

    /* 타이포 폰트 스택(국문 폴백 포함). 두 토큰명 모두 제공해 소비처 호환 (--wego-font-sans: FO/shell 계열, --wego-font-family: typography 계열) */
    --wego-font-sans:       'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto,
                            'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
                            'Noto Sans KR', 'Malgun Gothic', sans-serif;
    --wego-font-family:     var(--wego-font-sans);

    /* MO card / surface tokens (mobile-layout, P9) */
    --wego-bg:         #FFFFFF;
    --wego-card:       #ffffff;
    --wego-ink:        #1b1f29;
    --wego-ink-sub:    #625c55;
    --wego-ink-mute:   #9b948d;
    --wego-line:       #e9e1da;
    --wego-field:      #faf7f4;
    --wego-field-line: #e4dad1;
    --wego-hover:      #fff4ec;
    --wego-radius:     12px;
    --wego-radius-sm:  8px;
    --wego-shadow:     0 1px 2px rgba(75,56,38,.04), 0 8px 24px rgba(75,56,38,.06);

    /* MO layout / motion tokens */
    --mobile-header-height: 64px;
    --wego-motion-press-duration: 90ms;
    --wego-motion-release-duration: 170ms;
    --wego-motion-standard-duration: 260ms;
    --wego-motion-press-ease: cubic-bezier(0.2, 0, 0, 1);
    --wego-motion-standard-ease: cubic-bezier(0.4, 0, 0.2, 1);

    --wego-color-red:    #e0312b;
    --wego-color-orange: #ef7d28;
    --wego-color-navy:   #1f2b4d;
    --wego-color-blue:   #2f6f9f;
    --wego-color-ink:    #1b1f29;
    --wego-color-gray:   #6b7280;

    /* MO button tokens */
    --wego-btn-height-sm: 32px;
    --wego-btn-height-md: 40px;
    --wego-btn-height-lg: 48px;
    --wego-btn-height-xl: 52px;
    --wego-btn-padding-sm: 0 10px;
    --wego-btn-padding-md: 0 14px;
    --wego-btn-padding-lg: 0 16px;
    --wego-btn-padding-xl: 0 18px;
    --wego-btn-font-size-sm: 13px;
    --wego-btn-font-size-md: 14px;
    --wego-btn-font-size-lg: 15px;
    --wego-btn-font-size-xl: 15.5px;
    --wego-btn-radius: var(--wego-radius-sm);
    --wego-btn-gap: 8px;
    --wego-btn-focus-ring: 0 0 0 3px rgba(239, 118, 32, .16);
    --wego-btn-press-scale: .98;
    --wego-btn-press-overlay: rgba(239, 118, 32, .16);
    --wego-btn-disabled-opacity: .48;
    --wego-btn-primary: var(--brand-primary);
    --wego-btn-primary-hover: var(--brand-primary-dark);
    --wego-btn-primary-soft: var(--brand-primary-light);
    --wego-btn-primary-border: var(--brand-primary-border);
    --wego-btn-secondary: var(--wego-ink-sub);
    --wego-btn-secondary-hover: #eee7df;
    --wego-btn-secondary-soft: #f5f2ee;
    --wego-btn-secondary-border: #d8cbc0;
    --wego-btn-danger: var(--brand-danger);
    --wego-btn-danger-hover: #B80022;
    --wego-btn-danger-soft: #FFF1F3;
    --wego-btn-danger-border: #F5B8C4;
    --wego-btn-neutral: var(--wego-color-ink);
    --wego-btn-neutral-hover: #111827;
    --wego-btn-neutral-soft: var(--wego-field);
    --wego-btn-neutral-border: var(--wego-field-line);
    --wego-btn-light-bg: var(--wego-field);
    --wego-btn-light-hover-bg: #f1ece7;
    --wego-btn-light-fg: var(--wego-ink);
    --wego-btn-light-border: var(--wego-field-line);
    --wego-icon-btn-size-sm: 32px;
    --wego-icon-btn-size-md: 36px;
    --wego-icon-btn-size-lg: 44px;
    --wego-icon-btn-size-xl: 52px;
    --wego-icon-size-sm: 18px;
    --wego-icon-size-md: 20px;
    --wego-icon-size-lg: 22px;
}
