:root {
  --color-primary: #9C8062;
  --color-primary-dark:#806447;
  --color-primary-800: #B09981;
  --color-primary-600: #C4B3A1;
  --color-primary-400: #D6CCB8;
  --color-primary-200: #EFE8DA;
  --color-primary-light: #F7F3EF;

  --color-danger: #F52D1A;
  --color-danger-400: #F98176;
  --color-danger-200: #FDD5D1;
  --color-danger-light: #FEEAE8;

  --color-success: #1AE81A;
  --color-success-200: #A3F6A3;
  --color-success-light: #D1FAD1;

  --color-warning: #F59A1A;
  --color-warning-200: #FBD7A3;
  --color-warning-light: #FDEBD1;

  --color-info: #1ABEF5;
  --color-info-200: #A3E5FB;
  --color-info-light: #D1F2FD;

  --color-gray-900: #314263;
  --color-gray-800: #4C5F82;
  --color-gray-700: #687CA2;
  --color-gray-600: #768BB2;
  --color-gray-500: #91A2C1;
  --color-gray-400: #C8D1E0;
  --color-gray-300: #D6DCE8;
  --color-gray-200: #E4E8F0;
  --color-gray-light: #F1F3F7;

  --color-white: #FFF;
  --color-black: #0f1b30;

  --color-body: #152543;

  /* 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-primary);
  --color-font: var(--color-black);
  --color-font-secondary: var(--color-white);
  --color-font-third: var(--color-white);

  /* border*/
  --color-border: var(--color-primary-600);
  /* border 深色模式 800 淺色模式 300 
     hover 深色模式 black 淺色模式 light*/
  --color-body-hover: var(--color-black);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-light);
  --color-link-disable: var(--color-gray-500);
  --color-btn-counter: var(--color-black);
  --color-btn-counter-hover: var(--color-primary-600);
  --color-btn-counter-disable: var(--color-gray-500);

  /* border-radius*/
  --radius-s: 0px;
  --radius-m: 0px;
  --radius-btn: 0px;
  --radius-form-control: var(--radius-s);
  --radius-full: 50px;
  --radius-top: var(--radius-m) var(--radius-m) 0 0;
  --radius-bottom: 0 0 var(--radius-m) var(--radius-m);
  --radius-right: 0 var(--radius-m) var(--radius-m) 0;
  --radius-left: var(--radius-m) 0 0 var(--radius-m);

  /* header */
  --color-header-bg: var(--color-black);
  --color-header-bg-hover: var(--color-gray-900);
  --color-header-text: var(--color-gray-light);
  --color-header-border-bottom: var(--color-primary);

  /* footer */
  --color-footer-bg: var(--color-black);
  --color-footer-text: var(--color-gray-300);
  --color-footer-border:2px solid var(--color-primary);
  --color-footer-border-secondary:var(--color-gray-800);

  /* icon */
  --color-icon: var(--color-gray-800);

   /* tag */
  --color-tag-primary-bg: var(--color-primary-400);
  --color-tag-primary-font: var(--color-black);
  --color-tag-secondary-bg: var(--color-danger-light);
  --color-tag-secondary-font: var(--color-danger);
  --color-tag-third-bg: var(--color-gray-300);
  --color-tag-third-font: var(--color-gray-700);
  --color-tag-promotion-bg: var(--color-tag-primary-bg);
  --color-tag-promotion-font: var(--color-tag-primary-font);

  /* cart-badge  */
  --color-cart-badge-bg: var(--color-primary);
  --color-cart-badge-font: var(--color-white);

  /* news-list */
  /* --color-news-list-bg: var(--color-gray-100); */
  --color-news-list-bg-hover: #ffffff20;
  --color-news-list-font: var(--color-white);
  --color-news-list-time: var(--color-gray-600);
  --color-news-list-border: var(--color-gray-700);

  /* card */
  --color-card-bg: var(--color-primary-200);
  --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-900);
  --color-card-highlight: var(--color-primary-light);

  /* search panel */
  --color-search-panel: var(--color-primary-200);
  --color-search-panel-border: 2px solid var(--color-primary);
  --color-search-panel-unselect: var(--color-primary-600);
  --color-search-panel-font: var(--color-primary);
  --color-search-panel-font-unselect: var(--color-primary-200);
  --color-search-panel-label:var(--color-primary);
  --color-search-panel-form-control:var(--color-primary-200);
  --color-search-panel-form-control-font:var(--color-primary);
  --color-search-panel-form-control-border:1px solid var(--color-primary-600);
  --color-search-panel-icon:var(--color-primary);
  --color-search-panel-icon-bg:var(--color-primary-400);
  --color-search-panel-icon-bg-hover:var(--color-primary-600);
  --color-search-panel-shadow: none;
    --color-search-panel-btn-bg: var(--color-btn-primary-bg);
  --color-search-panel-btn-font: var(--color-btn-primary-font);
  --color-search-panel-btn-border: var(--color-btn-primary-outline);
  --color-search-panel-btn-bg-hover: var(--color-btn-primary-bg-hover);
  --color-search-panel-btn-font-hover: var(--color-btn-primary-font);
  --color-search-panel-btn-border-hover: var(--color-btn-primary-outline-hover);

  /* panel-btn */
  --color-panel-btn-bg:var(--color-search-panel);
  --color-panel-btn-font:var(--color-search-panel-font);
  --color-panel-btn-icon:var(--color-search-panel-icon);


  /* price */
  --color-font-price-amount: var(--color-black);
  --color-font-price-info: var(--color-primary-800);
  --color-font-price-original: var(--color-white);
  --color-label-price-discount: var(--color-white);
  --color-label-price-discount-bg: linear-gradient(to right, #67d591 0%, #063719 100%);
  --color-label-price-discount-angle: #063719;

  /* ---------- form-control ---------- */
  --color-form-label:var(--color-black);
  /* default */
  --color-form-control: var(--color-primary-200);
  --color-form-control-font: var(--color-primary);
  /* focus */
  --color-form-control-border-focus: var(--color-gray-700);
  /* disable */
  --color-form-control-disable: var(--color-gray-800);
  --color-form-control-border-disable: var(--color-gray-800);

  /* ---------- calendar ---------- */
  --color-calendar-head-bg: var(--color-primary-400);
  --color-calendar-head-font: var(--color-black);
  --color-calendar-head-font-disable: var(--color-primary-600);
  --color-calendar-week-bg: var(--color-primary-200);
  --color-calendar-week-border: var(--color-primary-600);
  --color-calendar-week-font: var(--color-primary);
  --color-calendar-day-bg: var(--color-primary-600);
  --color-calendar-date-font: var(--color-black);
  --color-calendar-date-bg: var(--color-primary-200);
  --color-calendar-date-border: var(--color-primary-600);
  --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-primary-200);
  --color-calendar-date-bg-avalible-hover: var(--color-gray-600);
  --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-gray-600);
  --color-calendar-date-availbility-font-waiting: var(--color-danger);
  --color-calendar-date-rate-font-waiting: var(--color-black);
  /* 已客滿 fully */
  --color-calendar-date-bg-fully: var(--color-primary-400);
  --color-calendar-date-availbility-font-fully: var(--color-primary-800);
  --color-calendar-date-rate-font-fully: var(--color-primary-800);
  /* 不適用 unsuitable */
  --color-calendar-date-bg-unsuitable: var(--color-primary-400);
  --color-calendar-date-availbility-font-unsuitable: var(--color-primary-800);
  --color-calendar-date-rate-font-unsuitable: var(--color-primary-800);
  /* 不在專案效期內 expired */
  --color-calendar-date-bg-expired: var(--color-primary-400);
  --color-calendar-date-availbility-font-expired: var(--color-primary-800);
  --color-calendar-date-rate-font-expired: var(--color-primary-800);
  /* 已過期 before*/
  --color-calendar-date-bg-before: var(--color-primary-400);
  --color-calendar-date-availbility-font-before: var(--color-primary-800);

/* ---------- shadow ---------- */
  --color-shadow-primary: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
  --color-shadow-secondary: 0 6px 12px 0 rgba(0, 0, 0, 0.6);
}