/*除 Border 可用 px 外，
    其他的 長度單位均用 rem 表示，
    字體大小單位 均用 pt 表示
    public used for other css file.
*/
:root {
    /*#region icon url*/
    --root-nav-toggle-icon: url('../images/down-blue-one-24x24.png');
    /*--root-icon-url: url('../images/ruentex-logo-construct-16.png');*/
    /*--root-main-icon-url: url('../images/Construction_top.jpg');*/
    --root-nav-function-icon: url('../images/go.png');
    --root-nav-logout-icon: url('../images/button-black-24x24.png');
    /*#endregion*/
    /*#region 字體*/
    --root-font-name: 'Microsoft YaHei',Arial, PMingLiU-ExtB, -apple-system, BlinkMacSystemFont,"Apple Color Emoji"; /*預設字型：新細明體 */
    --root-system-font-name: "DFKai-SB","STKaiti"; /*系統名稱字型：標楷體*/
    --root-title-font-name: 'Microsoft YaHei'; /*標題字型：Microsoft NeoGothic, Microsoft YaHei*/
    --root-appname-font-name: 'Microsoft YaHei',DFKai-SB; /*功能名稱字型：雅黑體*/
    --root-btn-font-name: 'Microsoft JhengHei'; /*按鈕 文字 字型：微軟正黑體 */
    /*#endregion*/
    /*#region 字體大小*/
    --root-font-size-largest: 24pt; /*超大型的文字*/
    --root-font-size-large: 20pt; /*大型的文字*/
    --root-font-size-medium: 16pt; /*中型的文字*/
    --root-font-size-larger: 14pt; /*較一般大一點的文字*/
    --root-font-size: 12pt; /*一般大小的文字*/
    --root-font-size-small: 10pt; /*小的文字*/
    --root-font-size-smallest: 8pt; /*最小的文字*/
    /*#endregion*/
    /*#region 字體粗細*/
    --root-font-weight: normal;
    --root-system-font-weight: bold; /*系統名稱 文字粗細*/
    --root-title-font-weight: var(--root-font-weight); /*標題 文字粗細*/
    --root-btn-font-weight: var(--root-font-weight); /*按鈕 文字 粗細 */
    /*#endregion*/
    /*#region 陰影*/
    --root-text-shadow: 0.05rem 0.05rem 0.15rem var(--root-text-shadow-color); /*文字陰影*/
    --root-text-shadow-medium: 0.15rem 0.15rem 0.3rem var(--root-text-shadow-color); /*中型 文字陰影*/
    --root-text-shadow-large: 0.2rem 0.2rem 0.4rem var(--root-text-shadow-color); /*大型 文字陰影*/
    --root-box-shadow: 0.05rem 0.05rem 0.15rem var(--root-box-shadow-color); /*區塊陰影*/
    --root-box-shadow-medium: 0.15rem 0.15rem 0.3rem var(--root-box-shadow-color); /*中型 區塊陰影*/
    --root-box-shadow-large: 0.2rem 0.2rem 0.4rem var(--root-box-shadow-color); /*大型 區塊陰影*/
    /*#endregion*/
    /*#region 外框*/
    --root-border: 1px outset var(--root-border-color); /*預設 外框*/
    --root-border-large: 2px outset var(--root-border-color); /*大型 外框*/
    --root-border-radius: 0.25rem; /*外框邊角弧度*/
    --root-border-radius-large: 0.5rem; /*大型 外框邊角弧度*/
    --root-box-border: 0.1rem groove var(--root-box-border-color); /*區塊外框*/
    --root-btn-border-width: 2px; /*按鈕 外框 寬度 (使用px表示)*/
    --root-btn-border-style: outset; /*按鈕 外框樣式*/
    --root-btn-border: var(--root-btn-border-width) var(--root-btn-border-style) var(--root-btn-border-color); /*按鈕 外框*/
    /*#endregion*/
    /*#region 顏色，僅使用 --color-used 開頭的顏色*/
    /*background color*/
    --root-back-color: var(--color-used-yellow-light); /*預設 底色*/
    --root-badge-back-color: var(--color-used-blue-deep); /*badge 底色*/
    --root-badge-query-back-color: var(--color-used-blue); /*badge 底色*/
    --root-must-input-back-color: var(--color-used-red); /*必須需入的控項標題 底色*/
    --root-must-input-one-back-color: var(--color-used-yellow); /*必須選擇其一輸入的 底色*/
    --root-remark-back-color: var(--color-used-yellow); /*備註 底色*/
    --root-disabled-back-color: #ececec; /*disabled 控項 底色*/
    --root-enabled-back-color: var(--root-back-color); /*enabled 控項 底色*/
    --root-icon-back-color: white; /*系統 icon 底色*/
    --root-box-back-color: var(--color-used-blue-boxlight); /*區塊 底色*/
    --root-btn-back-color: var(--color-used-blue-deep); /*按鈕 底色*/
    /*--root-btn-back-img: var(--color-used-blue-gradient-deep);*/
    --root-btn-hover-back-img: var(--color-used-blue-gradient);
    --root-btn-active-back-img: var(--color-used-blue-gradient-reverse);
    --root-btn-hover-back-color: var(--color-used-blue-deep); /*按鈕 Hover 字色*/
    --root-nav-back-color: var(--color-used-blue); /*功能選單 背景色*/
    --root-nav-hover-back-color: var(--color-used-blue-light); /*功能選單 Hover 背景色*/
    --root-nav-box-shadow-color: var(--root-box-shadow-color); /*功能選單 陰影色*/
    --root-nav-sub-back-color: var(--color-used-blue-deep); /*功能子選單 背景色*/
    --root-nav-sub-hover-back-color: var(--root-nav-hover-back-color); /*功能子選單 Hover 背景色*/
    --root-date-back-color: var(--color-used-blue-back-color); /*日期 背景色*/
    /*shadow color*/
    --root-text-shadow-color: rgba(0, 0, 0, 0.7); /*字陰影色 透明黑*/
    --root-box-shadow-color: rgba(0, 0, 0, 0.5); /*區塊陰影色 透明黑*/
    /*text color*/
    --root-text-color: var(--color-used-blue-text-color); /*預設 字色*/
    --root-label-text-color: var(--color-used-blue-label-text-color); /*label 字色*/
    --root-disabled-text-color: black; /*disabled 控項 字色*/
    --root-enabled-text-color: var(--root-text-color); /*enabled 控項 字色*/
    --root-warn-text-color: var(--color-used-red-deep); /*警告訊息 字色*/
    --root-btn-text-color: var(--color-used-yellow-light); /*按鈕 Hover 字色*/
    --root-btn-hover-text-color: var(--color-used-yellow-deep); /*按鈕 Hover 字色*/
    --root-nav-text-color: var(--root-btn-text-color); /*功能選單 字色*/
    --root-nav-hover-text-color: var(--root-btn-hover-text-color); /*功能選單 Hover 字色*/
    --root-nav-sub-text-color: var(--root-nav-text-color); /*功能子選單 字色*/
    --root-nav-sub-hover-text-color: var(--root-nav-hover-text-color); /*功能子選單 Hover 字色*/
    --root-program-text-color: var(--color-used-yellow-deep); /*功能名稱 字色*/
    --root-user-info-text-color: var(--color-used-blue-text-color-light); /*使用者資料 字色*/
    --root-hyperlink-color: var(--color-used-blue-hyperlink); /*超連結字色*/
    --root-hyperlink-visited-color: var(--color-used-blue-hyperlink-visited); /*超連結 點過 字色*/
    /*border color*/
    --root-border-color: darkgrey; /*外框色 透明黑*/
    --root-box-border-color: var(--color-used-blue); /*區塊 外框色*/
    --root-btn-border-color: rgba(255, 255, 255, 0.2); /*按鈕 外框 顏色 透明白*/
    /*#endregion*/
    /*#region 文字間距*/
    --root-letter-spacing-small: 0.05rem; /*文字間距*/
    --root-letter-spacing: 0.125rem; /*文字間距*/
    --root-letter-spacing-medium: 0.25rem; /*文字間距*/
    --root-letter-spacing-large: 0.5rem; /*文字間距*/
    --root-word-spacing: 0.5rem; /*空白字字寬*/
    --root-data-letter-spacing: var(--root-letter-spacing-small); /*文字間距*/
    --root-data-word-spacing: var(--root-word-spacing); /*空白字字寬*/
    --root-nav-letter-spacing: var(--root-letter-spacing-medium); /*文字間距*/
    --root-nav-word-spacing: var(--root-word-spacing); /*空白字字寬*/
    /*#endregion*/
    /*#region 間距*/
    --root-length-larger: 1.5rem; /*較大的 長度*/
    --root-length-large: 1rem; /*大的 長度*/
    --root-length-medium: 0.75rem; /*中的 長度*/
    --root-length: 0.5rem; /*一般 長度*/
    --root-length-smaller: 0.375rem; /*較小的 長度*/
    --root-length-small: 0.25rem; /*小的 長度*/
    --root-btn-padding: var(--root-length-smaller) var(--root-length-large) var(--root-length-smaller) var(--root-length-large); /*按鈕 內縮距離*/
    --root-btn-padding-large: var(--root-length) var(--root-length-larger) var(--root-length) var(--root-length-larger); /*大型 按鈕 內縮距離*/
    --root-nav-title-margin: 2rem; /*nav 功能選單標題 距離*/
    --root-icon-text-gap: 0.5rem; /*圖示 與 文字 距離*/
    /*#endregion*/
    /*#region 寬度*/
    --root-control-title-width: 8rem; /*控項標題 寬度*/
    --root-control-title-width-small: 5rem; /*小型 控項標題 寬度*/
    --root-control-width-smallest: 6rem; /*小型 控項 寬度*/
    --root-control-width-small: 10rem; /*小型 控項 寬度*/
    --root-control-width: 15rem; /*控項 寬度*/
    --root-control-width-large: 20rem; /*大型 控項 寬度*/
    --root-btn-width: 6rem; /*按鈕 寬度*/
    /*#endregion*/
    /*#region 高度*/
    --root-textarea-height: 6rem; /*文字區塊 高度*/
    --root-textarea-height-large: 10rem; /*文字區塊 高度*/
    --root-title-line-height: 1.25; /*標題 文字列高倍數*/
    --root-btn-line-height: 1.25; /*按鈕 文字列高倍數*/
    --root-nav-line-height: var(--root-title-line-height); /*瀏覽條列高*/
    --root-nav-item-line-height: 1;
    /*#endregion*/
    /*#region 邊長*/
    --root-checkbox-side-length: 1.25rem; /*checkbox 邊長*/
    --root-icon-side-length: 2rem; /*系統 icon 邊長(正方形)*/
    /*#endregion*/
}