:root {
    --color-primary: #B88A43;
    --color-primary-dark: #936E36;
    --color-primary-800: #C6A169;
    --color-primary-600: #D4B98E;
    --color-primary-400: #E3D0B4;
    --color-primary-200: #EDE3D3;
    --color-primary-light: #F8F3EC;
    --color-secondary: #253A44;
    /*飯店用色*/
    --color-secondary-dark: #152126;
    --color-secondary-800: #425862;
    --color-secondary-600: #607580;
    --color-secondary-400: #819199;
    --color-secondary-200: #9FABB2;
    --color-secondary-light: #C5D0D6;
    --color-danger: #C93E3E;
    --color-danger-400: #DE8585;
    --color-danger-200: #EDBBBB;
    --color-danger-light: #F7E6E6;
    --color-success: #55B843;
    --color-success-200: #96D98B;
    --color-success-light: #CFF2C9;
    --color-warning: #E39836;
    --color-warning-200: #E8C08B;
    --color-warning-light: #f5eadc;
    --color-info: #4383B8;
    --color-info-200: #8EBADE;
    --color-info-light: #C9E0F2;
    --color-gray-900: #242222;
    --color-gray-800: #3E3A39;
    /*飯店用色*/
    --color-gray-700: #5A5249;
    --color-gray-600: #71665B;
    /*飯店用色*/
    --color-gray-500: #8C847B;
    --color-gray-400: #A8A19A;
    --color-gray-300: #CCC7C0;
    --color-gray-200: #DFDCD9;
    --color-gray-light: #f4f2f0;
    --color-white: #fff;
    --color-black: #000;
    --color-body: var(--color-gray-light);
    /* btn */
    --color-btn-primary-bg: var(--color-primary);
    --color-btn-primary-outline: var(--color-primary);
    --color-btn-primary-font: var(--color-white);
    --color-btn-primary-bg-hover: var(--color-primary-dark);
    --color-btn-primary-outline-hover: var(--color-primary-dark);
    --color-btn-primary-bg-disabled: var(--color-gray-400);
    --color-btn-primary-outline-disabled: var(--color-gray-400);
    --color-btn-primary-font-disabled: var(--color-white);
    --color-btn-secondary-bg: var(--color-white);
    --color-btn-secondary-outline: var(--color-primary);
    --color-btn-secondary-font: var(--color-primary);
    --color-btn-secondary-bg-hover: var(--color-white);
    --color-btn-secondary-outline-hover: var(--color-primary-dark);
    --color-btn-secondary-font-hover: var(--color-primary-dark);
    --color-btn-secondary-bg-disabled: var(--color-gray-400);
    --color-btn-secondary-outline-disabled: var(--color-gray-400);
    --color-btn-secondary-font-disabled: var(--color-white);
    --color-btn-third-bg: var(--color-white);
    --color-btn-third-outline: var(--color-gray-400);
    --color-btn-third-font: var(--color-gray-800);
    --color-btn-third-bg-hover: var(--color-white);
    --color-btn-third-outline-hover: var(--color-gray-700);
    --color-btn-third-bg-disabled: var(--color-gray-200);
    --color-btn-third-outline-disabled: var(--color-gray-400);
    --color-btn-third-font-disabled: var(--color-gray-400);
    /* font */
    --color-title: var(--color-black);
    --color-font: #000;
    --color-font-secondary: var(--color-gray-800);
    --color-font-third: var(--color-gray-500);
    /* border*/
    --color-border: var(--color-gray-200);
    /* border 深色模式 800 淺色模式 300 
     hover 深色模式 black 淺色模式 light*/
    --color-body-hover: var(--color-gray-light);
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);
    --color-link-disable: var(--color-gray-600);
    --color-btn-counter: var(--color-primary);
    --color-btn-counter-hover: var(--color-primary-dark);
    --color-btn-counter-disable: var(--color-gray-500);
    /* header */
    --color-header-bg: #fff;
    --color-header-bg-hover: var(--color-gray-light);
    --color-header-text: var(--color-gray-800);
    --color-header-border-bottom: none;
    /* footer */
    --color-footer-bg: var(--color-gray-800);
    --color-footer-text: var(--color-white);
    --color-footer-border: none;
    --color-footer-border-secondary: var(--color-gray-600);
    /* icon */
    --color-icon: var(--color-gray-800);
    /* card */
    --color-card-bg: var(--color-white);
    --color-card-font: var(--color-black);
    --color-card-font-secondary: var(--color-gray-800);
    --color-card-font-third: var(--color-gray-600);
    --color-card-hover: var(--color-gray-light);
    --color-card-highlight: var(--color-gray-light);
    /* search panel */
    --color-search-panel: var(--color-gray-900);
    --color-search-panel-border: none;
    --color-search-panel-unselect: var(--color-gray-500);
    --color-search-panel-font: var(--color-white);
    --color-search-panel-label: var(--color-white);
    --color-search-panel-form-control: var(--color-white);
    --color-search-panel-form-control-font: var(--color-black);
    --color-search-panel-form-control-border: none;
    --color-search-panel-icon: var(--color-gray-900);
    --color-search-panel-icon-bg: var(--color-gray-200);
    --color-search-panel-icon-bg-hover: var(--color-gray-300);
    /* panel-btn */
    --color-panel-btn-bg: var(--color-white);
    --color-panel-btn-font: var(--color-black);
    /* price */
    --color-font-price-amount: var(--color-black);
    --color-font-price-info: var(--color-gray-700);
    --color-font-price-original: var(--color-white);
    --color-label-price-discount: var(--color-white);
    --color-label-price-discount-bg: linear-gradient(to right, #8683BC 0%, #472A8C 100%);
    --color-label-price-discount-angle: #472A8C;
    /* ---------- form-control ---------- */
    --color-form-label: var(--color-black);
    /* default */
    --color-form-control: var(--color-white);
    --color-form-control-font: var(--color-font);
    /* focus */
    --color-form-control-border-focus: var(--color-gray-600);
    /* disable */
    --color-form-control-disable: var(--color-gray-300);
    --color-form-control-border-disable: var(--color-gray-400);
    /* ---------- calendar ---------- */
    --color-calendar-head-bg: var(--color-gray-800);
    --color-calendar-head-font: var(--color-white);
    --color-calendar-head-font-disable: var(--color-gray-600);
    --color-calendar-week-bg: var(--color-white);
    --color-calendar-week-border: var(--color-gray-400);
    --color-calendar-week-font: var(--color-black);
    --color-calendar-day-bg: var(--color-gray-200);
    /* calendar border */
    --color-calendar-date-font: var(--color-black);
    --color-calendar-date-bg: var(--color-white);
    --color-calendar-date-border: var(--color-white);
    --color-calendar-date-availbility-font: var(--color-black);
    --color-calendar-date-rate-font: var(--color-black);
    --color-calendar-date-rate-font-disable: var(--color-gray-700);
    /* 可預訂 avalible */
    --color-calendar-date-bg-avalible: var(--color-white);
    --color-calendar-date-bg-avalible-hover: var(--color-primary-200);
    --color-calendar-date-availbility-font-avalible: var(--color-primary);
    --color-calendar-date-rate-font-avalible: var(--color-black);
    /* 候補訂房 waiting */
    --color-calendar-date-bg-waiting: var(--color-calendar-date-bg);
    --color-calendar-date-bg-waiting-hover: var(--color-primary-200);
    --color-calendar-date-availbility-font-waiting: var(--color-danger);
    --color-calendar-date-rate-font-waiting: var(--color-calendar-date-rate-font);
    /* 已客滿 fully */
    --color-calendar-date-bg-fully: var(--color-gray-light);
    --color-calendar-date-availbility-font-fully: var(--color-gray-300);
    --color-calendar-date-rate-font-fully: var(--color-gray-300);
    /* 不適用 unsuitable */
    --color-calendar-date-bg-unsuitable: var(--color-gray-light);
    --color-calendar-date-availbility-font-unsuitable: var(--color-gray-300);
    --color-calendar-date-rate-font-unsuitable: var(--color-gray-300);
    /* 不在專案效期內 expired */
    --color-calendar-date-bg-expired: var(--color-gray-light);
    --color-calendar-date-availbility-font-expired: var(--color-gray-300);
    --color-calendar-date-rate-font-expired: var(--color-gray-300);
    /* 已過期 before*/
    --color-calendar-date-bg-before: var(--color-gray-light);
    --color-calendar-date-availbility-font-before: var(--color-gray-300);
    /* ---------- shadow ---------- */
    --color-shadow-primary: 0 4px 8px 0 rgba(43, 43, 43, 0.06);
    --color-shadow-secondary: 0 6px 12px 0 rgba(43, 43, 43, 0.1);
}